Basics🔗

In three.js there are there basic core building blocks

A scene which will house all the 3D objects and cameras.

const scene = new THREE.Scene();

A camera which displays the 3D objects in any sort of angle required.

const camera = new THREE.PerspectiveCamera(
  75,
  sizes.width / sizes.height,
  0.1,
  100
);

A 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);

Things get a lot more interesting when we bring controls and animations into the mix. But this is the core of how three.js works.

Cameras🔗

2021-08-28 2021-08-30 2021-09-05 2021-09-09

Textures / Meshes🔗

2021-09-12 2021-09-30

Animations🔗

2021-08-29

Text🔗

2021-10-02

Lighting & Shadows🔗

2021-10-10 2021-10-12

Raycasting🔗

2021-11-08

Importing 3D models🔗

2022-11-18

Debugging🔗

2021-09-11

References🔗