51. Three.js案例-创建透明立方体
实现效果
本案例展示了如何使用Three.js创建两个具有不同透明度的立方体，并将其渲染到网页中。通过调整相机位置和设置场景，用户可以观察到这两个立方体在三维空间中的相对位置和透明效果。
知识点
WebGLRenderer（WebGL渲染器）
WebGLRenderer是Three.js中最常用的渲染器之一，用于将场景渲染为WebGL内容。它支持抗锯齿等高级特性。
构造器
new THREE.WebGLRenderer(parameters)
| 参数 | 类型 | 描述 |
|---|---|---|
| parameters | Object | 渲染器参数配置对象 |
常用参数包括：
antialias：布尔值，是否开启抗锯齿，默认为false。alpha：布尔值，是否允许透明背景，默认为false。premultipliedAlpha：布尔值，是否使用预乘Alpha通道，默认为true。preserveDrawingBuffer：布尔值，是否保存绘图缓冲区，默认为false。depth：布尔值，是否创建深度缓冲区，默认为true。stencil：布尔值，是否创建模板缓冲区，默认为true。maxAnisotropy：整数，最大各向异性级别，默认为1。failIfMajorPerformanceCaveat：布尔值，如果性能不佳则失败，默认为false。
PerspectiveCamera（透视相机）
PerspectiveCamera用于模拟人眼视角，提供真实的透视效果。
构造器
new THREE.PerspectiveCamera(fov, aspect, near, far)
| 参数 | 类型 | 描述 |
|---|---|---|
| fov | Float | 视野角度（Field of View），以度为单位 |
| aspect | Float | 宽高比 |
| near | Float | 近裁剪面距离 |
| far | Float | 远裁剪面距离 |
Scene（场景）
Scene是所有物体、光源、相机等元素的容器。
方法
add(object)：添加一个对象到场景中。remove(object)：从场景中移除一个对象。
AmbientLight（环境光）
AmbientLight是一种均匀照亮整个场景的光源，不考虑方向或距离。
构造器
new THREE.AmbientLight(color, intensity)
| 参数 | 类型 | 描述 |
|---|---|---|
| color | Color | 光的颜色 |
| intensity | Float | 光的强度，默认为1 |
BoxGeometry（立方体几何体）
BoxGeometry用于创建立方体或长方体。
构造器
new THREE.BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)
| 参数 | 类型 | 描述 |
|---|---|---|
| width | Float | 立方体宽度，默认为1 |
| height | Float | 立方体高度，默认为1 |
| depth | Float | 立方体深度，默认为1 |
| widthSegments | Integer | 宽度分割段数，默认为1 |
| heightSegments | Integer | 高度分割段数，默认为1 |
| depthSegments | Integer | 深度分割段数，默认为1 |
MeshNormalMaterial（网格法线材质）
MeshNormalMaterial根据网格的法线方向计算颜色，常用于调试。
构造器
new THREE.MeshNormalMaterial(parameters)
| 参数 | 类型 | 描述 |
|---|---|---|
| parameters | Object | 材质参数配置对象 |
常用参数包括：
color：材质颜色，默认为0xaaaaaa。wireframe：布尔值，是否显示线框模式，默认为false。flatShading：布尔值，是否启用平面着色，默认为false。opacity：浮点数，透明度，默认为1.0。transparent：布尔值，是否启用透明，默认为false。
Vector3（三维向量）
Vector3表示三维空间中的一个点或向量。
构造器
new THREE.Vector3(x, y, z)
| 参数 | 类型 | 描述 |
|---|---|---|
| x | Float | X轴坐标，默认为0 |
| y | Float | Y轴坐标，默认为0 |
| z | Float | Z轴坐标，默认为0 |
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="ThreeJS/three.js"></script>
<script src="ThreeJS/jquery.js"></script>
</head>
<body>
<center id="myContainer"></center>
<script>
// 创建渲染器
var myRenderer = new THREE.WebGLRenderer({antialias: true});
myRenderer.setSize(window.innerWidth, window.innerHeight);
myRenderer.setClearColor('white', 1.0);
$("#myContainer").append(myRenderer.domElement);
// 创建相机
var myCamera = new THREE.PerspectiveCamera(45,
window.innerWidth / window.innerHeight, 30, 1000);
myCamera.position.set(-34.34, -40.56, 35.83);
myCamera.lookAt(new THREE.Vector3(0, 0, 0));
// 创建场景
var myScene = new THREE.Scene();
myScene.add(new THREE.AmbientLight('white'));
// 创建第一个立方体
var myGeometry1 = new THREE.BoxGeometry(6, 6, 6);
var myMaterial1 = new THREE.MeshNormalMaterial({
opacity: 0.19, transparent: true
});
var myMesh1 = new THREE.Mesh(myGeometry1, myMaterial1);
myMesh1.translateX(-20);
myScene.add(myMesh1);
// 创建第二个立方体
var myGeometry2 = new THREE.BoxGeometry(16, 16, 16);
var myMaterial2 = new THREE.MeshNormalMaterial({
opacity: 0.99, transparent: true
});
var myMesh2 = new THREE.Mesh(myGeometry2, myMaterial2);
myMesh2.translateX(10);
myScene.add(myMesh2);
// 渲染立方体
myRenderer.render(myScene, myCamera);
</script>
</body>
</html>