topical media & game development

talk show tell print

mobile-query-three-plugins-car-examples-index2.htm / htm



  <!-- # Examples of tQuery.car.js -->
  
  <!-- ```tquery.car.js``` is a plugin provides rendering and controls of sport cars. -->
  <!-- It is based on some examples by [alteredq](http://alteredqualia.com/) in -->
  <!-- [three.js](http://github.com/mrdoob/three.js/). -->
  <!-- You can find them -->
  <!-- [here](http://mrdoob.github.com/three.js/examples/webgl_materials_cars.html) -->
  <!-- and -->
  <!-- [here](http://mrdoob.github.com/three.js/examples/webgl_materials_cubemap_dynamic.html). -->
  
  <!-- -->
  
  <!doctype html><title>tQuery Car Example</title>
  <script src="../../../build/tquery-bundle.js"></script>
  
  <script src="../../../vendor/threex/THREEx.KeyboardState.js"></script>
  <script src="../../keyboard/tquery.keyboard.js"></script>
  
  <script src="../../../vendor/threex/THREEx.DeviceOrientationState.js"></script>
  <script src="../../deviceorientation/tquery.deviceorientation.js"></script>
  
  <script src='../../grassground/tquery.grassground.js'></script>
  <script src='../../fog/tquery.world.createfog.js'></script>
  <script src='../../shadowmap/tquery.light.shadowmap.js'></script>
  
  <script src="../../skymap/tquery.cubetexture.js"></script>
  <script src="../../skymap/tquery.skymap.js"></script>
  
  <script src="../Car.js"></script>
  <script src="../tquery.car.js"></script>
  <script src="../tquery.car.keyboard.js"></script>
  <script src="../tquery.car.deviceorientation.js"></script>
  <script src="../tquery.car.cameracontrols.js"></script>
  
  <script src="../../../vendor/three.js/ShaderExtras.js"></script>
  <script src="../../../vendor/three.js/postprocessing/EffectComposer.js"></script>
  <script src="../../../vendor/three.js/postprocessing/BloomPass.js"></script>
  <script src="../../../vendor/three.js/postprocessing/DotScreenPass.js"></script>
  <script src="../../../vendor/three.js/postprocessing/FilmPass.js"></script>
  <script src="../../../vendor/three.js/postprocessing/MaskPass.js"></script>
  <script src="../../../vendor/three.js/postprocessing/RenderPass.js"></script>
  <script src="../../../vendor/three.js/postprocessing/SavePass.js"></script>
  <script src="../../../vendor/three.js/postprocessing/ShaderPass.js"></script>
  <script src="../../../vendor/three.js/postprocessing/TexturePass.js"></script>
  <script src="../../pproc/tquery.effectcomposer.js"></script>
  <!-- Add a body and add a title -->
  <body style="margin:0;padding:0;overflow:'hidden';"><div id="info" style="z-index: 2">
          Example of tQuery.car plugins<br/>
          <a href="../../../www/vendor/doccoviewer/#../../../plugins/car/examples/" target="_blank">Annotated Source</a>
  </div><script>
          // ## Let's start coding
  
          // We start to create our world as usual. We enable the
          // [boilerplate for three.js](http://learningthreejs.com/blog/2011/12/20/boilerplate-for-three-js/).
  	// It is a fast way start, avoids repetitive tasks, following DRY principles and includes all those good practices which are so easy to forget.
          // Then we just have to ```.start()``` the rendering loop on this world.
          var world        = tQuery.createWorld().boilerplate().start();
  
          //world.addEffectComposer().vignette().finish();
  
          // Now we setup the renderer.
          // In this scene, we want to cast shadows as if it cames from the sun.
          // This is a nice way to improve the realism in our 3D scene
          // We already talked about it in ["Casting Shadow"](http://learningthreejs.com/blog/2012/01/20/casting-shadows/) 
          // The renderer needs to be notified so we set ```.shadowMapEnabled``` and ```.shadowMapSoft``` to true.
          //world.tRenderer().shadowMapEnabled        = true;
          //world.tRenderer().shadowMapSoft                = true;
  
          // ## The Sky
          
          // Now we add a sky to the 3D scene.
          // It will fill the space and make the scene more realistiv.
          // We use a skymap for that. It is is WebGL trick which take a cube, make it so large that it seems infinite.
          // On it, we map a 360degeree texture shaped as a cube, and use a special shader to display it. All is in this
          // shader, it makes the cube appears as if we were in a gigantic sphere. Exactly like we would feel with a sky above
          // our head.
          // We already saw skymaps in ["let's do a sky"](http://learningthreejs.com/blog/2011/08/15/lets-do-a-sky/) post.
          // We just added a new plugins ```tquery.skymap.js```.
          // It avoid repeative code when you do skymap or environement map.
          //tQuery.createSkymap('skybox').addTo(world);
  
          // ## The Lights
  
          // Here we setup the lights. We put one ambient and 2 directional lights.
  
          tQuery.createAmbientLight().addTo(world).color(0xFFFFFF);
          tQuery.createDirectionalLight().addTo(world).position(1,1,-1).color(0xffffff).intensity(2);
  
          // It is rather simple so lets focus on the last one, the one casting shadow.
          // We want it to appear as coming from the sun. 
          // So we looks at the skymap and approximatly localized the sun at ```(-10, 20, 30)```.
          // Then we tune shadow parameters to fit our tastes.
          // You can find more details in ["Casting Shadow"](http://learningthreejs.com/blog/2012/01/20/casting-shadows/) post.
          // Those parameters can be tricky to tune. It helps if you make the shaddow
          // camera visible. You can do so with ```.shadowCameraVisible(true)```.
          tQuery.createDirectionalLight().addTo(world).position(-10, 20, 30).color(0xffffff).intensity(4)
                  .castShadow(true).shadowDarkness(0.8)
                  .shadowMap(512*2,512*2)
                  .shadowCamera(10, -10, 20, -20, 0.1, 50);
  
          // ## The Ground
          
          // Now we add the ground. A car needs a ground to stand on :)
          // For that, we got a little helper ```tquery.grassground.js```.
          // This is just building a ```THREE.Plane``` and mapping a grass
          // texture into it. does the job for a simple and fast ground.
          // We have seen something similar with ```tquery.checkerboard.js``` in
          // ["tQuery Plugin for Doom Characters"](http://learningthreejs.com/blog/2012/05/04/tquery-md2character-a-plugin-for-doom-characters/)
  	// post.
          var ground        = tQuery.createGrassGround({
                  textureUrl        : '../../grassground/images/grasslight-big.jpg',
                  textureRepeatX        : 30,
                  textureRepeatY        : 30,                
          }).addTo(world).receiveShadow(true).scaleBy(100);
  
          // ## The Car
  
          // First we instanciate a ```tQuery.Car``` object with ```tQuery.createCar()```.
          // It will load the models, then material will be setup.
          // ```tQuery.Car``` handles the displacement of the car too.
          // You can make the car turn, go forward and backward, using ```car.controls()```.
          // you can even switch on/off the lights with ```.flareVisible()```
          var car        = tQuery.createCar();
          // Then we had the car model in our world scene. Important if you want to see it :)
          world.add(car.model())
          
          // Now we got the car on the scene, this is all good.
          // But we need the camera to follow this car. We create a camera controls specific
          // to mimic the usual camera in car game. The camera is placed a bit behind the car and look forward.
          // The faster you go, the further you look. This is always nice to see what is coming at you :)
          tQuery.Car.createCameraControls(car, world);
  
          // ## Car Controls
  
          // Now we hook the controls to the car. This determines how the player will controls the
          // car. It can be controlled by the keyboard, so users press arrows on keyboard
          // and the car moves.
          // It can be controlled by the [device orientation](http://dev.w3.org/geo/api/spec-source-orientation.html).
  	// We already talked device orientation in game in
          // [this post](http://learningthreejs.com/blog/2011/09/20/lets-make-a-3D-game-device-orientation/).
  	var hasTouchEvent        = "ontouchstart" in window;
          if( hasTouchEvent )        car.hookDeviceOrientation();
          else                        car.hookKeyboard();
          
          // Now maybe you wonder "why this devices orientation" ?
          // I ported tQuery to IOS. So since tQuery r49.1, it is possible to run
          // tquery on your iphones or ipads.
          // It is possible to render with [canvas 2D](http://www.w3.org/TR/2dcontext/) in the regular browser.
          // Even possible to render WebGL using
          // [WebGL Browser](github.com/benvanik/WebGLBrowser) by [Ben Vanik](twitter.com/#!/benvanik).
  
          // ## The Road
          
          // In a scene, it is cool to create a goal, something for the user to do.
          // A road seems like a perfect goal for a car :)
          // First we create the material we gonna use. This is a [lambert](http://en.wikipedia.org/wiki/Lambertian_reflectance)
  	// with a [reflection](http://en.wikipedia.org/wiki/Reflection_mapping). You put a cube texture in the
          // ```envMap``` parameter and you got your reflection :) Here again, we use tquery.skymap.js to create the cube texture.
          var material        = new THREE.MeshLambertMaterial({
                  ambient        : 0x444444, 
                  color        : 0x666666,
          });
  
          // Now we add the arches. In fact, they are torus which are half in the ground, so the visible part looks like an arche.
          // We put 5 of them along the Z axis. they are all aligned to give an kindof road.
          // ```.castShadow(true)``` make the 3D object as casting shadow. Always a nice trick to enhance realism.
          for(var i = 0; i < 5; i++){
                  tQuery.createTorus(1.25-0.25, 0.25, 8, 6*4, material).addTo(world)
                          .castShadow(true).translateZ( 2 + i * 5 );                
          }
          
          // And we are **DONE**! We got a nice looking car, driving on grass with a sun set. It is 
          // controlled by keyboard and the camera controls is suitable for a game. Not bad
          // for 40 lines of javascripts.
          
          // TODO here put the iframe of the demo
  </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.