-
Notifications
You must be signed in to change notification settings - Fork 124
How to create a cube
Note: Please refer to the Hello Cube demo to see this code at work.
Here's a complete code listing to make a red rotating cube animation with J3D. Place this code inside a <script> tag in your document's <head> section:
<script type="text/javascript" src="j3d.js"></script>
<script>
var engine, cube, light;
window.onload = function() {
engine = new J3D.Engine();
engine.setClearColor(J3D.Color.white);
engine.scene.ambient = new J3D.Color(.5, .5, .5, 1);
light = new J3D.Transform();
light.light = new J3D.Light(J3D.DIRECT);
light.light.color = new J3D.Color(.5, .5, .5, 1);
light.light.direction = new v3(1, 0, 1).norm();
cube = new J3D.Transform();
cube.geometry = J3D.Primitive.Cube(1, 1, 1);
cube.renderer = new J3D.Phong();
cube.renderer.color = new J3D.Color(1,0,0,1);
engine.camera = new J3D.Camera();
engine.camera.transform.position.z = 4;
engine.scene.add(engine.camera.transform, cube, light);
draw();
}
function draw() {
cube.rotation.x += Math.PI * J3D.Time.deltaTime / 6000;
cube.rotation.y += Math.PI/2 * J3D.Time.deltaTime / 3000;
engine.render();
requestAnimationFrame(draw);
}
</script>
The main element of any J3D application is the engine object - you need to create and instance of J3D.Engine before you can do anything else. The engine will take care of creating a canvas element in your document and getting it's webgl context.
The engine has a scene property to which you can add the objects that populate your environment. Before we do this however, we can set it's ambient light property to a color - this way object that are not lit by any light will not be entirely black. With J3D you use J3D.Color class to define colors - the arguments are red, green, blue and alpha values in range [0-1].
Ambient light alone will allow us to see colors but everything will be flat - since it simulates light coming from any direction at any angle, making all the object have a uniform color. To add depth to the scene we need a directional light as well.
In J3D every object in the scene is a transform. We start by creating an instance of J3D.Transform and later attach different elements to it. This simple scene has a light, a cube and a camera - all of them are transforms. A transform in itself is an invisible point in space that has a position, rotation and scale.
The light transform has a light property defined that is an instance of J3D.Light. This way we inform the engine that this is a light source.
The cube transform that we create next will hold our 3d cube objects. A 3d object needs to have two properties: geometry that defines it's shape and renderer that defined how it will look. For the shape we use the build in J3D.Primitive.Cube function to create a cube of size 1. As the renderer we use the built in J3D.Phong shader. Phong is a shader that can be either flat colored or use a texture and it reacts to light. In this simple case we will use just a red color, as defined by assigning an instance of J3D.Color to the color property of the renderer.
Next we need to create a camera - this is our point of view in the 3d world. To do this, we create an instance of J3D.Camera. Note that the camera object already has a transform property and we do not need to create a new J3D.Transform object for it. By default all transform have the position of 0,0,0. In this case it means that our camera is located right in the center of the cube. That is why we move it 4 units along the z-axis, to see the cube from the outside.
Finally, using scene.add we add ALL the transforms to the scene. Our setup is now ready, we can start rendering.
Thanks to the call to requestAnimationFrame the draw function will be called repeatedly. Each time it is invoked we slightly rotate the cube along it's x and y axes and call engine.render to update the rendered view.
Note how the rotation values are multiplied by J3D.Time.deltaTime. The deltaTime gives us the time elapsed since draw was called last time. This way our animation is frame-rate independent.
Back to wiki Home page.