Changes between Version 2 and Version 3 of threejs/viewer

Timestamp:

Oct 13, 2013, 1:45:01 AM (11 years ago)

Author:

Leon Kos

Comment:

Dodaj onload

threejs/viewer

@@ +1 @@
+
+== Model viewer ==
+Uporabi miško za vrtenje, povečevanje in premikanje modela. 
+
 {{{
 #!html
@@ -22 +26 @@
   
           //Create a perspective camera
-          camera = new THREE.PerspectiveCamera( 75,  myCanvas.offsetWidth / myCanvas.offsetHeight, 1, 1000 );
+          camera = new THREE.PerspectiveCamera( 75,  
+              myCanvas.offsetWidth / myCanvas.offsetHeight, 1, 1000 );
           camera.position.z = 20;
             
@@ -107 +112 @@
           renderer.render( scene, camera );
       }    
-  }               
+  }      
+ window.onload = window.onresize = function() {onLoad();}        
 </script>  
 <canvas id="myCanvas" width="600" height="400"
-                style="background:lightgrey" ></canvas>
+                style="background:lightgrey; float:right;" ></canvas>
 }}}
+
+{{{
+#!javascript
+<script src="/vaje/raw-attachment/wiki/threejs/viewer/three.min.js"></script>
+<script src="/vaje/raw-attachment/wiki/threejs/viewer/TrackballControls.js"></script>
+<script src="/vaje/raw-attachment/wiki/threejs/viewer/STLLoader.js"></script>
+
+<script type="text/javascript">
+  function onLoad(){
+      initScene();
+      function initScene() {
+        
+          // Grab our canvas
+          var myCanvas = document.getElementById("myCanvas");
+          //Create a new renderer and set the size
+          renderer = new THREE.WebGLRenderer( { antialias: true,
+                                                alpha: true,
+                                                canvas: myCanvas} );
+          renderer.setSize(myCanvas.offsetWidth, myCanvas.offsetHeight);
+  
+          //Create a new scene
+          scene = new THREE.Scene();
+  
+          //Create a perspective camera
+          camera = new THREE.PerspectiveCamera( 75,  
+              myCanvas.offsetWidth / myCanvas.offsetHeight, 1, 1000 );
+          camera.position.z = 20;
+            
+          scene.add( camera );
+  
+          //Add controls for interactively moving the camera with mouse
+          controls = new THREE.TrackballControls(camera, renderer.domElement);
+            
+          controls.rotateSpeed = 1.0;
+          controls.zoomSpeed = 1.2;
+          controls.panSpeed = 0.2;
+  
+          controls.noZoom = false;
+          controls.noPan = false;
+  
+          controls.staticMoving = false;
+          controls.dynamicDampingFactor = 0.3;
+  
+          controls.minDistance = 1.1;
+          controls.maxDistance = 100;
+  
+          controls.keys = [ 65, 83, 68 ]; // [ rotateKey, zoomKey, panKey ]
+    
+          //Add some lights
+          var dirLight = new THREE.DirectionalLight(0xffffff, 1);
+          dirLight.position.set(-3, 3, 7);
+          dirLight.position.normalize();
+          scene.add(dirLight);
+  
+          var pointLight = new THREE.PointLight(0xFFFFFF, 5, 50);
+          pointLight.position.set(10, 20, -10);
+          scene.add(pointLight);
+            
+          var material =  new THREE.MeshLambertMaterial(
+                  {color:0xff0000, shading: THREE.FlatShading } );
+
+          var material2 =  new THREE.MeshLambertMaterial(
+              {color:0x00ff00, shading: THREE.FlatShading } );
+
+          var material3 = new THREE.MeshPhongMaterial(
+              { ambient: 0x555555, color: 0xAAAAAA,
+                specular: 0x111111, shininess: 200 } );
+
+          var loader = new THREE.STLLoader();
+          loader.addEventListener( 'load', function ( event ) {
+              var geometry = event.content;
+              var mesh = new THREE.Mesh( geometry, material );
+              mesh.position.set( 0, 0, 0.0 );
+              mesh.rotation.set( -Math.PI/6, -Math.PI/6, 0 );
+              mesh.scale.set( 50, 50, 50 );
+              mesh.castShadow = true;
+              mesh.receiveShadow = true;
+              scene.add( mesh );
+              
+          } );
+          loader.load( '/vaje/raw-attachment/wiki/threejs/viewer/pr2_head_pan.stl' );
+            
+
+          var loader = new THREE.STLLoader();
+          loader.addEventListener( 'load', function ( event ) {
+              var geometry = event.content;
+              var mesh = new THREE.Mesh( geometry, material2 );
+              mesh.position.set( 0, 0, 0.0 );
+              mesh.rotation.set( -Math.PI/6, -Math.PI/6, 0 );
+              mesh.scale.set( 50, 50, 50 );
+              mesh.castShadow = true;
+              mesh.receiveShadow = true;
+              scene.add( mesh );
+              
+          } );
+          loader.load( '/vaje/raw-attachment/wiki/threejs/viewer/pr2_head_tilt.stl' );
+
+          //Call the animate function
+          animate();
+      }
+      function animate() {
+          //will not render if the browser window is inactive
+          requestAnimationFrame( animate );
+          render();
+      }             
+      
+      function render() {
+          controls.update(); //for cameras
+          renderer.render( scene, camera );
+      }    
+  }      
+ window.onload = window.onresize = function() {onLoad();}        
+</script>  
+<canvas id="myCanvas" width="600" height="400"
+                style="background:lightgrey; float:right;" ></canvas>
+}}}