Mesh = Geometry + Material

import * as THREE from 'three';

// Geometries — built-in primitives cover most needs
const box      = new THREE.BoxGeometry(1, 1, 1);
const sphere   = new THREE.SphereGeometry(0.6, 32, 16);
const plane    = new THREE.PlaneGeometry(2, 2);
const cylinder = new THREE.CylinderGeometry(0.5, 0.5, 1, 32);
const torus    = new THREE.TorusGeometry(0.6, 0.2, 16, 64);

// Materials — pick by what you need
//   MeshBasicMaterial      — flat colour, no lights (great for UI gizmos)
//   MeshLambertMaterial    — matte, cheap, lit
//   MeshPhongMaterial      — shiny highlights, cheap
//   MeshStandardMaterial   — PBR — modern default for realistic surfaces
//   MeshPhysicalMaterial   — PBR + clearcoat, sheen, transmission

const material = new THREE.MeshStandardMaterial({
    color:     0x04AA6D,
    metalness: 0.2,
    roughness: 0.4,
});

const mesh = new THREE.Mesh(box, material);
scene.add(mesh);

// Instancing — same mesh × thousands of copies with one draw call
const inst = new THREE.InstancedMesh(box, material, 10_000);
const m = new THREE.Matrix4();
for (let i = 0; i < 10_000; i++) {
    m.setPosition(Math.random()*20-10, Math.random()*20-10, Math.random()*20-10);
    inst.setMatrixAt(i, m);
}
scene.add(inst);

const geo = new THREE.BoxGeometry(1, 1, 1);
const mat = new THREE.MeshStandardMaterial({ color: 0x04aa6d });
const mesh = new THREE.Mesh(geo, mat);