34. Three.js案例-创建球体与模糊阴影
实现效果
知识点
WebGLRenderer
WebGLRenderer 是 Three.js 中用于渲染 3D 场景的核心类。它负责将场景中的对象绘制到画布上。
构造器
new THREE.WebGLRenderer(parameters)
| 参数 | 类型 | 描述 |
|---|---|---|
| parameters | Object | 可选参数对象，包含以下属性： |
| antialias | Boolean | 是否开启抗锯齿，默认为 false。 |
| alpha | Boolean | 是否透明，默认为 false。 |
| premultipliedAlpha | Boolean | 是否使用预乘 Alpha，默认为 true。 |
| preserveDrawingBuffer | Boolean | 是否保留绘图缓冲区，默认为 false。 |
| stencil | Boolean | 是否启用模板缓冲区，默认为 true。 |
| depth | Boolean | 是否启用深度缓冲区，默认为 true。 |
方法
setPixelRatio(value): 设置设备像素比。setSize(width, height): 设置渲染器的尺寸。setClearColor(color, alpha): 设置渲染器的背景颜色。render(scene, camera): 渲染场景。
Scene
Scene 是 Three.js 中用于存储场景中所有对象的容器。
构造器
new THREE.Scene()
PerspectiveCamera
PerspectiveCamera 是 Three.js 中用于创建透视相机的类。
构造器
new THREE.PerspectiveCamera(fov, aspect, near, far)
| 参数 | 类型 | 描述 |
|---|---|---|
| fov | Number | 视野角度，单位为度。 |
| aspect | Number | 相机宽高比。 |
| near | Number | 近裁剪面距离。 |
| far | Number | 远裁剪面距离。 |
方法
position.set(x, y, z): 设置相机的位置。lookAt(vector): 设置相机的朝向。
DirectionalLight
DirectionalLight 是 Three.js 中用于创建方向光的类。
构造器
new THREE.DirectionalLight(color, intensity)
| 参数 | 类型 | 描述 |
|---|---|---|
| color | Color | 光源颜色。 |
| intensity | Number | 光源强度，默认为 1。 |
属性
castShadow: 是否投射阴影，默认为false。shadow.radius: 阴影半径，用于产生模糊效果。
SphereBufferGeometry
SphereBufferGeometry 是 Three.js 中用于创建球体几何体的类。
构造器
new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments)
| 参数 | 类型 | 描述 |
|---|---|---|
| radius | Number | 球体半径。 |
| widthSegments | Number | 经度方向上的分段数，默认为 8。 |
| heightSegments | Number | 纬度方向上的分段数，默认为 6。 |
Mesh
Mesh 是 Three.js 中用于创建网格对象的类。
构造器
new THREE.Mesh(geometry, material)
| 参数 | 类型 | 描述 |
|---|---|---|
| geometry | Geometry | 几何体。 |
| material | Material | 材质。 |
属性
castShadow: 是否投射阴影，默认为false。receiveShadow: 是否接收阴影，默认为false。
PlaneGeometry
PlaneGeometry 是 Three.js 中用于创建平面几何体的类。
构造器
new THREE.PlaneGeometry(width, height, widthSegments, heightSegments)
| 参数 | 类型 | 描述 |
|---|---|---|
| width | Number | 平面宽度。 |
| height | Number | 平面高度。 |
| widthSegments | Number | 宽度方向上的分段数，默认为 1。 |
| heightSegments | Number | 高度方向上的分段数，默认为 1。 |
MeshStandardMaterial
MeshStandardMaterial 是 Three.js 中用于创建标准材质的类。
构造器
new THREE.MeshStandardMaterial(parameters)
| 参数 | 类型 | 描述 |
|---|---|---|
| color | Color | 材质颜色。 |
| metalness | Number | 金属度，默认为 0。 |
| roughness | Number | 粗糙度，默认为 1。 |
Vector3
Vector3 是 Three.js 中用于表示三维向量的类。
构造器
new THREE.Vector3(x, y, z)
| 参数 | 类型 | 描述 |
|---|---|---|
| x | Number | X 轴坐标。 |
| y | Number | Y 轴坐标。 |
| z | Number | Z 轴坐标。 |
方法
set(x, y, z): 设置向量的坐标。rotateX(angle): 绕 X 轴旋转。rotateY(angle): 绕 Y 轴旋转。rotateZ(angle): 绕 Z 轴旋转。
代码
<!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);
myRenderer.shadowMap.enabled = true;
$("#myContainer").append(myRenderer.domElement);
// 创建场景
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));
// 创建方向光
var myLight = new THREE.DirectionalLight('white', 1);
myLight.castShadow = true;
myLight.position.set(0, 14, 0);
myLight.shadow.radius = 16;
myScene.add(myLight);
// 创建球体
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, -4.5, 0);
myPlaneMesh.receiveShadow = true;
myScene.add(myPlaneMesh);
// 渲染场景
myRenderer.render(myScene, myCamera);
</script>
</body>
</html>