Mesh
Quick answer
Mesh pairs a BufferGeometry with a Material to form the most common renderable object in three.js. Swap geometry or material at runtime, enable castShadow and receiveShadow, and use clone() carefully because it shares geometry and material references by default. Pass a material array to render geometry groups with different materials per face set.
new THREE.Mesh ( geometry , material ) → Mesh
Key points
- geometry and material are public properties; replacing geometry does not dispose the old one.
- castShadow and receiveShadow decide participation in shadow map rendering.
- raycast() is invoked by Raycaster and returns intersection records for picking.
Example
const geometry = new THREE.BoxGeometry(1.2, 2.4, 1.2);
const material = new THREE.MeshStandardMaterial({
color: 0x4f9ef8,
roughness: 0.4,
metalness: 0.1
});
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(10, 1.2, -6);
mesh.rotation.y = Math.PI / 6;
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add(mesh);const mats = [
new THREE.MeshStandardMaterial({ color: 0xb9c3cc }),
new THREE.MeshPhysicalMaterial({ color: 0x9fd8ff, roughness: 0.1, metalness: 0 })
];
const mesh = new THREE.Mesh(geometry, mats);
// 每个分组一次绘制调用,材质越多,调用数越高
Notes
- clone() copies references, so editing the cloned mesh's material also changes the original.
- Replacing geometry repeatedly leaks GPU buffers unless the previous one is disposed.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Mesh. https://www.jingweizhi.com/en/three/api/mesh.html (accessed 2026-11-03).