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>

PROWAREtech

Hello there! How can I help you today?
Ask any question

PROWAREtech

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