Cube object

120 views 9:53 am 0 Comments August 3, 2023

Load the lab that creates the cube object.

Create the following 3D viewing environment

Set the camera parameters

fovy=25

aspect ratio=1

near =10

far=200

Set the camera location

eye location: vec3(20, 10, 50)

at location: vec3(0, 0, 0);

up direction: vec3(0,1,0);

Add vertices to the vertex buffer and use them to draw XYZ coordinate axes in the render function

vec4(0, 0, 0, 1));

vec4(12, 0, 0, 1));

vec4(0, 0, 0, 1));

vec4(0, 12, 0, 1));

vec4(0, 0, 0, 1));

vec4(0, 0, 12, 1));

Modify colorCube() function to create an arbitrary size box.

function colorCube(x, y, z) //x, y,z are the size of the box.

{

quad( 1, 0, 3, 2, x, y,z);

quad( 2, 3, 7, 6, x, y,z);

quad( 3, 0, 4, 7, x, y,z);

quad( 6, 5, 1, 2, x, y,z);

quad( 4, 5, 6, 7, x, y,z);

quad( 5, 4, 0, 1, x, y,z);

}

function quad(a, b, c, d, x, y, z)// quad function needs to be changed

{

var vertices = [

vec4( 0, 0, z, 1.0 ),

vec4( x, 0, z, 1.0 ),

vec4( x, y, z, 1.0 ),

vec4( 0, y, z, 1.0 ),

vec4( 0, 0, 0, 1.0 ),

vec4( x, 0, 0, 1.0 ),

vec4( x, y, 0, 1.0 ),

vec4( 0, y, 0, 1.0 )

];

……….

}

Change the colorCube function call in the init function to colorCube(1,2,1). This will create a single box with different side length in XYZ direction.

Making a Bar Bell

I want to create a bar-bell out of three boxes.  This will take three boxes stacked on top of each other.  The ends will be boxes that are 2″ by 1″ by 2″.  The bar between the ends will be a box that is 1/2″ by 4″ by 1/2″.  I would like to have the center of the bar-bell on the origin with the Y axis through its center.  

If you examine the colorCube code, you’ll find that it places the back-left-bottom corner of the box at the origin.  For a bar-bell end, we need the center of the bottom of the box on the origin.  If the box is 2″ square, we need to translate the box back 1″ in the X and Z dimensions. 

Create a function called BarBell() and put the following code into it.

function barBell()

{

//create a global variable to hold transformation matrix;

matrix=translate(-0.25,-2,-0.25, 0);

colorCube(0.5, 4, 0.5); //add the shaft

matrix=translate(-1, -3, -1);

colorCube(2,1,2); //bottom

matrix=translate(-1, 2, -1);

colorCube(2, 1, 2); //top

}

We need to apply the transformation to all the vertices of the colorCube. To do that, we need to create a function to multiply a matrix and a vector as follows:

function multiply( u, v )

{

var result = [];

for ( var i = 0; i < u.length; ++i ) {

var sum = 0.0;

for ( var k = 0; k < u.length; ++k ) {

sum += u[i][k] * v[k];

}

result.push( sum );

}

return result;

}

Modify the following statement in the quad function:

change points.push(vertices[indices[i]); to

points.push(multiply(matrix,vertices[indices[i]]) );

Run this and you should see the bar-bell in the center of the origin.  

Making your Bar-Bell Spin

Make the Bar-Bell Spin around more than one axis at a time.

 

 

 

Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,