Three.js Demos A collection of Three.js Demos

Render Targets

Render to texture technique showing a spinning cube rendered to texture and applied to multiple objects.

What this code does

- WebGLRenderTarget: creates an off-screen framebuffer for rendering to texture instead of canvas.
- Two-Stage Rendering: first render spinning cube to texture, then render main scene using that texture.
- Texture Reuse: same render target texture applied to sphere, plane, and torus for demonstration.
- Real-time Updates: render target updates every frame showing live content on textured objects.
- Performance Technique: render targets enable mirror effects, security cameras, TV screens, and complex materials.
- Interactive Controls: adjust cube color, wireframe mode, auto-rotation, and render target resolution.

JavaScript (plain)

// Create render target for texture rendering
const renderTarget = new THREE.WebGLRenderTarget(512, 512)

// Scene for render target (spinning cube)
const rtScene = new THREE.Scene()
const rtCamera = new THREE.PerspectiveCamera(50, 1, 0.1, 1000)
rtCamera.position.z = 3

const cubeGeometry = new THREE.BoxGeometry(1, 1, 1)
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff88 })
const rtCube = new THREE.Mesh(cubeGeometry, cubeMaterial)
rtScene.add(rtCube)

// Main scene objects using render target as texture
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32)
const sphereMaterial = new THREE.MeshBasicMaterial({ map: renderTarget.texture })
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)
scene.add(sphere)

function animate() {
  // Render to texture first
  rtCube.rotation.x += 0.01
  rtCube.rotation.y += 0.01
  renderer.setRenderTarget(renderTarget)
  renderer.render(rtScene, rtCamera)

  // Render main scene to canvas
  renderer.setRenderTarget(null)
  renderer.render(scene, camera)
  requestAnimationFrame(animate)
}
animate()
← Back