Three.js Materials

11. MeshPhysicalMaterial

Extended version of MeshStandardMaterial with advanced properties.

Three.js Example

const material = new THREE.MeshPhysicalMaterial({ color: 0x00ff00, clearcoat: 1.0, clearcoatRoughness: 0.1 });
const geometry = new THREE.TorusKnotGeometry(1, 0.3, 100, 16);
const torusKnot = new THREE.Mesh(geometry, material);
scene.add(torusKnot);

React-Three-Fiber Example

function MeshPhysicalMaterial() {
  return (
    <mesh>
      <torusKnotGeometry args={[1, 0.3, 100, 16]} />
      <meshPhysicalMaterial color="green" clearcoat={1.0} clearcoatRoughness={0.1} />
      <ambientLight intensity={0.5} />
    </mesh>
  );
}

physical

12. MeshToonMaterial

Creates a cartoon-style shading effect.

Three.js Example

const material = new THREE.MeshToonMaterial({ color: 0x0000ff });
const geometry = new THREE.TorusKnotGeometry(1, 0.3, 100, 16);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

React-Three-Fiber Example

function MeshToonMaterial() {
  return (
    <mesh>
      <torusKnotGeometry args={[1, 0.3, 100, 16]} />
      <meshToonMaterial color="blue" />
    </mesh>
  );
}

toon

13. PointsMaterial

Used for rendering points instead of meshes.

Three.js Example

const material = new THREE.PointsMaterial({ color: 0xff00ff, size: 0.1 });
const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array([0, 0, 0, 1, 1, 1, -1, -1, -1]);
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
const points = new THREE.Points(geometry, material);
scene.add(points);

React-Three-Fiber Example

function PointsMaterial() {
  return (
    <points>
      <bufferGeometry>
        <bufferAttribute attach="attributes-position" array={new Float32Array([0, 0, 0, 1, 1, 1, -1, -1, -1])} count={3} itemSize={3} />
      </bufferGeometry>
      <pointsMaterial color="magenta" size={0.1} />
    </points>
  );
}

points