topical media & game development

talk show tell print

mobile-query-three-plugins-cannonjs-examples-table.htm / htm



  <!doctype html><title>Minimal tQuery Page</title>
  <script src="../../../build/tquery-bundle-require.js"></script>
  <script src="../vendor/cannon.js/build/cannon.js"></script>
  <script src="../tquery.world.cannonjs.js"></script>
  <script src="../tquery.object3d.cannonjs.js"></script>
  <body><script>
  require(['tquery.poolball', 'tquery.shadowmap', 'tquery.deviceorientation'
          , 'tquery.webaudio', 'tquery.keyboard', 'tquery.fireball'], function(){
          var world        = tQuery.createWorld().boilerplate().start()
                                  .shadowMapEnabled(true)
  
          world.tCamera().position.z        = 15;
  
          world.removeCameraControls();
          world.tCamera().position.z        = 3;
          world.tCamera().position.y        = 1;
          world.tCamera().position.setLength(5)
          world.tCamera().lookAt(new THREE.Vector3(0,0,0))
          
          var cameraContainer        = tQuery.createObject3D().addTo(world)
          cameraContainer.add(world.tCamera())
  
          // enable webaudio
          WebAudio.isAvailable && world.enableWebAudio();
          var sounds        = null;
          if( false && WebAudio.isAvailable ){
                  world.getWebAudio().volume(10)
                  sounds        = {};
                  sounds.impact        = tQuery.createSound().load('../../assets/sounds/kick.wav');
          }
          var table        = tQuery.createObject3D().addTo(world)
  
          // put some lights
          tQuery.createAmbientLight().addTo(world).color(0x444444);
          tQuery.createDirectionalLight().addTo(world).position(6,6,6)
                  .castShadow(true)
                  .shadowDarkness(0.6)
                  .shadowMap(512*4,512*4)
                  .shadowCamera(12, -12, 8, -8, 0.1, 20)
                  //.shadowCameraVisible(true)
  
          world.enableCannonjs()
          var physicsWorld= world.cannonjsWorld();
          physicsWorld.gravity.set(0,-9.8,0);
          physicsWorld.solver.iterations = 10;
  
          var tileW        = 0.2;
  
  if(false){
          var axis        = tQuery.createAxis().addTo(world)
                                  .translateY(1)        
          world.loop().hook(function(){
                  var rotation        = axis.get(0).rotation;
                  if( tQuery.keyboard().pressed('up') ){
                          rotation.x        += 0.01;
                  }else if( tQuery.keyboard().pressed('down') ){
                          rotation.x        -= 0.01;
                  }
                  if( tQuery.keyboard().pressed('left') ){
                          rotation.z        += 0.01;
                  }else if( tQuery.keyboard().pressed('right') ){
                          rotation.z        -= 0.01;
                  }
                  rotation.x        *= 0.99;
                  rotation.z        *= 0.99;
                  
                  var matrix        = new THREE.Matrix4().setRotationFromEuler(rotation.clone().negate());
                  var vector        = tQuery.createVector3(0,-9.81, 0)
                  matrix.multiplyVector3(vector)
                  //vector.applyMatrix4( matrix );
                  physicsWorld.gravity.set(vector.x, vector.y, vector.z);
          });        
  }
  
  // sounds
  // * granular sound for rolling
  //   * depend on angularVelocity
  // * impact sound
  //   * volume depends on velocity
  // ## step
  // * draw maze on paper
  // * convert it in js
  // * sync chock with sound
  // * sync with macbook orientation
  
  (function(){
          var object3D        = tQuery.createSphere().addTo(world)
                                  .translateY(0)
                                  .geometry()
                                          .scaleBy(0.8)
                                          .back()
                                  .castShadow(true)
                                  .receiveShadow(true)
                                  .setLambertMaterial()
                                          .map('../../assets/images/plywood.jpg')
                                          .color(0xaa22aa)
                                          .back()
                                  .addCannonjs({
                                                  mass        : 0
                                          })
                                          .addTo(physicsWorld)
                                          .back()
                                          
          var gridX        = 5;
          var gridZ        = 5;
          object3D.cannonjs().positionX(gridX * tileW)
          object3D.cannonjs().positionZ(gridZ * tileW)
  
          object3D.cannonjs().body().addEventListener("collide",function(event){
                  console.log('bumpercollide')
                  object3D.get(0).material.color.setHex(0xff2222);
          });
  })();
          
  var ball        = (function(){
          var object3D        = tQuery.createPoolBall().addTo(world)
                                  .position(-0.85,3,1)
                                  .geometry()
                                          .scaleBy(0.8)
                                          .back()
                                  .castShadow(true)
                                  .receiveShadow(true)
                                  .addCannonjs()
                                          .addTo(physicsWorld)
                                          .back()
          object3D.cannonjs().body().addEventListener("collide",function(event){
                  var body        = object3D.cannonjs().body();
                  var speed        = body.velocity.norm();
                  if( sounds ){
                          var sound        = sounds.impact.play();
                          sound.node.gain.value        = (speed*speed)/75;
                  }
          });
          return object3D;
  })();
  if(true){
          world.loop().hook(function(){
                  var ballPosition= ball.get(0).matrixWorld.getPosition();
                  var worldPoint        = new CANNON.Vec3(ballPosition.x, ballPosition.y, ballPosition.z);
                  var force        = new CANNON.Vec3(0,0,0);
                  var dt                = 1/100;
                  var length        = 10;
                  if( tQuery.keyboard().pressed('up') ){
                          force.z        = -length;
                  }else if( tQuery.keyboard().pressed('down') ){
                          force.z        = +length;
                  }
                  if( tQuery.keyboard().pressed('left') ){
                          force.x        = -length;
                  }else if( tQuery.keyboard().pressed('right') ){
                          force.x        = +length;
                  }
                  var body        = ball.cannonjs().body();
                  body.applyImpulse(worldPoint,force,dt);
          });        
  }
  
          world.loop().hook(function(){
                  cameraContainer.position( ball.position() )
          });
  
          // tQuery.createPoolBall().addTo(world)
          //         .addCannonjs().addTo(physicsWorld)        
          //                 .position(0, 10, 1.3)
          //                 .back()
          //         .castShadow(true)
  
          // var object	= tQuery.createAxis().addTo(world)
          //         .translateY(1)
          // world.loop().hook(function(){
          //         var orientation        = tQuery.deviceOrientation();
          //         object.rotation( -orientation.angleY(), 0, orientation.angleZ() );
          // })
  
          var cursorX        = 0;
          var cursorZ        = 0;
          var cursor        = {
                  moveTo        : function(gridX, gridZ){
                          cursorX        = gridX;
                          cursorZ        = gridZ;
                          return this;
                  },
                  drawTo        : function(gridX, gridZ){
                          if( gridX === cursorX ){
                                  addWallVert(gridX, cursorZ, gridZ)
                                  cursorZ        = gridZ;        
                          }else if( gridZ === cursorZ ){
                                  addWallHori(gridZ, cursorX, gridX)
                                  cursorX        = gridX;
                          }else        console.assert(false);
                          return this;
                  }
          }        
  
          // add the ground
          addGround(-10, -6, 10, 6)
          
          // TODO do an API moveTo(), drawTo()
          //addBox(-1, -1, 1, 1)
          addWallHori(0, -5, 5)
          addWallVert(-5, -5, 5)
          
          // cursorMoveTo(-10, -10)
          // cursorDrawTo(-10, -15)
          //cursor.moveTo(-10,10).drawTo(3, 10)
          
          
  
          function addWallHori(gridZ, gridX1, gridX2){
                  if( gridX1 > gridX2 ){
                          var tmp        = gridX2;
                          gridX2        = gridX1;
                          gridX1        = tmp;
                  }
                  var xMin        = gridX1*tileW - tileW/2;
                  var zMin        = gridZ *tileW - tileW/2;
                  var xMax        = gridX2*tileW + tileW/2;
                  var zMax        = gridZ *tileW + tileW/2;
                  return addBox(xMin, zMin, xMax, zMax)
          }
          function addWallVert(gridX, gridZ1, gridZ2){
                  if( gridZ1 > gridZ2 ){
                          var tmp        = gridZ2;
                          gridZ2        = gridZ1;
                          gridZ1        = temp;
                  }
                  var xMin        = gridX *tileW - tileW/2;
                  var zMin        = gridZ1*tileW - tileW/2;
                  var xMax        = gridX *tileW + tileW/2;
                  var zMax        = gridZ2*tileW + tileW/2;
                  return addBox(xMin, zMin, xMax, zMax)
          }
          
          function addBox(x1, z1, x2, z2){
                  var width        = Math.abs(x2 - x1);
                  var depth        = Math.abs(z2 - z1);
                  var object3D        = tQuery.createCube(width,1,depth).addTo(table)
                                          .translateY(0.5)
                                          .translateX(x1 + width/2)
                                          .translateZ(z1 + depth/2)
                                          .addCannonjs({
                                                  mass        : 0
                                          }).addTo(physicsWorld)
                                                  .back()
                                          .setLambertMaterial()
                                                  .color(0xcccccc)
                                                  .map('../../assets/images/plywood.jpg')
                                                  .back()
                                          .receiveShadow(true)
                                          .castShadow(true)
                  object3D.get(0).material.map.repeat.x        = 10;
                  object3D.get(0).material.map.repeat.Y        = 10;
                  object3D.get(0).material.map.wrapS        = THREE.RepeatWrapping;
                  object3D.get(0).material.map.wrapT        = THREE.RepeatWrapping;
                  return object3D;
          }
  
          function addGround(x1, z1, x2, z2){
                  var width        = Math.abs(x2 - x1);
                  var depth        = Math.abs(z2 - z1);
                  var object3D        = tQuery.createCube(width,1,depth).addTo(table)
                                          .translateY(-0.5)
                                          .translateX(x1 + width/2)
                                          .translateZ(z1 + depth/2)
                                          .addCannonjs({
                                                  mass        : 0
                                          }).addTo(physicsWorld)
                                                  .back()
                                          .setLambertMaterial()
                                                  .color(0xffffff)
                                                  .map('../../assets/images/plywood.jpg')
                                                  .back()
                                          .receiveShadow(true)
                                          .castShadow(true)
                  object3D.get(0).material.map.repeat.x        = 10;
                  object3D.get(0).material.map.repeat.Y        = 10;
                  object3D.get(0).material.map.wrapS        = THREE.RepeatWrapping;
                  object3D.get(0).material.map.wrapT        = THREE.RepeatWrapping;
                  return object3D;
          }
  });
  </script></body>


(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.