topical media & game development

talk show tell print

mobile-query-three-plugins-cannonjs-vendor-cannon.js-examples-threejs.htm / htm



  <DOCTYPE html>
  <html>
    <head>
      <title>three.js / cannon.js example</title>
      <meta charset="utf-8">
      <style>* {margin:0;padding:0}</style>
    </head>
    <body>
      <script src="../libs/Three.js"></script>
      <script src="../build/cannon.js"></script>
      <script>
  
        var world, mass, body, shape, timeStep=1/60,
           camera, scene, renderer, geometry, material, mesh;
        
        initThree();
        initCannon();
        animate();
    
        function initCannon() {
            
            world = new CANNON.World();
            world.gravity.set(0,0,0);
            world.broadphase = new CANNON.NaiveBroadphase();
            world.solver.iterations = 10;
            
            shape = new CANNON.Box(new CANNON.Vec3(1,1,1));
            mass = 1;
            body = new CANNON.RigidBody(mass,shape);
            body.angularVelocity.set(0,10,0);
            world.add(body);
            
        }
    
        function initThree() {
    
            scene = new THREE.Scene();
    
            camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 100 );
            camera.position.z = 5;
            scene.add( camera );
    
            geometry = new THREE.CubeGeometry( 2, 2, 2 );
            material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
    
            mesh = new THREE.Mesh( geometry, material );
            mesh.useQuaternion = true;
            scene.add( mesh );
    
            renderer = new THREE.CanvasRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
    
            document.body.appendChild( renderer.domElement );
    
        }
    
        function animate() {
    
            requestAnimationFrame( animate );
            updatePhysics();
            render();
    
        }
    
        function updatePhysics() {
            
            // Step the physics world
            world.step(timeStep);
  
            // Copy coordinates from Cannon.js to Three.js
            body.position.copy(mesh.position);
            body.quaternion.copy(mesh.quaternion);
    
        }
    
        function render() {
    
            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.