Using CanvasTexture in Three.js: Dynamic 2D Drawing in a 3D Scene

In Three.js, textures typically come from image files, but sometimes you need dynamic, real-time content—like text, graphs, UI panels, or generated visuals. This is where CanvasTexture shines.

In this article, we’ll explore:

• What CanvasTexture is
• How to create and update it
• Practical use cases like labels, HUDs, charts, or dropdowns

What Is CanvasTexture?

THREE.CanvasTexture allows you to draw on an HTML <canvas> using the 2D context (CanvasRenderingContext2D) and use that as a texture on a material in your Three.js scene. It’s like painting your own image on the fly.

How to Use CanvasTexture

1. Create a Canvas and Draw on It

const canvas = document.createElement('canvas');
canvas.width = 256;
canvas.height = 256;
const ctx = canvas.getContext('2d');

// Draw background
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// Draw text
ctx.fillStyle = 'black';
ctx.font = '24px sans-serif';
ctx.fillText('Hello, CanvasTexture!', 20, 130);

2. Convert It to a Texture

const texture = new THREE.CanvasTexture(canvas);

3. Use It in a Material

const material = new THREE.MeshBasicMaterial({ map: texture });
const geometry = new THREE.PlaneGeometry(2, 2);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Updating the Canvas in Real-Time

Because you’re working with a real <canvas>, you can change the texture anytime.

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillText('Updated Text!', 20, 130);
texture.needsUpdate = true;

This is great for dynamic content: timers, scores, messages, or live charts.

Use Cases

1. In-Scene Labels or Panels

Display readable text that updates dynamically.

2. Custom HUDs or UI

Simulate dropdowns, sliders, or buttons inside your 3D scene—without HTML/CSS overlays.

3. Data Visualizations

Draw charts or graphs and place them in the scene like a 3D info panel.

4. Image Composition

Combine text and images on the canvas and render it as a 3D surface.

Tips for Better Results

• Set texture.minFilter = THREE.LinearFilter to improve text rendering.
• Use power-of-two canvas sizes (e.g., 256×256) for best performance.
• Set transparent: true in your material if your canvas has transparency.
• Group your text-drawing code into functions for reuse.

Full Example

const canvas = document.createElement('canvas');
canvas.width = 512;
canvas.height = 256;
const ctx = canvas.getContext('2d');

ctx.fillStyle = '#222';
ctx.fillRect(0, 0, 512, 256);
ctx.fillStyle = '#fff';
ctx.font = '30px sans-serif';
ctx.fillText('CanvasTexture Rocks!', 20, 130);

const texture = new THREE.CanvasTexture(canvas);
const material = new THREE.MeshBasicMaterial({ map: texture });
const geometry = new THREE.PlaneGeometry(4, 2);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Conclusion

CanvasTexture is one of Three.js’s most versatile tools for blending 2D logic into 3D environments. Whether you’re building an immersive UI, displaying real-time data, or embedding interactive elements, CanvasTexture bridges the gap between dynamic content and 3D rendering.