Three.js Demos
Three.js Demos

Three.js Sphere Texture Mapping Demo

Detailed Three.js sphere texture mapping demo using UV coordinates and procedural CanvasTexture generation. Shows texture wrapping modes, anisotropic filtering, and realistic material response on curved geometry.

Key topics: three.js sphere, sphere three js, three js sphere, texture mapping, canvas texture, UV mapping, sphere geometry three js

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.

Related Demos

Continue Learning

Browse Three.js Tutorials

JavaScript Implementation

ES6+ 
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)

function animate () {
  requestAnimationFrame(animate)
  sphere.rotation.y += 0.01
  renderer.render(scene, camera)
}
animate()
← Back