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.


The geometry,🔗

The texture,🔗