57. Three.js案例-创建一个带有聚光灯和旋转立方体的3D场景
实现效果
该案例实现了使用Three.js创建一个带有聚光灯和旋转立方体的3D场景。
知识点
WebGLRenderer（WebGL渲染器）
THREE.WebGLRenderer 是 Three.js 中用于将场景渲染为 WebGL 内容的核心类。它支持抗锯齿等高级特性。
构造器
new THREE.WebGLRenderer(parameters)
| 参数 | 类型 | 描述 |
|---|---|---|
| parameters | Object | 渲染器参数对象，包含 antialias、alpha 等属性 |
antialias: 布尔值，是否开启抗锯齿，默认为false。
Scene（场景）
THREE.Scene 代表一个3D场景，所有物体都必须添加到场景中才能被渲染。
方法
add(object): 将物体添加到场景中。background: 设置场景的背景颜色或环境贴图。
PerspectiveCamera（透视相机）
THREE.PerspectiveCamera 定义了一个透视投影相机，用于模拟人眼观察世界的方式。
构造器
new THREE.PerspectiveCamera(fov, aspect, near, far)
| 参数 | 类型 | 描述 |
|---|---|---|
| fov | Number | 视野角度（Field of View），以度为单位 |
| aspect | Number | 宽高比 |
| near | Number | 近裁剪面距离 |
| far | Number | 远裁剪面距离 |
方法
position.set(x, y, z): 设置相机位置。lookAt(vector): 设置相机朝向目标点。updateProjectionMatrix(): 更新相机的投影矩阵。
SpotLight（聚光灯）
THREE.SpotLight 表示一个聚光灯，可以模拟手电筒或舞台灯光的效果。
构造器
new THREE.SpotLight(color, intensity, distance, angle, penumbra, decay)
| 参数 | 类型 | 描述 |
|---|---|---|
| color | Color | 光源颜色 |
| intensity | Number | 光照强度，默认为 1 |
| distance | Number | 光源影响的最大距离，默认为无穷大 |
| angle | Number | 聚光角度，默认为 Math.PI / 3 |
| penumbra | Number | 半影区域大小，默认为 0 |
| decay | Number | 光照衰减，默认为 1 |
方法
position.set(x, y, z): 设置光源位置。
SpotLightHelper（聚光灯辅助线）
THREE.SpotLightHelper 用于可视化聚光灯的光照范围。
构造器
new THREE.SpotLightHelper(spotLight, size)
| 参数 | 类型 | 描述 |
|---|---|---|
| spotLight | SpotLight | 要可视化的聚光灯 |
| size | Number | 辅助线的尺寸，默认为 1 |
BoxGeometry（立方体几何体）
THREE.BoxGeometry 用于创建一个立方体几何体。
构造器
new THREE.BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)
| 参数 | 类型 | 描述 |
|---|---|---|
| width | Number | 立方体宽度 |
| height | Number | 立方体高度 |
| depth | Number | 立方体深度 |
| widthSegments | Number | 宽度分段数，默认为 1 |
| heightSegments | Number | 高度分段数，默认为 1 |
| depthSegments | Number | 深度分段数，默认为 1 |
MeshPhongMaterial（网格材质）
THREE.MeshPhongMaterial 是一种基于 Phong 照明模型的材质，能够很好地表现光照效果。
构造器
new THREE.MeshPhongMaterial(parameters)
| 参数 | 类型 | 描述 |
|---|---|---|
| parameters | Object | 材质参数对象，包含 color、map 等属性 |
color: 材质颜色。map: 纹理贴图。
Mesh（网格）
THREE.Mesh 是由几何体和材质组成的3D对象。
构造器
new THREE.Mesh(geometry, material)
| 参数 | 类型 | 描述 |
|---|---|---|
| geometry | Geometry | 几何体 |
| material | Material | 材质 |
方法
translateX(amount): 沿X轴平移指定距离。
动画函数
requestAnimationFrame 是浏览器提供的用于执行动画的方法，确保动画帧率与显示器刷新率同步。
方法
function animate() {
requestAnimationFrame(animate);
// 更新物体状态
myMesh.rotation.x += 0.01;
myMesh.rotation.y += 0.01;
myMesh.rotation.z += 0.01;
// 渲染场景
myRenderer.render(myScene, myCamera);
}
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="ThreeJS/three.js"></script>
<script src="ThreeJS/jquery.js"></script>
</head>
<body>
<div id="myContainer"></div>
<script>
var myRenderer = new THREE.WebGLRenderer({antialias: true});
myRenderer.setSize(window.innerWidth, window.innerHeight);
$("#myContainer").append(myRenderer.domElement);
var myScene = new THREE.Scene();
myScene.background = new THREE.Color('white');
var myCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
myCamera.position.set(179.70, 84, 146);
myCamera.lookAt(new THREE.Vector3(0, 0, 0));
myCamera.updateProjectionMatrix();
var mySpotLight = new THREE.SpotLight('lightgreen');
mySpotLight.position.set(0, 100, 100);
myScene.add(mySpotLight);
var mySpotLightHelper = new THREE.SpotLightHelper(mySpotLight, 'green');
myScene.add(mySpotLightHelper);
var myBoxGeometry = new THREE.BoxGeometry(50, 50, 50);
var myMap = THREE.ImageUtils.loadTexture("images/img002.jpg");
var myMaterial = new THREE.MeshPhongMaterial({map: myMap});
var myMesh = new THREE.Mesh(myBoxGeometry, myMaterial);
myMesh.translateX(100);
myScene.add(myMesh);
function animate() {
requestAnimationFrame(animate);
myMesh.rotation.x += 0.01;
myMesh.rotation.y += 0.01;
myMesh.rotation.z += 0.01;
myRenderer.render(myScene, myCamera);
}
animate();
</script>
</body>
</html>
演示链接
示例链接
