Carlos Ulloa, with his brainchild Papervision3D, released a cool looking sports car a while back and John Lindquist picked it up on his site and released the code. But what was not released was how to create such a car and export it as a controllable Collada file for use in PV3D. So, I built the Flintstones “Barney Rubble Car” below to illustrate the process.
In this post, we will show you how to create a controllable vehicle and more…
Barney Rubble Car in 3DSMax
(Click the screen to activate the car, then control it using your arrow keys-use double arrows left+up to get a continuous left turn…)
The video above walks you through the creation of the car. So I won’t go through that. We will start with once your Collada file is exported.
After Creating Your Barney Car
Just as you would put a model together, as you create the different parts in 3DSMax, you just place them together. The important part is that you give each one of them a name so you can control them with ActionScript. In this particular example the following naming convention was used:
- CarBody-your “Barney Log” car body
- FRWheel-your front right wheel which links to your steerFR (disk brake)
- FLWheel-your front left wheel
- steerFR-your front right disc brake which acts as the linkage container for your FRWheel
- steerFL-your front left disc brake which acts as the linkage container for your FLWheel
- RRWheel-your rear right wheel
- RLWheel-your rear left wheel
So after creating and naming all the elements of your “Barney car” in 3DSMax (for example), export your car as a Collada file.
When you look at a Collada file for the first time you might be shocked. It looks somewhat horrific at first. But actually Collada files are very simple. They are organized into libraries. Each library typically contains some important aspect of 3D, such as lights, cameras, geometry, animation, physics, and so on…
In the case of the “Barney car” above, you’re interested in examining the visual_scenes library. Collada files can be opened in Dreamweaver or Flex. When examining the visual_scenes library nodes you’ll find all the elements created by our 3DSMAX.
<node id=”CarBody-node” name=”CarBody” type=”NODE”>
<node id=”RRWheel-node” name=”RRWheel” type=”NODE”>
<node id=”RLWheel-node” name=”RLWheel” type=”NODE”>
<node id=”steerFR-node” name=”steerFR” type=”NODE”>
<node id=”FRWheel-node” name=”FRWheel” type=”NODE”>
<node id=”steerFL-node” name=”steerFL” type=”NODE”>
<node id=”FLWheel-node” name=”FLWheel” type=”NODE”>
When importing the “Barney car” Collada file into PV3D, you’ll use these names to control your car.
Grabbing Names from Collada
Your first task, after importing the Collada file into PV3D, is to grab these names from the Collada file so you can use them in your program.
// Steering disc for front wheels
steerFR = collada.getChildByName( “steerFR”, true );
steerFL = collada.getChildByName( “steerFL”, true );
// Rotation of wheels
wheelFR = collada.getChildByName( “FRWheel”, true );
wheelFL = collada.getChildByName( “FLWheel”, true );
wheelRR = collada.getChildByName( “RRWheel”, true );
wheelRL = collada.getChildByName( “RLWheel”, true );
These names are stored in appropriate variables and used to control your car. You’ll first investigate the steering mechanism.
Creating a Steering Mechanism
Key to creating a steering mechanism is using linking. The steering mechanism is created in 3DSMax by linking the front wheels to their corresponding disc brakes. Since the tires are children of the disc brakes, when the disc brakes are rotated the tires rotate with them. And when the car is moved forward all the tires rotate together in sequence.
Putting this all together in the code below illustrates how the car’s wheels are maneuvered in PV3D. The steering code is surprisingly simple and consists of only two lines of code.
steerFR.rotationY = steer;
steerFL.rotationY = steer;
So as the steering parameter is changed the rotationY for your disc is changed, thus changing the angle of your wheel. Next you’ll learn to make your wheels roll.
Rolling Wheels and Moving Car
As the speed of you car is increased the wheel yaw is also increased making the wheels turn.
var roll :Number = speed*.4;
wheelFR.yaw( roll );
wheelFL.yaw( roll );
wheelRL.yaw( roll );
wheelRR.yaw( roll );
// Turn your car
car.yaw( speed * steer / 500 );
// Move car forward
car.moveLeft( speed )
Finally, the car itself is turned using the yaw command and moved forward (or backwards) using moveLeft, where the parameter in the move method is the distance to move in pixels. Now you might have been expecting moveForward to be used, and in other cases it is. It just depends on your geometry of how your car was created in 3DSMax, and in this case moveLeft actually took you forward.
To see all the car code click below or download the source above.
Read the rest of this entry »