These are the core building blocks which every Three.js app is comprised of.
The scene
,🔗
Houses all the 3D objects and cameras.
const scene = new THREE.Scene()
The camera
,🔗
Orientates the scene. Provides you a mechanism view 3D objects in any angle required.
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
The 3D object
,🔗
Also known as a mesh
. A mesh
is comprised of some geometry and a texture.
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ map: colorTexture });
const mesh = new THREE.Mesh(geometry, material);
The camera and 3D objects need to be added to the scene
.
scene.add(mesh)
scene.add(camera);