topical media & game development

talk show tell print

mobile-query-three-vendor-threex-examples-threex.domevent-tmp-webgl-interactive-cubes.htm / htm



  <!doctype html>
  <html lang="en">
          <head>
                  <title>three.js webgl - interactive cubes</title>
                  <meta charset="utf-8">
                  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
                  <style>
                          body {
                                  font-family: Monospace;
                                  background-color: #f0f0f0;
                                  margin: 0px;
                                  overflow: hidden;
                          }
                  </style>
          </head>
          <body>
  
                  <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>
  
                          var container, stats;
                          var camera, scene, projector, renderer;
  
                          var mouse = { x: 0, y: 0 }, INTERSECTED;
  
                          init();
                          animate();
  
                          function init() {
  
                                  container = document.createElement( 'div' );
                                  document.body.appendChild( container );
  
                                  var info = document.createElement( 'div' );
                                  info.style.position = 'absolute';
                                  info.style.top = '10px';
                                  info.style.width = '100%';
                                  info.style.textAlign = 'center';
                                  info.innerHTML = '<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> webgl - interactive cubes';
                                  container.appendChild( info );
  
                                  camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
                                  camera.position.set( 0, 0, 50 );
  
                                  scene = new THREE.Scene();
  
                                  var light = new THREE.DirectionalLight( 0xffffff, 2 );
                                  light.position.set( 1, 1, 1 ).normalize();
                                  scene.add( light );
  
                                  var light = new THREE.DirectionalLight( 0xffffff );
                                  light.position.set( -1, -1, -1 ).normalize();
                                  scene.add( light );
  
                                  projector = new THREE.Projector();
  
                                  renderer = new THREE.WebGLRenderer();
                                  renderer.sortObjects = false;
                                  renderer.setSize( window.innerWidth, window.innerHeight );
  
                                  container.appendChild(renderer.domElement);
  
                                  stats = new Stats();
                                  stats.domElement.style.position = 'absolute';
                                  stats.domElement.style.top = '0px';
                                  container.appendChild( stats.domElement );
  
                                  document.addEventListener( 'mousemove', onDocumentMouseMove, false );
  
                                  var geometry        = new THREE.CubeGeometry( 20, 20, 20 );
                                  var material        = new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } )
                                  var object	= new THREE.Mesh( geometry, material );
                                  scene.add( object );
  
                          }
  
                          function onDocumentMouseMove( event ) {
  
                                  event.preventDefault();
  
                                  mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
                                  mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
  
                          }
  
                          //
  
                          function animate() {
  
                                  requestAnimationFrame( animate );
  
                                  render();
                                  stats.update();
  
                          }
  
                          function render() {
  
                                  // find intersections
  
                                  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)
  
                                  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.