Three.js Sphere Texture Mapping

Three.js sphere with UV texture mapping using procedural checkerboard CanvasTexture. Demonstrates texture wrapping, anisotropy, and material mapping.

What this code does

- Three.js Sphere Geometry: SphereGeometry with proper UV coordinates for seamless texture mapping across curved surfaces.
- Canvas Texture Generation: procedural checkerboard pattern created with HTML5 Canvas and uploaded as THREE.CanvasTexture.
- Texture Wrapping: RepeatWrapping and anisotropic filtering improve texture sampling quality at glancing angles.
- Sphere Material Mapping: MeshStandardMaterial applies texture as albedo map with realistic lighting and shading effects.

JavaScript (plain)

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)
camera.position.z = 3
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(width, height)

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

// Create checker texture
const texCanvas = document.createElement('canvas')
texCanvas.width = texCanvas.height = 256
const ctx = texCanvas.getContext('2d')
for (let y = 0; y < 256; y += 32) {
  for (let x = 0; x < 256; x += 32) {
    const toggle = ((x / 32) + (y / 32)) % 2
    ctx.fillStyle = toggle ? '#9bdc6e' : '#222'
    ctx.fillRect(x, y, 32, 32)
  }
}
const texture = new THREE.CanvasTexture(texCanvas)
const sphere = new THREE.Mesh(
  new THREE.SphereGeometry(1, 64, 64),
  new THREE.MeshStandardMaterial({ map: texture })
)
scene.add(sphere)

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

← Back