实现 Three.js 场景的背景透明度
在将 Three.js 渲染的 3D 模型嵌入到 Web 页面中时，我们可能希望模型能够悬浮在页面之上，而不是被一个不透明的背景所遮挡。这可以通过设置 Three.js 渲染器的背景透明度来实现。
将 Three.js Canvas 集成到 Web 页面
首先，确保您的 HTML 页面中有一个元素，比如一个div，用来放置 Three.js 的渲染画布。
html
<div id="webgl-canvas"></div>然后，在 JavaScript 中获取这个元素，并将 Three.js 渲染器的 DOM 元素添加进去。
javascript
const container = document.getElementById("webgl-canvas");
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);配置渲染器以支持透明度
Three.js 的WebGLRenderer提供了一个alpha属性，当设置为true时，允许渲染器的背景和颜色缓冲区透明。
javascript
renderer = new THREE.WebGLRenderer({
alpha: true, // 允许透明度
});设置背景透明度
使用setClearColor和setClearAlpha方法可以进一步控制背景的颜色和透明度。
javascript
// 设置背景颜色和透明度
renderer.setClearColor(0x000000, 0.0); // 黑色背景，完全透明
// 或者，设置一个半透明的背景
renderer.setClearColor(0x000000, 0.5);完整示例：创建一个带有透明背景的 3D 场景
以下示例展示了如何创建一个简单的 Three.js 场景，该场景具有透明的背景，使得 3D 模型看起来像是悬浮在页面上。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Three.js Transparent Background Example</title>
<style>
body {
margin: 0;
overflow: hidden;
}
#webgl-canvas {
width: 100%;
height: 100vh;
display: block;
}
</style>
</head>
<body>
<div id="webgl-canvas"></div>
<script type="importmap">
{
"imports": {
"three": "https://threejs.org/build/three.module.js",
"three/addons/": "https://threejs.org/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from "three";
const container = document.getElementById("webgl-canvas");
const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.position.set(0, 0, 5);
// 创建一个立方体几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 使用材质，这里使用基本的网格材质
const material = new THREE.MeshPhongMaterial({
color: 0xff0000,
transparent: true,
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 配置渲染器背景透明度
renderer.setClearColor(0x000000, 0.0); // 黑色背景，完全透明
// 动画循环
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>这个示例创建了一个红色的半透明立方体，它在一个完全透明的背景上旋转。您可以根据需要调整立方体的材质属性和其他场景设置。
通过上述步骤和示例代码，您可以实现 Three.js 场景的背景透明度，为 Web 页面上的 3D 模型提供更加沉浸和动态的视觉效果。