topical media & game development

talk show tell print

mobile-query-three-vendor-threex-examples-threex.domevent-tmp-index.orig.htm / htm



  <!doctype html>
  <html>
          <head>
                  <title>learningthree.js boiler plate for three.js</title>
                  <meta charset="utf-8">
                  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
                  
                          
                  <script src="vendor/three.js/Three.js"></script>
                  <script src="vendor/three.js/Detector.js"></script>
                  <!-- see details at http://paulirish.com/2011/requestanimationframe-for-smart-animating/ -->
                  <script src="vendor/three.js/RequestAnimationFrame.js"></script>
                  <!-- github.com/mrdoob/stats.js -->
                  <script src="vendor/three.js/Stats.js"></script>
  
                  <script src="vendor/threex/THREEx.screenshot.js"></script>
                  <script src="vendor/threex/THREEx.FullScreen.js"></script>
                  <script src="vendor/threex/THREEx.WindowResize.js"></script>
                  <script src="vendor/threex.dragpancontrols.js"></script>
  
                  <link  href="css/main.css" rel="stylesheet"/>
          </head>
  <body>
          <!-- three.js container -->
              <div id="container"></div>
          <!-- info on screen display -->
          <div id="info">
                  <div class="top">
                          <a href="http://learningthreejs.com/blog/2011/12/20/boilerplate-for-three-js/" target="_blank">LearningThree.js</a>
                          boiler plate for
                          <a href="https://github.com/mrdoob/three.js/" target="_blank">three.js</a>
                  </div>
                  <div class="bottom" id="inlineDoc" >
                          - <i>p</i> for screenshot
                  </div> 
          </div> 
  
          <script type="text/javascript">
                  var stats, scene, renderer, projector;
                  var camera, cameraControl;
                  var mouse = { x: 0, y: 0 };
  
                  if( !init() )        animate();
  
                  // init the scene
                  function init(){
  
                          renderer = new THREE.WebGLRenderer({
                                  antialias                : true,        // to get smoother output
                                  preserveDrawingBuffer        : true        // to allow screenshot
                          });
                          renderer.sortObjects = false;
  
                          renderer.setClearColorHex( 0xBBBBBB, 1 );
                          renderer.setSize( window.innerWidth, window.innerHeight );
                          document.getElementById('container').appendChild(renderer.domElement);
  
                          // add Stats.js - github.com/mrdoob/stats.js
                          stats = new Stats();
                          stats.domElement.style.position        = 'absolute';
                          stats.domElement.style.bottom        = '0px';
                          document.body.appendChild( stats.domElement );
  
                          // create a scene
                          scene = new THREE.Scene();
  
                          // put a camera in the scene
                          camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
                          camera.position.set( 0, 30, 50 );
  
                          projector = new THREE.Projector();
  
                          renderer.domElement.addEventListener( 'mousemove', onDocumentMouseMove, false );
  
                          // here you add your objects
                          // - you will most likely replace this part by your own
                          var geometry        = new THREE.CubeGeometry( 20, 20, 20 );
                          var material        = new THREE.MeshNormalMaterial();
                          var mesh        = new THREE.Mesh( geometry, material );
                          scene.add( mesh );
                  }
  
                  function onDocumentMouseMove( event ) {
  
                          event.preventDefault();
  
                          mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
                          mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
  
                  }
  
                  // animation loop
                  function animate() {
  
                          // loop on request animation loop
                          // - it has to be at the begining of the function
                          // - see details at http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
  			requestAnimationFrame( animate );
  
                          // do the render
                          render();
  
                          // update stats
                          stats.update();
                  }
  
                  // render the scene
                  function render() {
  
                          var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
                          projector.unprojectVector( vector, camera );
                          var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
                          var intersects = ray.intersectScene( scene );
                          console.log("slota", intersects.length)
  
                          // actually render the scene
                          renderer.render( scene, camera );
                  }
          </script>
  </body>
  </html>
  


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.