Changes between Version 2 and Version 3 of threejs/viewer


Ignore:
Timestamp:
Oct 13, 2013, 1:45:01 AM (7 years ago)
Author:
Leon Kos
Comment:

Dodaj onload

Legend:

Unmodified
Added
Removed
Modified
  • threejs/viewer

    v2 v3  
     1
     2== Model viewer ==
     3Uporabi miško za vrtenje, povečevanje in premikanje modela.
     4
    15{{{
    26#!html
     
    2226 
    2327          //Create a perspective camera
    24           camera = new THREE.PerspectiveCamera( 75,  myCanvas.offsetWidth / myCanvas.offsetHeight, 1, 1000 );
     28          camera = new THREE.PerspectiveCamera( 75, 
     29              myCanvas.offsetWidth / myCanvas.offsetHeight, 1, 1000 );
    2530          camera.position.z = 20;
    2631           
     
    107112          renderer.render( scene, camera );
    108113      }   
    109   }               
     114  }     
     115 window.onload = window.onresize = function() {onLoad();}       
    110116</script> 
    111117<canvas id="myCanvas" width="600" height="400"
    112                 style="background:lightgrey" ></canvas>
     118                style="background:lightgrey; float:right;" ></canvas>
    113119}}}
     120
     121{{{
     122#!javascript
     123<script src="/vaje/raw-attachment/wiki/threejs/viewer/three.min.js"></script>
     124<script src="/vaje/raw-attachment/wiki/threejs/viewer/TrackballControls.js"></script>
     125<script src="/vaje/raw-attachment/wiki/threejs/viewer/STLLoader.js"></script>
     126
     127<script type="text/javascript">
     128  function onLoad(){
     129      initScene();
     130      function initScene() {
     131       
     132          // Grab our canvas
     133          var myCanvas = document.getElementById("myCanvas");
     134          //Create a new renderer and set the size
     135          renderer = new THREE.WebGLRenderer( { antialias: true,
     136                                                alpha: true,
     137                                                canvas: myCanvas} );
     138          renderer.setSize(myCanvas.offsetWidth, myCanvas.offsetHeight);
     139 
     140          //Create a new scene
     141          scene = new THREE.Scene();
     142 
     143          //Create a perspective camera
     144          camera = new THREE.PerspectiveCamera( 75, 
     145              myCanvas.offsetWidth / myCanvas.offsetHeight, 1, 1000 );
     146          camera.position.z = 20;
     147           
     148          scene.add( camera );
     149 
     150          //Add controls for interactively moving the camera with mouse
     151          controls = new THREE.TrackballControls(camera, renderer.domElement);
     152           
     153          controls.rotateSpeed = 1.0;
     154          controls.zoomSpeed = 1.2;
     155          controls.panSpeed = 0.2;
     156 
     157          controls.noZoom = false;
     158          controls.noPan = false;
     159 
     160          controls.staticMoving = false;
     161          controls.dynamicDampingFactor = 0.3;
     162 
     163          controls.minDistance = 1.1;
     164          controls.maxDistance = 100;
     165 
     166          controls.keys = [ 65, 83, 68 ]; // [ rotateKey, zoomKey, panKey ]
     167   
     168          //Add some lights
     169          var dirLight = new THREE.DirectionalLight(0xffffff, 1);
     170          dirLight.position.set(-3, 3, 7);
     171          dirLight.position.normalize();
     172          scene.add(dirLight);
     173 
     174          var pointLight = new THREE.PointLight(0xFFFFFF, 5, 50);
     175          pointLight.position.set(10, 20, -10);
     176          scene.add(pointLight);
     177           
     178          var material =  new THREE.MeshLambertMaterial(
     179                  {color:0xff0000, shading: THREE.FlatShading } );
     180
     181          var material2 =  new THREE.MeshLambertMaterial(
     182              {color:0x00ff00, shading: THREE.FlatShading } );
     183
     184          var material3 = new THREE.MeshPhongMaterial(
     185              { ambient: 0x555555, color: 0xAAAAAA,
     186                specular: 0x111111, shininess: 200 } );
     187
     188          var loader = new THREE.STLLoader();
     189          loader.addEventListener( 'load', function ( event ) {
     190              var geometry = event.content;
     191              var mesh = new THREE.Mesh( geometry, material );
     192              mesh.position.set( 0, 0, 0.0 );
     193              mesh.rotation.set( -Math.PI/6, -Math.PI/6, 0 );
     194              mesh.scale.set( 50, 50, 50 );
     195              mesh.castShadow = true;
     196              mesh.receiveShadow = true;
     197              scene.add( mesh );
     198             
     199          } );
     200          loader.load( '/vaje/raw-attachment/wiki/threejs/viewer/pr2_head_pan.stl' );
     201           
     202
     203          var loader = new THREE.STLLoader();
     204          loader.addEventListener( 'load', function ( event ) {
     205              var geometry = event.content;
     206              var mesh = new THREE.Mesh( geometry, material2 );
     207              mesh.position.set( 0, 0, 0.0 );
     208              mesh.rotation.set( -Math.PI/6, -Math.PI/6, 0 );
     209              mesh.scale.set( 50, 50, 50 );
     210              mesh.castShadow = true;
     211              mesh.receiveShadow = true;
     212              scene.add( mesh );
     213             
     214          } );
     215          loader.load( '/vaje/raw-attachment/wiki/threejs/viewer/pr2_head_tilt.stl' );
     216
     217          //Call the animate function
     218          animate();
     219      }
     220      function animate() {
     221          //will not render if the browser window is inactive
     222          requestAnimationFrame( animate );
     223          render();
     224      }             
     225     
     226      function render() {
     227          controls.update(); //for cameras
     228          renderer.render( scene, camera );
     229      }   
     230  }     
     231 window.onload = window.onresize = function() {onLoad();}       
     232</script> 
     233<canvas id="myCanvas" width="600" height="400"
     234                style="background:lightgrey; float:right;" ></canvas>
     235}}}