1. 介绍
Three.js是一种用于处理3D图形的JavaScript库。它可以创建，渲染和控制3D对象，并且可以轻松地将它们嵌入到web页面中。在three.js中提供了一个场景（Scene）对象，场景对象可用于将3D物体放置在其中，也可以修改背景颜色。
2. 修改背景颜色
在three.js中，可以使用Scene对象的背景属性（background）来更改背景颜色。默认情况下，背景颜色为黑色。可以将其更改为其他颜色或设置为透明背景。
2.1 设置背景颜色
要将场景的背景颜色设置为不同颜色，可以使用以下代码：
scene.background = new THREE.Color(0x00ff00);
其中，Color对象用于表示颜色，并且需要使用RGB值定义颜色。在本例中，我们使用0x00ff00作为颜色。可以根据需要更改此值，以使用所需的颜色。
2.2 设置透明度
如果要使用透明背景，可以使用以下代码：
scene.background = new THREE.Color(0xffffff);
scene.background.setAlpha(0);
首先，我们指定白色作为背景颜色。然后我们使用setAlpha()函数将透明度设置为0。这将为场景创建透明背景。
另外，如果希望背景颜色的透明度略高，可以修改alpha值：
scene.background = new THREE.Color(0xffffff);
scene.background.setHex(0x000000);
scene.background.setHSL(0, 0, 0.9);
scene.background.setRGB(0.6, 0.6, 0.6);
scene.background.setHSL(0.1, 1, 0.75);
上述代码中展示了如何通过其他方式控制场景背景的透明度（从十六进制、HSL和RGB颜色空间中指定颜色）。通过设置透明度的不同级别进行尝试，可以根据您的需求自定义场景。
3. 示例
下面是一个完整示例代码，展示如何将场景背景设置为半透明（setAlpha(0.6)）黄色（new THREE.Color("rgb(255, 255, 100)")）：
<!DOCTYPE html>
<html>
<head>
<title>Set the Background Color of a Scene with Three.js</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100%; }
</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;
scene.background = new THREE.Color("rgb(255, 255, 100)");
scene.background.setAlpha(0.6);
var animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
</script>
</body>
</html>
根据设置的半透明黄色，可以看到场景的背景。使用setAlpha()函数使其部分透明。运行上述代码可以在浏览器中看到这个带有不同背景颜色和透明度的3D场景。
4. 结论
在three.js中，可以使用Scene对象的背景属性来更改背景颜色。可以使用Color对象来定义颜色，并使用场景对象的background属性设置背景颜色。可以使用透明色来创建透明背景。可以使用setAlpha()函数设置背景的透明度。