极客教程如何在HTML中使用three.js更改背景颜色或设置为透明
参考： Changing three.js background to transparent or another color in HTML
Three.js 是一个基于 WebGL 的 JavaScript 库，它使得在网页上创建和显示 3D 图形变得简单。在使用 three.js 开发3D场景时，经常需要调整场景的背景颜色或使其透明，以更好地融合网页的整体设计。本文将详细介绍如何在HTML中使用three.js更改背景颜色或设置为透明，并提供多个示例代码。
1. 创建基本的Three.js场景
在介绍如何更改背景之前，我们首先需要创建一个基本的Three.js场景。以下是创建一个包含简单立方体的基本场景的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js Basic Scene - how2html.com</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
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;
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
Output:
2. 更改背景颜色
要更改Three.js场景的背景颜色，可以使用scene.background属性。这个属性接受一个THREE.Color对象作为参数，用于设置背景颜色。
示例1：设置背景为红色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js Change Background Color - how2html.com</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
var scene = new THREE.Scene();
scene.background = new THREE.Color(0xff0000); // 设置背景颜色为红色
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
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;
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
Output:
示例2：设置背景为蓝色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js Blue Background - how2html.com</title>
<style>
body { margin: 0; }
canvas { display:block; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
var scene = new THREE.Scene();
scene.background = new THREE.Color(0x0000ff); // 设置背景颜色为蓝色
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
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;
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
Output:
3. 设置背景透明
在某些情况下，我们可能希望Three.js的背景是透明的，这样背景就可以显示HTML页面的其他部分。要实现这一点，我们需要在创建THREE.WebGLRenderer时设置alpha选项为true，并且不设置scene.background。
示例3：背景透明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js Transparent Background - how2html.com</title>
<style>
body { margin: 0; background: url('background.jpg'); }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer({ alpha: true }); // 设置alpha为true使背景透明
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
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;
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
Output:
以上是在HTML中使用Three.js更改背景颜色或设置为透明的方法和示例。通过调整scene.background和renderer的参数，可以轻松实现不同的背景效果，以适应不同的设计需求。