<<< Go Back to Part 1: The Physics
Here's how you create the 3D geometric shape in the Cannon virtual world, which will eventually take effect on the internet browser and your computer screen.
Let's Make a Cube
The geometry will provide the "skeleton" of the shape. Below is the portion of code that relates to the geometry:
var halfextents = new CANNON.Vec3(1,1,1);
var boxShape = new CANNON.Box(halfextents);
First, make a variable where you will store a CANNON.Vec3 object. In this case, we have named the variable "halfextents." Then create the vector by calling the new CANNON.Vec3(x,y,z) constructor. This vector will affect the width, height, and depth of the 3D shape. The vector coordinate arguments that you insert into the constructor is only half of the actual width, height, and depth that will be displayed in the Cannon world when you run your code. In the code, x equals 1, y equals 1, and z equals 1, but the height of the box that we are making will end up being 2 by 2 by 2. In other words, the x,y,z values that you plug into the new CANNON.Vec3(x,y,z) code are only half the size of the physics box shape we are making. That is why we call the corresponding variable "halfextents."
Second, you plug in that vector we just created into the new CANNON.Box(x,y,z) constructor. It will look like the second line of code above. What this does is tell the constructor to make a Box-like shape with the dimensions we defined earlier (the halfextents variable), then store it in the new variable "boxShape."
var boxGeometry = new THREE.BoxGeometry(halfextents.x*2, halfextents.y*2, halfextents.z*2);
Now let's make the physics box correspond to a visible THREE.js cube so that we can see it appear on the screen. The existence of the THREE.js cube will later allow us to give the cube special graphics. The new THREE.BoxGeometry(x,y,z) has three parameters which define the width, height, and depth, just like the CANNON.Box(x,y,z) constructor. As mentioned earlier, the vector we created are only half the dimensions of the actual cube. We must multiply each of the vector's coordinates by 2 in order for the dimensions to match each other perfectly.
>>> Part 3: Rigid Bodies!
Here's how you create the 3D geometric shape in the Cannon virtual world, which will eventually take effect on the internet browser and your computer screen.
Let's Make a Cube
The geometry will provide the "skeleton" of the shape. Below is the portion of code that relates to the geometry:
var halfextents = new CANNON.Vec3(1,1,1);
var boxShape = new CANNON.Box(halfextents);
First, make a variable where you will store a CANNON.Vec3 object. In this case, we have named the variable "halfextents." Then create the vector by calling the new CANNON.Vec3(x,y,z) constructor. This vector will affect the width, height, and depth of the 3D shape. The vector coordinate arguments that you insert into the constructor is only half of the actual width, height, and depth that will be displayed in the Cannon world when you run your code. In the code, x equals 1, y equals 1, and z equals 1, but the height of the box that we are making will end up being 2 by 2 by 2. In other words, the x,y,z values that you plug into the new CANNON.Vec3(x,y,z) code are only half the size of the physics box shape we are making. That is why we call the corresponding variable "halfextents."
Second, you plug in that vector we just created into the new CANNON.Box(x,y,z) constructor. It will look like the second line of code above. What this does is tell the constructor to make a Box-like shape with the dimensions we defined earlier (the halfextents variable), then store it in the new variable "boxShape."
var boxGeometry = new THREE.BoxGeometry(halfextents.x*2, halfextents.y*2, halfextents.z*2);
Now let's make the physics box correspond to a visible THREE.js cube so that we can see it appear on the screen. The existence of the THREE.js cube will later allow us to give the cube special graphics. The new THREE.BoxGeometry(x,y,z) has three parameters which define the width, height, and depth, just like the CANNON.Box(x,y,z) constructor. As mentioned earlier, the vector we created are only half the dimensions of the actual cube. We must multiply each of the vector's coordinates by 2 in order for the dimensions to match each other perfectly.
>>> Part 3: Rigid Bodies!