Materials Gallery

Compare basic/lambert/phong/standard materials on spheres.

What this code does

- MeshBasicMaterial: unlit green sphere, ignores all lighting.
- MeshLambertMaterial: blue sphere with diffuse lighting only.
- MeshPhongMaterial: orange sphere with diffuse + specular highlights.
- MeshStandardMaterial: PBR white sphere with metalness and roughness.
- Lighting Setup: ambient light for fill + directional light for shading.
- Animation: group rotation shows how each material responds to light changes.

JavaScript (plain)

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(60, width / height, 0.1, 1000)
camera.position.set(3, 2, 5)

const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(width, height)

document.querySelector('#app').appendChild(renderer.domElement)

const controls = new OrbitControls(camera, renderer.domElement)

const geo = new THREE.SphereGeometry(0.6, 48, 48)
const group = new THREE.Group()
const mats = [
  new THREE.MeshBasicMaterial({ color: 0x9bdc6e }),
  new THREE.MeshLambertMaterial({ color: 0x00aaff }),
  new THREE.MeshPhongMaterial({ color: 0xff8844, shininess: 80 }),
  new THREE.MeshStandardMaterial({
    color: 0xffffff,
    metalness: 0.6,
    roughness: 0.2
  })
]
mats.forEach((m, i) => {
  const mesh = new THREE.Mesh(geo, m)
  mesh.position.x = (i - (mats.length - 1) / 2) * 1.8
  group.add(mesh)
})
scene.add(group)

const ambient = new THREE.AmbientLight(0xffffff, 0.4)
scene.add(ambient)

const dir = new THREE.DirectionalLight(0xffffff, 1)
dir.position.set(2, 3, 2)
scene.add(dir)

function animate() {
  requestAnimationFrame(animate)
  group.rotation.y += 0.01
  controls.update()
  renderer.render(scene, camera)
}
animate()

← Back