PROWAREtech
ThreeJS: Transparent Background
How to make the THREE.js canvas background transparent so that the HTML/CSS behind it can be seen.
All that needs to be done is setting the renderer alpha property to true and not to set a background.
var renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: true,
alpha: true // NOTE: only this is important for a clear background!!!
});
Here is a full working example that shows the <BODY> element's linear gradient background that's behind the canvas:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transparency</title>
<style>
body {
background-image: linear-gradient(yellow,red);
height: 100vh;
padding: 0;
margin: 0;
}
h1 {
padding: 25px 0 0 25px;
color: red;
position: absolute;
}
canvas {
position: fixed;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<h1>THIS IS BEHIND THE CANVAS!!!</h1>
<canvas></canvas>
<script src="/js/three.min.js"></script>
<script type="text/javascript">
(function () {
var createCubeGrid = function (gridSize, cubeSize, gap) {
var x = 0, y = 0, z = 0, rows, cols, colors = [
new THREE.MeshStandardMaterial({ color: 0x666666, roughness: 0.5, metalness: 0.5 }),
new THREE.MeshStandardMaterial({ color: 0x999999, roughness: 0.5, metalness: 0.5 }),
new THREE.MeshStandardMaterial({ color: 0xCCCCCC, roughness: 0.5, metalness: 0.5 })
], group = new THREE.Group();
gap = Math.abs(gap);
gridSize = Math.pow(gridSize, 1 / 3);
if (gridSize % 1 != 0) {
gridSize = Math.round(gridSize);
}
rows = cols = gridSize;
for (var row = 0; row < rows; row++) {
for (var col = 0; col < cols; col++) {
for (var depth = 0; depth < rows; depth++) {
var position = cubeSize / 2 * rows / 2 + gap;
x = position * row;
y = position * col;
z = position * depth;
var num = (row + col + depth) % 3;
var mesh = new THREE.Mesh(new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize), colors[num]);
mesh.receiveShadow = mesh.castShadow = true;
mesh.position.set(x, y, z);
group.add(mesh);
}
}
}
group.position.set(x / -2, y / -2, z / -2);
var grid = new THREE.Group();
grid.add(group);
return grid;
};
var canvas = document.getElementsByTagName("canvas")[0];
// NOTE: create the scene to place objects in
var scene = new THREE.Scene();
//scene.background = null; // NOTE: required on some older versions of THREE.js
scene.matrixWorldAutoUpdate = true;
// NOTE: the width and height of the canvas
var size = {
width: canvas.offsetWidth,
height: canvas.offsetHeight
};
var cameraNear = 1, cameraFar = 500;
var camera = new THREE.PerspectiveCamera(75, size.width / size.height, cameraNear, cameraFar);
// NOTE: position the camera in space a bit
camera.position.z = 5;
var renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: true,
alpha: true // NOTE: only this is important for a clear background!!!
});
//renderer.setClearColor( 0x000000, 0.5 ); // NOTE: last parameter is the opacity value (0.0 - 1.0)
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(size.width, size.height);
renderer.render(scene, camera);
var light = new THREE.DirectionalLight(0xffffff, 1.5);
light.position.set(2, 2, 2);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, .3));
var grid = createCubeGrid(3*3*3, 1, 0.5);
scene.add(grid);
var frame = Math.PI / 192;
var animate = function () {
grid.rotation.x += frame;
grid.rotation.y += frame;
renderer.render(scene, camera);
requestAnimationFrame(animate);
};
animate();
})();
</script>
</body>
</html>
Comment
