Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Changing three.js background to transparent or another color in HTML
In three.js, you can customize the background of your scene by making it transparent or setting it to a specific color. This is achieved through the WebGLRenderer configuration and the setClearColor method.
Syntax
Following is the syntax for creating a transparent background −
var renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setClearColor(0x000000, 0);
Following is the syntax for setting a background color −
renderer.setClearColor(colorHex, alpha);
Parameters
The setClearColor method accepts the following parameters −
- colorHex − A hexadecimal color value (e.g., 0xff0000 for red)
- alpha − Opacity value between 0 (transparent) and 1 (opaque). Default is 1
The WebGLRenderer constructor accepts an options object with the alpha property set to true to enable transparency support.
Creating a Transparent Background
To create a transparent background, you need to enable alpha support in the renderer and set the clear color alpha to 0.
Example
<!DOCTYPE html>
<html>
<head>
<title>Three.js Transparent Background</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body style="margin: 0; font-family: Arial, sans-serif; background: linear-gradient(45deg, #ff6b6b, #4ecdc4);">
<div id="container" style="width: 100%; height: 400px;"></div>
<p style="text-align: center; margin-top: 10px;">Rotating cube with transparent background</p>
<script>
// Create scene
var scene = new THREE.Scene();
// Create camera
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / 400, 0.1, 1000);
// Create renderer with alpha support
var renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, 400);
renderer.setClearColor(0x000000, 0); // Transparent background
document.getElementById('container').appendChild(renderer.domElement);
// Create a cube
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
// Animation loop
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
The output shows a rotating green cube with the page's gradient background visible through the transparent three.js canvas −
[Rotating green cube floating over a gradient background] Rotating cube with transparent background
Setting a Solid Background Color
To set a solid background color, use the setClearColor method with a hexadecimal color value and full opacity.
Example
<!DOCTYPE html>
<html>
<head>
<title>Three.js Colored Background</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body style="margin: 0; font-family: Arial, sans-serif; background-color: #f0f0f0;">
<div id="container" style="width: 100%; height: 400px;"></div>
<p style="text-align: center; margin-top: 10px;">Rotating cube with blue background</p>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / 400, 0.1, 1000);
// Create renderer with colored background
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, 400);
renderer.setClearColor(0x4a90e2, 1); // Blue background, full opacity
document.getElementById('container').appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0xff6b6b });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
The output displays a rotating red cube against a solid blue background −
[Rotating red cube against solid blue background] Rotating cube with blue background
Semi-Transparent Background
You can also create a semi-transparent background by setting the alpha value between 0 and 1.
Example
<!DOCTYPE html>
<html>
<head>
<title>Three.js Semi-Transparent Background</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body style="margin: 0; font-family: Arial, sans-serif; background: radial-gradient(circle, #ff9a9e, #fad0c4);">
<div id="container" style="width: 100%; height: 400px;"></div>
<p style="text-align: center; margin-top: 10px;">Cube with semi-transparent black overlay</p>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / 400, 0.1, 1000);
// Create renderer with alpha support and semi-transparent background
var renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, 400);
renderer.setClearColor(0x000000, 0.3); // Semi-transparent black overlay
document.getElementById('container').appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
The output shows a yellow cube with a semi-transparent black overlay, allowing the page background to show through partially −
[Yellow cube with darkened semi-transparent overlay over gradient background] Cube with semi-transparent black overlay
Common Background Colors
Here are some commonly used background colors in three.js applications −
| Color Name | Hex Value | Usage |
|---|---|---|
| White | 0xffffff | Clean, minimalist designs |
| Black | 0x000000 | Space scenes, dark themes |
| Sky Blue | 0x87ceeb | Outdoor scenes, sky simulation |
| Dark Gray | 0x333333 | Professional applications |
| Transparent | 0x000000, 0 | Overlay effects, web integration |
Conclusion
To create a transparent background in three.js, enable alpha support with { alpha: true } in the WebGLRenderer constructor and set setClearColor(0x000000, 0). For solid colors, use setClearColor(hexColor, 1), and for semi-transparent effects, adjust the alpha value between 0 and 1. This flexibility allows seamless integration of 3D content with web page designs.
2K+ Views
