API tools faq
paste
Advertisement
danfalck

ace_editor_threejs.html

danfalck
Apr 11th, 2013
149
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.97 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>ACE in Action</title>
  5. <style type="text/css" media="screen">
  6.  
  7.   #b3 {
  8.         position: absolute;
  9.         top: 5%;
  10.         right: 0;
  11.         bottom: 0;
  12.         left: 0;
  13.         margin:0
  14.     }
  15.    #b4 {
  16.         position: absolute;
  17.         top: 5%;
  18.         right: 0;
  19.         bottom: 0;
  20.         left: 30%;
  21.         margin:0
  22.     }
  23.  
  24.   #editor2 {
  25.         position: absolute;
  26.         top: 10%;
  27.         right: 0;
  28.         bottom: 0;
  29.         left: 0;
  30.         margin:0
  31.     }
  32.   #canvashost {
  33.         position: absolute;
  34.         top: 50%;
  35.         right: 0;
  36.         bottom: 0;
  37.         left: 0;
  38.         margin:0
  39.     }
  40. </style>
  41. </head>
  42.  
  43.  
  44.  
  45.  
  46. <body>
  47. <div id="b3">
  48.   <input onclick="ClearOutput()" type="button" value="Clear Code" />
  49. </div>
  50. <div id="b4">
  51.   <input onclick="pushit()" type="button" value="plot" />
  52. </div>
  53.  
  54. <pre id="editor2" style="height: 220px; width: 400px;">
  55. Webgl path editor
  56. </pre>
  57.    
  58. <div id="canvashost"  style="background-color: black; z-index:-1;height: 300px; width: 400px;">
  59. </div>
  60. <script src="https://raw.github.com/ajaxorg/ace-builds/master/src/ace.js"></script>
  61.  
  62. <script src="src='https://raw.github.com/ajaxorg/ace-builds/master/src/mode-yaml.js"></script>
  63. <script src="src='https://raw.github.com/ajaxorg/ace-builds/master/src/theme-cobalt.js"></script>
  64. </script>
  65. <script>
  66.  
  67.  
  68.     var editor2 = ace.edit("editor2");
  69.     editor2.setTheme("ace/theme/cobalt");
  70.     editor2.session.setMode("ace/mode/yaml");
  71.     editor2.renderer.setShowGutter(false)
  72.     document.getElementById('editor2').style.fontSize='16px';
  73.  
  74. </script>
  75. <script type="text/javascript">
  76.  
  77.             function ClearOutput(){
  78.             //document.getElementById("gcode").value = "";
  79.             editor2.setValue("")
  80.             }
  81.  
  82.  
  83. </script>
  84.         <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r50/three.min.js"></script>
  85.        
  86. <script type="text/javascript">
  87.  
  88.         var container;
  89.         var lastpoint;
  90.         var camera, controls, scene, renderer;
  91.         var cross;
  92.        
  93.         function plotit(mydata){
  94.         //window.onload = function(){
  95.             window.addEventListener('DOMMouseScroll', mousewheel, false);
  96.             window.addEventListener('mousewheel', mousewheel, false);
  97.             init();
  98.             animate();
  99.             function init(){
  100.                 container = document.getElementById('canvashost');
  101.                
  102.                 scene = new THREE.Scene();
  103.                 object = new THREE.AxisHelper( 50);
  104.                 object.position.set( 0, 0, 0 );
  105.                 scene.add( object );
  106.    
  107.                 camera = new THREE.PerspectiveCamera(
  108.                                                 65,             // Field of view
  109.                                                 300 / 300,      // Aspect ratio
  110.                                                 0.1,            // Near plane
  111.                                                 1000           // Far plane
  112.                                             );
  113.                 //camera.position.set( -15, 10, 10 );
  114.                 camera.position.set( 0, 0, 30 );
  115.                 camera.lookAt( scene.position );
  116.                 //camera.lookAt( 0,0,0 );
  117.    
  118.                 controls = new THREE.TrackballControls( camera );
  119.                 controls.rotateSpeed = 1.0;
  120.                 controls.zoomSpeed = 1.2;
  121.                 controls.panSpeed = 0.8;
  122.                 controls.noZoom = false;
  123.                 controls.noPan = false;
  124.                 controls.staticMoving = true;
  125.                 controls.dynamicDampingFactor = 0.3;
  126.                 controls.keys = [ 65, 83, 68 ];
  127.            
  128.                 var geometry = new THREE.Geometry();
  129.                 var a = new THREE.Vector3( 0, 0, 0 );
  130.                 var b = new THREE.Vector3( 0, 10, 0 );
  131.                
  132.                 geometry.vertices.push( a );
  133.    
  134.                 geometry.vertices.push( b );
  135.                 lastpoint = new THREE.Vector3( b.x, b.y, b.z );
  136.                  
  137.  
  138.                 var vers;
  139.                 function y( vers ) {
  140.                     geometry.vertices.push(new THREE.Vector3( vers[0],vers[1], vers[2] )  ) ;
  141.                 }
  142.                
  143.  
  144.  
  145.                 mydata.forEach(function(x,i,mydata) {y(mydata[i]);});
  146.  
  147.  
  148.                
  149.                 var line = new THREE.Line(
  150.                                     geometry, new THREE.LineBasicMaterial(
  151.                                       { color: 0x00FF00, opacity: 0.5 } ) );
  152.                 scene.add( line );
  153.    
  154.                // lights
  155.                 light = new THREE.DirectionalLight( 0xffffff );
  156.                 light.position.set( 1, 1, 1 );
  157.                 scene.add( light );
  158.                 light = new THREE.DirectionalLight( 0x002288 );
  159.                 light.position.set( -1, -1, -1 );
  160.                 scene.add( light );
  161.                 light = new THREE.AmbientLight( 0x222222 );
  162.                 scene.add( light );
  163.                
  164.                 // renderer
  165.                 renderer = new THREE.WebGLRenderer();
  166.  
  167.                 renderer.setSize( 400, 300 );
  168.                 container.appendChild( renderer.domElement );
  169.  
  170.  
  171. } // end of plotit() function
  172.  
  173.  
  174.         function animate(){
  175.             requestAnimationFrame( animate );
  176.             render();
  177.             stats.update();
  178.         }
  179.         function render(){
  180.             controls.update();
  181.             renderer.render( scene, camera );
  182.         }
  183.         //function addLine(){
  184.         var addLine = function(){
  185.             var x = parseFloat(document.getElementById('xPos').value);
  186.             var y = parseFloat(document.getElementById('yPos').value);
  187.             var z = parseFloat(document.getElementById('zPos').value);
  188.             try{
  189.                 var geometry = new THREE.Geometry();
  190.                 var a = new THREE.Vector3(  lastpoint.x, lastpoint.y, lastpoint.z );
  191.                 var b = new THREE.Vector3( x, y, z );
  192.                
  193.                 geometry.vertices.push( a );
  194.                 geometry.vertices.push( b );
  195.  
  196.                
  197.  
  198.                 var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xFF0000, opacity: 0.5 } ) );
  199.                 scene.add( line );
  200.                 lastpoint = new THREE.Vector3( b.x, b.y, b.z );
  201.             }
  202.             catch(err){
  203.                 alert(err);  
  204.             }
  205.         }
  206.         function mousewheel(event) {
  207.  
  208.             var fovMAX = 165;
  209.             var fovMIN = 1;
  210.             var delta = event.detail? event.detail*(-120) : event.wheelDelta
  211.        
  212.             camera.fov -= delta * 0.05;
  213.      
  214.             camera.fov = Math.max( Math.min( camera.fov, fovMAX ), fovMIN );
  215.            
  216.             camera.projectionMatrix = new THREE.Matrix4().makePerspective(camera.fov, window.innerWidth / window.innerHeight, camera.near, camera.far);
  217.         }
  218. }
  219. </script>
  220. <script>
  221.  
  222. function pushit(){
  223.                 var vertdata = [
  224.                 [ 3.8750000, 0.0000000, 0.0000000],
  225.                 [ 3.8750000, 8.0517767, 0.0000000],
  226.                 [ 7.9482234, 12.1250000, 0.0000000],
  227.                 [ 12.0000000, 12.1250000, 0.0000000],
  228.                 [ 12.1393087, 12.1254395, 0.0000000],
  229.                 [ 12.4155424, 12.0890726, 0.0000000],
  230.                 [ 12.6846661, 12.0169612, 0.0000000],
  231.                 [ 12.9420749, 11.9103389, 0.0000000],
  232.                 [ 13.1833646, 11.7710303, 0.0000000],
  233.                 [ 13.4044066, 11.6014188, 0.0000000],
  234.                 [ 13.6014188, 11.4044066, 0.0000000],
  235.                 [ 13.7710303, 11.1833646, 0.0000000],
  236.                 [ 13.9103389, 10.9420749, 0.0000000],
  237.                 [ 14.0169612, 10.6846661, 0.0000000],
  238.                 [ 14.0890726, 10.4155424, 0.0000000],
  239.                 [ 14.1254395, 10.1393087, 0.0000000],
  240.                 [ 14.1250000, 10.0000000, 0.0000000],
  241.                 [ 14.1250000, 4.8722813, 0.0000000],
  242.                 [ 13.9661701, 4.8748010, 0.0000000],
  243.                 [ 13.6493047, 4.8535308, 0.0000000],
  244.                 [ 13.3367184, 4.7974421, 0.0000000],
  245.                 [ 13.0322254, 4.7072195, 0.0000000],
  246.                 [ 12.7395411, 4.5839637, 0.0000000],
  247.                 [ 12.4622367, 4.4291787, 0.0000000],
  248.                 [ 12.2036959, 4.2447531, 0.0000000],
  249.                 [ 11.9670734, 4.0329374, 0.0000000],
  250.                 [ 11.7552564, 3.7963160, 0.0000000],
  251.                 [ 11.5708295, 3.5377762, 0.0000000],
  252.                 [ 11.4160430, 3.2604727, 0.0000000],
  253.                 [ 11.2927857, 2.9677890, 0.0000000],
  254.                 [ 11.2025614, 2.6632964, 0.0000000],
  255.                 [ 11.1464711, 2.3507105, 0.0000000],
  256.                 [ 11.1251992, 2.0338452, 0.0000000],
  257.                 [ 11.1277187, 1.8750000, 0.0000000],
  258.                 [ 3.8750000, 1.8750000, 0.0000000],
  259.                 [ 0.0000000, 0.0000000, 0.0000000]
  260.                 ];
  261.     plotit(vertdata);
  262. }
  263. </script>
  264.  
  265. </body>
  266. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!