36. Three.js案例-创建带光照和阴影的球体与平面
实现效果
知识点
Three.js基础
WebGLRenderer
WebGLRenderer 是Three.js中最常用的渲染器，用于将场景渲染到网页上。
构造器
new THREE.WebGLRenderer(parameters)
| 参数 | 类型 | 描述 |
|---|---|---|
| parameters | object | 可选参数，用于配置渲染器。包括但不限于 antialias（抗锯齿）、alpha（透明度）等。 |
方法
setPixelRatio(value): 设置设备像素比。setSize(width, height): 设置渲染器的尺寸。setClearColor(color, alpha): 设置渲染器的背景颜色。shadowMap.enabled: 启用或禁用阴影映射。render(scene, camera): 渲染场景。
Scene
Scene 是Three.js中的场景对象，用于存储所有需要渲染的对象。
构造器
new THREE.Scene()
Camera
PerspectiveCamera 是Three.js中的一种透视相机，用于模拟人眼的视觉效果。
构造器
new THREE.PerspectiveCamera(fov, aspect, near, far)
| 参数 | 类型 | 描述 |
|---|---|---|
| fov | float | 视野角度，单位为度。 |
| aspect | float | 相机宽高比。 |
| near | float | 近裁剪面距离。 |
| far | float | 远裁剪面距离。 |
方法
position.set(x, y, z): 设置相机的位置。lookAt(vector): 设置相机的朝向。
PointLight
PointLight 是Three.js中的点光源，用于模拟从一个点发出的光。
构造器
new THREE.PointLight(color, intensity, distance, decay)
| 参数 | 类型 | 描述 |
|---|---|---|
| color | color | 光源颜色。 |
| intensity | float | 光源强度。 |
| distance | float | 光源的最大影响距离。如果为0，则表示无限远。 |
| decay | float | 光源衰减系数。默认值为1。 |
属性
castShadow: 是否投射阴影。distance: 光源的最大影响距离。intensity: 光源强度。
SphereBufferGeometry
SphereBufferGeometry 用于创建一个球体几何体。
构造器
new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)
| 参数 | 类型 | 描述 |
|---|---|---|
| radius | float | 球体半径。 |
| widthSegments | int | 经度方向上的分段数。默认值为8。 |
| heightSegments | int | 纬度方向上的分段数。默认值为6。 |
| phiStart | float | 球体起始经度。默认值为0。 |
| phiLength | float | 球体经度范围。默认值为2π。 |
| thetaStart | float | 球体起始纬度。默认值为0。 |
| thetaLength | float | 球体纬度范围。默认值为π。 |
Mesh
Mesh 是Three.js中的网格对象，用于将几何体和材质组合在一起。
构造器
new THREE.Mesh(geometry, material)
| 参数 | 类型 | 描述 |
|---|---|---|
| geometry | Geometry | 几何体对象。 |
| material | Material | 材质对象。 |
属性
castShadow: 是否投射阴影。receiveShadow: 是否接收阴影。
PlaneGeometry
PlaneGeometry 用于创建一个平面几何体。
构造器
new THREE.PlaneGeometry(width, height, widthSegments, heightSegments)
| 参数 | 类型 | 描述 |
|---|---|---|
| width | float | 平面的宽度。 |
| height | float | 平面的高度。 |
| widthSegments | int | 宽度方向上的分段数。默认值为1。 |
| heightSegments | int | 高度方向上的分段数。默认值为1。 |
MeshStandardMaterial
MeshStandardMaterial 是Three.js中的一种标准材质，支持物理光照模型。
构造器
new THREE.MeshStandardMaterial(parameters)
| 参数 | 类型 | 描述 |
|---|---|---|
| parameters | object | 可选参数，用于配置材质。包括但不限于 color（颜色）、roughness（粗糙度）、metalness（金属度）等。 |
代码
<!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 myPointLight = new THREE.PointLight('white');
myPointLight.position.set(0, 6, 0);
myPointLight.distance = 380;
myPointLight.castShadow = true;
myScene.add(myPointLight);
// 创建球体
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>
演示链接
示例链接
