Three.js Materials

1. MeshBasicMaterial

A basic material without lighting effects.

Three.js Example

const material = new THREE.MeshBasicMaterial({ 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 MeshBasicMaterial() {
  return (
    <mesh>
      <torusKnotGeometry args={[1, 0.3, 100, 16]} />
      <meshBasicMaterial color="blue" />
    </mesh>
  );
}

basic

2. LineBasicMaterial

Creates a simple colored line material.

Three.js Example

const material = new THREE.LineBasicMaterial({ color: 0xff0000 });
const geometry = new THREE.TorusKnotGeometry(1, 0.3, 100, 16);
const line = new THREE.Line(geometry, material);
scene.add(line);

React-Three-Fiber Example

function LineBasicMaterial() {
  return (
    <line>
      <torusKnotGeometry args={[1, 0.3, 100, 16]} />
      <lineBasicMaterial color="red" />
    </line>
  );
}

line basic

3. LineDashedMaterial

Creates a dashed line effect.

Three.js Example

const material = new THREE.LineDashedMaterial({ color: 0x00ff00, dashSize: 0.2, gapSize: 0.1 });
const geometry = new THREE.TorusKnotGeometry(1, 0.3, 100, 16);
const line = new THREE.LineSegments(geometry, material);
line.computeLineDistances();
scene.add(line);

React-Three-Fiber Example

function LineDashedMaterial() {
  const geometry = useMemo(() => {
    const torusKnot = new THREE.TorusKnotGeometry(1, 0.3, 100, 16)
    const edges = new THREE.EdgesGeometry(torusKnot)
    return edges
  }, [])

  return (
    <line 
      geometry={geometry} 
      onUpdate={v => v.computeLineDistances()} // must call it 
    >
      <lineDashedMaterial
        color="red" 
        linewidth // Due to limitations in WebGL, linewidth is almost always rendered at 1 regardless of the value you set.
      />
    </line>
  )
}

The modern solution in Three.js is to use a different set of "fat line" utilities (Line2, LineMaterial, LineGeometry). In the react-three-fiber ecosystem, this is made very simple with the Line component from @react-three/drei.

import { Line } from "@react-three/drei"

function LineDashedMaterial() {
  const points = useMemo(() => {
    const torusKnot = new THREE.TorusKnotGeometry(10, 3, 100, 16)
    const edges = new THREE.EdgesGeometry(torusKnot)
    const positions = edges.attributes.position.array

    const pts: THREE.Vector3[] = []
    for (let i = 0; i < positions.length; i += 3) {
      pts.push(new THREE.Vector3(
        positions[i],
        positions[i + 1],
        positions[i + 2]
      ))
    }
    return pts
  }, [])

  return (
   <Line 
    points={points}                 // Array of points, Array<Vector3 | Vector2 | [number, number, number] | [number, number] | number>
    color="black"                   // Default
    lineWidth={1}                   // In pixels (default)
    segments                        // If true, renders a THREE.LineSegments2. Otherwise, renders a THREE.Line2
    dashed={false}                  // Default
    vertexColors={[[0, 0, 0], ...]} // Optional array of RGB values for each point
    {...lineProps}                  // All THREE.Line2 props are valid
    {...materialProps}              // All THREE.LineMaterial props are valid
   />
  )
}

line dashed

4. MeshStandardMaterial

A physically-based material affected by lighting.

Three.js Example

const material = new THREE.MeshStandardMaterial({ color: 0xffa500 });
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 MeshStandardMaterial() {
  return (
    <mesh>
      <torusKnotGeometry args={[1, 0.3, 100, 16]} />
      <meshStandardMaterial color="orange" />
    </mesh>
  );
}

standard

5. MeshDepthMaterial

Renders depth values to create effects like fog and shadows.

Three.js Example

const material = new THREE.MeshDepthMaterial();
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 MeshDepthMaterial() {
  return (
    <mesh>
      <torusKnotGeometry args={[1, 0.3, 100, 16]} />
      <meshDepthMaterial />
    </mesh>
  );
}

depth

6. MeshDistanceMaterial

Useful for shadow calculations and custom effects.

Three.js Example

const material = new THREE.MeshDistanceMaterial();
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 MeshDistanceMaterial() {
  return (
    <mesh>
      <torusKnotGeometry args={[1, 0.3, 100, 16]} />
      <meshDistanceMaterial />
    </mesh>
  );
}

7. MeshLambertMaterial

A non-shiny material affected by lights.

Three.js Example

const material = new THREE.MeshLambertMaterial({ color: 0x44aa88 });
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 MeshLambertMaterial() {
  return (
    <mesh>
      <torusKnotGeometry args={[1, 0.3, 100, 16]} />
      <meshLambertMaterial color="teal" />
      <ambientLight intensity={0.5} />
      <pointLight position={[2, 2, 2]} />
    </mesh>
  );
}

lambert

8. MeshMatcapMaterial

Uses a matcap texture for a unique shading effect.

Three.js Example

const textureLoader = new THREE.TextureLoader();
const matcap = textureLoader.load('path/to/matcap.png');
const material = new THREE.MeshMatcapMaterial({ matcap });
const geometry = new THREE.TorusGeometry(1, 0.4, 16, 100);
const torus = new THREE.Mesh(geometry, material);
scene.add(torus);

React-Three-Fiber Example

import { TextureLoader } from 'three';
import { useLoader } from '@react-three/fiber';

function MeshMatcapMaterial() {
  const matcap = useLoader(TextureLoader, 'path/to/matcap.png');
  return (
    <mesh>
      <torusGeometry args={[1, 0.4, 16, 100]} />
      <meshMatcapMaterial matcap={matcap} />
    </mesh>
  );
}

matcap

9. MeshNormalMaterial

Displays colors based on surface normals.

Three.js Example

const material = new THREE.MeshNormalMaterial();
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 MeshNormalMaterial() {
  return (
    <mesh>
      <torusKnotGeometry args={[1, 0.3, 100, 16]} />
      <meshNormalMaterial />
    </mesh>
  );
}

normal

10. MeshPhongMaterial

Shiny material with specular highlights.

Three.js Example

const material = new THREE.MeshPhongMaterial({ color: 0xff0000, shininess: 100 });
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 MeshPhongMaterial() {
  return (
    <mesh>
      <torusKnotGeometry args={[1, 0.3, 100, 16]} />
      <meshPhongMaterial color="red" shininess={100} />
      <ambientLight intensity={0.5} />
      <pointLight position={[2, 2, 2]} />
    </mesh>
  );
}

phong