What We Gonna Build ?
What you see below is what we gonna build. Pretty nice no ? Try it out.
It shows what is possible with
It is a plugin provides rendering and controls of sport cars.
It is heavily based on some examples by alteredq in
You can find them
The car is a Bugatti Veyron model by
Now let’s get started.
Let’s start coding
We start to create our world as usual. We enable the
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.
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”
The renderer needs to be notified so we set
.shadowMapSoft to true.
Now we add a sky to the 3D scene.
It will fill the space and make the scene more realistic.
We use a skymap for that. It 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 appear as if we were in a gigantic sphere. Exactly like we would feel with a sky above
We already saw skymaps in “let’s do a sky” post.
We just added a new plugins
It avoids repeative code when you do skymap or environement map.
Here we setup the lights. We put one ambient and 2 directional lights.
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 look 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” post.
Those parameters can be tricky to tune. It helps if you make the shaddow
camera visible. You can do so with
1 2 3 4
Now we add the ground. A car needs a ground to stand on :)
For that, we got a little helper
This is just building a
THREE.Plane and mapping a grass
texture into it.
It does the job for a simple and fast ground.
We have seen something similar with
“tQuery Plugin for Doom Characters”
1 2 3 4 5
First we instanciate a
tQuery.Car object with
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
you can even switch on/off the lights with
Then we had the car model in our world scene. Important if you want to see it :)
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 looks forward. The faster you go, the further you look. This is always nice to see what is coming at you :)
Now we hook the controls to the car. This determines how the player will control 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. We already talked device orientation in game in this post.
1 2 3
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 in the regular browser. Even possible to render WebGL using WebGL Browser by Ben Vanik.
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
with a reflection. 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.
1 2 3 4 5
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 a kindof road.
.castShadow(true) make the 3D object as casting shadow. Always a nice trick to enhance realism.
1 2 3 4
In this post, i walked you thru a example of
tQuery.car.js. It builds a rather
cool scene in 40lines of js. It seems a nice base for a game. Like the
walk through, we got very short code. I like this, it makes it easier to understand
and learn. WebGL for All!! :)
That’s all folks! have fun.