Before beginning, please read about the basics of Three ( .jshere is another good tutorial) and the basics of Cannon.js. It will also help to first build a simple scene yourself and/or play around with demo source code.
This tutorial will be about "object" basics. By object, I mean spheres, cubes, and other shapes that are able to be made in Cannon.js and Three.js. I will show you how to make these objects behave like real, physical objects.
Overview
Every Three.js/Cannon.js Object that you put into the virtual-physical world requires some basic components to be defined. These are:
After defining these six things for your object, you can then add the Mesh to the Three.js scene and the RigidBody to the Cannon.js scene (it is important to do both!) and give them specified (x,y,z) positions.
Let's get started! >>> Part 1: The Physics
This tutorial will be about "object" basics. By object, I mean spheres, cubes, and other shapes that are able to be made in Cannon.js and Three.js. I will show you how to make these objects behave like real, physical objects.
Overview
Every Three.js/Cannon.js Object that you put into the virtual-physical world requires some basic components to be defined. These are:
- [Cannon.js] Physics material - The "type" of material.
- [Cannon.js] Physics contact material - This defines the physics of how an object will react when hit by another object, such as bounciness and friction. Both interacting objects must have physics contact materials defined in order to interact.
- [Cannon.js] Geometry - This may be a sphere, box, plane, cylinder, etc. This component of the object will create a 3-D shape in the Cannon.js "world."
- [Three.js] Geometry - The basic shape of the object. The geometry is the shape that the user will be able to see on the screen. However it does not move by itself or detect collisions. More on this later.
- [Cannon.js] RigidBody - This will give the object physical properties and allow it later to move and be detected in collisions.
- [Three.js] Mesh material - The "skin" of the shapes. It defines the outer appearance of the objects. It is what is "painted" onto the surface of the object geometry that you defined.
After defining these six things for your object, you can then add the Mesh to the Three.js scene and the RigidBody to the Cannon.js scene (it is important to do both!) and give them specified (x,y,z) positions.
Let's get started! >>> Part 1: The Physics