33. Three.js案例-创建带阴影的球体与平面
实现效果
知识点
WebGLRenderer (WebGL渲染器)
WebGLRenderer 是 Three.js 中用于渲染 3D 场景的核心类。它负责将场景中的对象绘制到画布上。
构造器
javascript
new THREE.WebGLRenderer(parameters)| 参数 | 类型 | 描述 |
|---|---|---|
| parameters | Object | 可选参数对象，用于配置渲染器的各种属性。 |
常用参数：
antialias：布尔值，是否开启抗锯齿，默认为false。alpha：布尔值，是否允许透明背景，默认为false。premultipliedAlpha：布尔值，是否使用预乘 alpha，默认为true。preserveDrawingBuffer：布尔值，是否保留绘图缓冲区，默认为false。depth：布尔值，是否创建深度缓冲区，默认为true。stencil：布尔值，是否创建模板缓冲区，默认为true。logarithmicDepthBuffer：布尔值，是否使用对数深度缓冲区，默认为false。powerPreference：字符串，指定 GPU 的性能偏好，可选值为default、high-performance或low-power。
方法
setPixelRatio(value)：设置设备像素比。setSize(width, height, updateStyle)：设置渲染器的尺寸。setClearColor(color, alpha)：设置渲染器的背景颜色。render(scene, camera)：渲染场景。
Scene (场景)
Scene 是 Three.js 中用于存储和管理所有 3D 对象的容器。
构造器
javascript
new THREE.Scene()PerspectiveCamera (透视相机)
PerspectiveCamera 是 Three.js 中用于创建透视投影的相机。
构造器
javascript
new THREE.PerspectiveCamera(fov, aspect, near, far)| 参数 | 类型 | 描述 |
|---|---|---|
| fov | Number | 视野角度，以度为单位。 |
| aspect | Number | 相机的宽高比。 |
| near | Number | 近裁剪面距离，小于该距离的对象不会被渲染。 |
| far | Number | 远裁剪面距离，大于该距离的对象不会被渲染。 |
方法
position.set(x, y, z)：设置相机的位置。lookAt(vector)：使相机看向指定的点。
SpotLight (聚光灯)
SpotLight 是 Three.js 中用于创建聚光灯的光源。
构造器
javascript
new THREE.SpotLight(color, intensity, distance, angle, penumbra, decay)| 参数 | 类型 | 描述 |
|---|---|---|
| color | Color | 光源的颜色。 |
| intensity | Number | 光源的强度，默认为 1。 |
| distance | Number | 光源的最大影响距离，默认为 0（无限远）。 |
| angle | Number | 光源的光照角度，默认为 Math.PI/3。 |
| penumbra | Number | 光源的半影区域，默认为 0。 |
| decay | Number | 光源的衰减，默认为 1。 |
属性
castShadow：布尔值，是否投射阴影，默认为false。
Mesh (网格)
Mesh 是 Three.js 中用于创建 3D 对象的基本类。
构造器
javascript
new THREE.Mesh(geometry, material)| 参数 | 类型 | 描述 |
|---|---|---|
| geometry | Geometry | 网格的几何体。 |
| material | Material | 网格的材质。 |
属性
castShadow：布尔值，是否投射阴影，默认为false。receiveShadow：布尔值，是否接收阴影，默认为false。
SphereBufferGeometry (球体几何体)
SphereBufferGeometry 是 Three.js 中用于创建球体几何体的类。
构造器
javascript
new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)| 参数 | 类型 | 描述 |
|---|---|---|
| radius | Number | 球体的半径。 |
| widthSegments | Number | 经度方向上的分段数，默认为 8。 |
| heightSegments | Number | 纬度方向上的分段数，默认为 6。 |
| phiStart | Number | 经度起始角度，默认为 0。 |
| phiLength | Number | 经度范围，默认为 2 * Math.PI。 |
| thetaStart | Number | 纬度起始角度，默认为 0。 |
| thetaLength | Number | 纬度范围，默认为 Math.PI。 |
PlaneGeometry (平面几何体)
PlaneGeometry 是 Three.js 中用于创建平面几何体的类。
构造器
javascript
new THREE.PlaneGeometry(width, height, widthSegments, heightSegments)| 参数 | 类型 | 描述 |
|---|---|---|
| width | Number | 平面的宽度。 |
| height | Number | 平面的高度。 |
| widthSegments | Number | 宽度方向上的分段数，默认为 1。 |
| heightSegments | Number | 高度方向上的分段数，默认为 1。 |
MeshNormalMaterial (网格法线材质)
MeshNormalMaterial 是 Three.js 中用于显示网格法线的材质。
构造器
javascript
new THREE.MeshNormalMaterial(parameters)| 参数 | 类型 | 描述 |
|---|---|---|
| parameters | Object | 可选参数对象，用于配置材质的各种属性。 |
常用参数：
wireframe：布尔值，是否以线框模式显示，默认为false。transparent：布尔值，是否允许透明，默认为false。
MeshStandardMaterial (网格标准材质)
MeshStandardMaterial 是 Three.js 中用于创建物理上准确的标准材质。
构造器
javascript
new THREE.MeshStandardMaterial(parameters)| 参数 | 类型 | 描述 |
|---|---|---|
| parameters | Object | 可选参数对象，用于配置材质的各种属性。 |
常用参数：
color：颜色值，材质的颜色。metalness：浮点数，金属度，默认为 0。roughness：浮点数，粗糙度，默认为 1。
Vector3 (三维向量)
Vector3 是 Three.js 中用于表示三维向量的类。
构造器
javascript
new THREE.Vector3(x, y, z)| 参数 | 类型 | 描述 |
|---|---|---|
| x | Number | 向量的 x 分量。 |
| y | Number | 向量的 y 分量。 |
| z | Number | 向量的 z 分量。 |
方法
set(x, y, z)：设置向量的各个分量。multiplyScalar(scalar)：将向量的各个分量乘以一个标量。
ShadowMap (阴影映射)
ShadowMap 是 Three.js 中用于启用和配置阴影映射的功能。
属性
enabled：布尔值，是否启用阴影映射，默认为false。
代码
html
<!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();
myRenderer.setPixelRatio(window.devicePixelRatio);
myRenderer.setSize(480, 320);
myRenderer.setClearColor('white', 1);
// 创建场景
var myScene = new THREE.Scene();
// 创建相机
var myCamera = new THREE.PerspectiveCamera(45, 480 / 320, 0.1, 1000);
myCamera.position.set(4, 4, 2);
myCamera.position.multiplyScalar(2);
myCamera.lookAt(new THREE.Vector3(0, 0, 0));
// 启用阴影映射
myRenderer.shadowMap.enabled = true;
// 添加渲染器到容器
$("#myContainer").append(myRenderer.domElement);
// 创建聚光灯
var mySpotLight = new THREE.SpotLight('white');
mySpotLight.position.set(-3, 46, -1);
mySpotLight.distance = 80;
mySpotLight.angle = Math.PI / 50;
mySpotLight.castShadow = true;
myScene.add(mySpotLight);
// 创建球体
var mySphereGeometry = new THREE.SphereBufferGeometry(2, 36, 36);
var mySphereMaterial = new THREE.MeshNormalMaterial({
wireframe: true,
transparent: true
});
var mySphereMesh = new THREE.Mesh(mySphereGeometry, mySphereMaterial);
mySphereMesh.position.set(0, 2.5, 0);
mySphereMesh.castShadow = true;
myScene.add(mySphereMesh);
// 创建平面
var myPlaneGeometry = new THREE.PlaneGeometry(120, 120, 1, 1);
var myPlaneMaterial = new THREE.MeshStandardMaterial({color: 'white'});
var myPlaneMesh = new THREE.Mesh(myPlaneGeometry, myPlaneMaterial);
myPlaneMesh.rotateX(-Math.PI / 2);
myPlaneMesh.rotateZ(-Math.PI / 7);
myPlaneMesh.position.set(0, -3.5, 0);
myPlaneMesh.receiveShadow = true;
myScene.add(myPlaneMesh);
// 渲染场景
myRenderer.render(myScene, myCamera);
</script>
</body>
</html>