<<< Missed Part 0? Head over now!
Let's say you are trying to input a 3-D rectangular shape into your scene, but you want it to interact with other objects with the illusion of having physical properties! First, you must set up the "physics material" and the "physics contact material."
Physics Materials!
Step 1
The physics material is (from what I gather) an identifier for a certain type of material that you create. To create a new material for your box, make a new CANNON.Material and store it in a variable:
var physicsMaterial = new CANNON.Material("groundMaterial");
The parameter represents a string name that you give to the unique material that you are creating. This material will be "coated" onto the rigid body shape that we will make shortly. It will define how the object interacts with other objects of the same or different physics materials. In order for objects to interact, each must have a physics material associated with it (we will associate the physics material with the object later when creating the object's RigidBody).
Step 2
Next, you make a "contact material" by using the constructor: new CANNON.ContactMaterial(). The contact material defines the rules of how certain materials will interact with each other. The parameters are: Material #1, Material #2, the friction coefficient, and the restitution (or bounciness). A higher friction coefficient will make the interaction less slippery (it will increase the friction). A higher restitution will make the interaction more bouncy or springy.
var physicsContactMaterial = new CANNON.ContactMaterial(
physicsMaterial, // Material #1
physicsMaterial, // Material #2
0.4, // friction coefficient
0.0); // restitution
You'll notice that Material #1 is set as physicsMaterial and Material #2 is also set as physicsMaterial. What this means is that any object that is made of "physicsMaterial" will interact with other objects made of "physicsMaterial." Say you have a box made of "physicsMaterial" and the ground is made of "physicsMaterial." That means the box can collide with the ground (and will not pass straight through it). The box will drag across the ground as though it had friction (thanks to the friction coefficient). It will have a restitution of zero, meaning that if you dropped it from a high place, it would not bounce.
Finally, add the contact material to the CANNON.js world so that it can be recognized.
world.addContactMaterial(physicsContactMaterial); // We must add the contact materials to the
// world
Step 2.5
In the previous example, we made the contact material only able to detect contact material that was the same as itself. You can also make it so that a contact material can recognize a different contact material. First, we make a different kind of material:
var otherMaterial = new CANNON.Material("slipperyMaterial");
The next step is to make the new contact material, the "rules" of the interaction/collision.
var anotherContactMaterial = new CANNON.ContactMaterial(
physicsMaterial, // Material #1
otherMaterial, // Material #2
0.0, // friction coefficient
0.9); // restitution
This time, two different materials interact with each other in a very different way. The friction is zero, so the materials will slip and slide on each other. The restitution is 0.9, so that means that the two materials would bounce off of each other pretty hard.
world.addContactMaterial(anotherContactMaterial); // We must add the contact materials to the
// world
Again, you would have to add the contact material to the physics world so that it can take effect on your scene.
>>> Part 2: The Geometry!
Let's say you are trying to input a 3-D rectangular shape into your scene, but you want it to interact with other objects with the illusion of having physical properties! First, you must set up the "physics material" and the "physics contact material."
Physics Materials!
Step 1
The physics material is (from what I gather) an identifier for a certain type of material that you create. To create a new material for your box, make a new CANNON.Material and store it in a variable:
var physicsMaterial = new CANNON.Material("groundMaterial");
The parameter represents a string name that you give to the unique material that you are creating. This material will be "coated" onto the rigid body shape that we will make shortly. It will define how the object interacts with other objects of the same or different physics materials. In order for objects to interact, each must have a physics material associated with it (we will associate the physics material with the object later when creating the object's RigidBody).
Step 2
Next, you make a "contact material" by using the constructor: new CANNON.ContactMaterial(). The contact material defines the rules of how certain materials will interact with each other. The parameters are: Material #1, Material #2, the friction coefficient, and the restitution (or bounciness). A higher friction coefficient will make the interaction less slippery (it will increase the friction). A higher restitution will make the interaction more bouncy or springy.
var physicsContactMaterial = new CANNON.ContactMaterial(
physicsMaterial, // Material #1
physicsMaterial, // Material #2
0.4, // friction coefficient
0.0); // restitution
You'll notice that Material #1 is set as physicsMaterial and Material #2 is also set as physicsMaterial. What this means is that any object that is made of "physicsMaterial" will interact with other objects made of "physicsMaterial." Say you have a box made of "physicsMaterial" and the ground is made of "physicsMaterial." That means the box can collide with the ground (and will not pass straight through it). The box will drag across the ground as though it had friction (thanks to the friction coefficient). It will have a restitution of zero, meaning that if you dropped it from a high place, it would not bounce.
Finally, add the contact material to the CANNON.js world so that it can be recognized.
world.addContactMaterial(physicsContactMaterial); // We must add the contact materials to the
// world
Step 2.5
In the previous example, we made the contact material only able to detect contact material that was the same as itself. You can also make it so that a contact material can recognize a different contact material. First, we make a different kind of material:
var otherMaterial = new CANNON.Material("slipperyMaterial");
The next step is to make the new contact material, the "rules" of the interaction/collision.
var anotherContactMaterial = new CANNON.ContactMaterial(
physicsMaterial, // Material #1
otherMaterial, // Material #2
0.0, // friction coefficient
0.9); // restitution
This time, two different materials interact with each other in a very different way. The friction is zero, so the materials will slip and slide on each other. The restitution is 0.9, so that means that the two materials would bounce off of each other pretty hard.
world.addContactMaterial(anotherContactMaterial); // We must add the contact materials to the
// world
Again, you would have to add the contact material to the physics world so that it can take effect on your scene.
>>> Part 2: The Geometry!