Sphere Texture
UV-mapped sphere using a procedural checkerboard CanvasTexture.
What this code does
- A canvas is painted with a checkerboard and uploaded as a THREE.CanvasTexture.
- Repeat wrapping and anisotropy improve sampling at glancing angles.
- MeshStandardMaterial uses the map for albedo; light adds depth.
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)