The animation shows the following dependency among the three main components of the swing:
- The swing arm is attached to the support frame
- The wheel is attached to the swing arm
To render the correct animation of these objects,
- The wheel must be rendered with respect to the swing arm coordinate frame
- The swing arm must be rendered with respect to the support coordinate frame
In OpenGL we express the above dependencies using the following code:
glPushMatrix();
glMulMatrixf (__support_frame_cf__);
support_frame.render();
glPushMatrix();
glMulMatrixf (__arm_cf__);
arm.render();
glPushMatrix();
glMultMatrixf (__wheel_cf__);
wheel.render();
glPopMatrix();
glPopMatrix();
glPopMatrix();
In three.js, these dependencies are expressed as 'parent-child' relationships:
frame = new THREE.Mesh (____, ____);
arm = new THREE.Mesh (____, ____);
wheel = new THREE.Mesh (____, ____);
arm.add (wheel); /* wheel is a child of arm */
frame.add (arm); /* arm is a child of support frame */
scene.add (frame);
The render loop then updates each coordinate frame as follows:
/* update the coordinate frame */
wheel_cf.multiply (_____);
/* decompose it into its translation, rotation, and scale constituents */
wheel_cf.decompose (vpos, qrot, vscale);
/* update the object transformation matrix */
wheel.position.copy (vpos);
wheel.quaternion.copy (qrot);
wheel.scale.copy (vscale); /* if desired */
wheel.updateMatrix();
In ThreeJS, vertex buffers are managed by the BufferGeometry class.
The code sample shapes/cone.js shows an example of buidling an object.
The cone constructor function creates only the geometry, it is missing the material setup.
To use the Cone in a THREE.Mesh object, we must supply a material.
var coneGeo = new Cone(40); // 40 points around the base circle
var coneMat = new THREE.MeshPhongMaterial(); // customize with your own color
var coneMesh = new THREE.Mesh (coneGeo, coneMat);
scene.add(coneMesh); /* place it on the scene */