PROWAREtech

articles » current » javascript » three-js » transparent-background

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>

This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE