Basic
Object 3D
The most common things you will do with an Object3D:
-
Rotation: number
-
Position: number
-
Scale: number
-
Visibility: boolean
const cube: THREE.Mesh = new THREE.Mesh(geometry, material);
// cube.rotation
// cube.position
// cube.scale
// cube.visible
Three.js applies Transformation matrix on original object. That means original geometry of the object is NOT changed.
If we want to create a new geometry of the object:
const newGeometry = new THREE.BoxGeometry();
cube.geometry.dispose(); // clear the old geometry in the memory
cube.geometry = newGeometry;
As you can see, 3D object has 2 parts: Geometry and Material.
Geometry
It defines the shape of object, like Box, Cylinder, Text, etc.
Three.js always, first, create a Buffer Geometry, which improves the performance.
Material
There are some props for material
-
transparent: boolean
-
opacity: number, it works when transparent === true
-
depthTest: boolean, whether ignore the distance between camera and object. Default is true (not ignored).
-
depthWrite: boolean, When drawing 2D overlays it can be useful to disable the depth writing in order to layer several things together without creating z-index artifacts.
-
visible: boolean
-
side: 1 | 2 | 3, set Front side, Back side or Double side visible
When the material needs to be update, set the flag needsUpdate
to true. It tells WebGL re-render the object.