56. Three.js案例-创建一个包含点光源和旋转立方体的3D场景
实现效果
本案例展示了Three.js中如何创建一个带有点光源的场景，并在该场景中添加一个旋转的立方体。通过点光源辅助线，可以直观地看到光源的位置和影响范围。
知识点
WebGLRenderer (WebGL渲染器)
用于将Three.js场景渲染到网页上。
构造器
WebGLRenderer( parameters : Object )
| 参数 | 类型 | 描述 |
|---|---|---|
| antialias | Boolean | 是否开启抗锯齿，默认值为false。 |
方法
setSize(width, height)：设置渲染器输出的宽度和高度。
Scene (场景)
用于存放所有物体、灯光等元素。
属性
background：设置场景的背景颜色或纹理。
PerspectiveCamera (透视相机)
模拟人眼视角，近大远小。
构造器
PerspectiveCamera(fov, aspect, near, far)
| 参数 | 类型 | 描述 |
|---|---|---|
| fov | Float | 视野角度（单位：度）。 |
| aspect | Float | 宽高比。 |
| near | Float | 近裁剪面距离。 |
| far | Float | 远裁剪面距离。 |
方法
lookAt(vector)：使相机看向指定位置。updateProjectionMatrix()：更新投影矩阵。
PointLight (点光源)
从一个点向四周发射光线，模拟灯泡效果。
构造器
PointLight(color, intensity, distance, decay)
| 参数 | 类型 | 描述 |
|---|---|---|
| color | Color | 光源颜色。 |
| intensity | Float | 强度，默认值为1.0。 |
| distance | Float | 光照距离，默认值为0（无限远）。 |
| decay | Float | 衰减系数，默认值为1.0。 |
PointLightHelper (点光源辅助线)
用于可视化点光源的影响范围。
构造器
PointLightHelper(light, size, color)
| 参数 | 类型 | 描述 |
|---|---|---|
| light | PointLight | 所属点光源。 |
| size | Float | 辅助线大小，默认值为1。 |
| color | Color | 颜色，默认值为白色。 |
BoxGeometry (立方体几何体)
用于创建立方体形状。
构造器
BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)
| 参数 | 类型 | 描述 |
|---|---|---|
| width | Float | 宽度，默认值为1。 |
| height | Float | 高度，默认值为1。 |
| depth | Float | 深度，默认值为1。 |
| widthSegments | Int | 宽度分段数，默认值为1。 |
| heightSegments | Int | 高度分段数，默认值为1。 |
| depthSegments | Int | 深度分段数，默认值为1。 |
MeshPhongMaterial (网格材质)
用于创建具有Phong光照模型的材质。
构造器
MeshPhongMaterial(parameters)
| 参数 | 类型 | 描述 |
|---|---|---|
| map | Texture | 纹理贴图。 |
代码
<!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);// 将渲染器的DOM元素添加到ID为"myContainer"的HTML元素中$("#myContainer").append(myRenderer.domElement);// 创建一个新的Three.js场景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(160.51, 158.71, 127.6);myCamera.lookAt(new THREE.Vector3(0, 0, 0));myCamera.updateProjectionMatrix();// 添加到场景中myScene.add(myCamera);// 创建并添加THREE.PointLight光源var myPointLight = new THREE.PointLight('lightgreen');myPointLight.position.set(0, 100, 100);myScene.add(myPointLight);// 绘制THREE.PointLight光源辅助线var myPointLightHelper = new THREE.PointLightHelper(myPointLight, 50, 'green');myScene.add(myPointLightHelper);// 创建立方体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);// 渲染立方体animate();function animate() {requestAnimationFrame(animate);myMesh.rotation.x += 0.01;myMesh.rotation.y += 0.01;myMesh.rotation.z += 0.01;myRenderer.render(myScene, myCamera);};
</script>
</body>
</html>
演示链接
示例链接
