36. Three.js案例-创建带光照和阴影的球体与平面
实现效果
知识点
Three.js基础
WebGLRenderer
WebGLRenderer
是Three.js中最常用的渲染器,用于将场景渲染到网页上。
构造器
javascript
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中的场景对象,用于存储所有需要渲染的对象。
构造器
javascript
new THREE.Scene()
Camera
PerspectiveCamera
是Three.js中的一种透视相机,用于模拟人眼的视觉效果。
构造器
javascript
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中的点光源,用于模拟从一个点发出的光。
构造器
javascript
new THREE.PointLight(color, intensity, distance, decay)
参数 | 类型 | 描述 |
---|---|---|
color | color | 光源颜色。 |
intensity | float | 光源强度。 |
distance | float | 光源的最大影响距离。如果为0,则表示无限远。 |
decay | float | 光源衰减系数。默认值为1。 |
属性
castShadow
: 是否投射阴影。distance
: 光源的最大影响距离。intensity
: 光源强度。
SphereBufferGeometry
SphereBufferGeometry
用于创建一个球体几何体。
构造器
javascript
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中的网格对象,用于将几何体和材质组合在一起。
构造器
javascript
new THREE.Mesh(geometry, material)
参数 | 类型 | 描述 |
---|---|---|
geometry | Geometry | 几何体对象。 |
material | Material | 材质对象。 |
属性
castShadow
: 是否投射阴影。receiveShadow
: 是否接收阴影。
PlaneGeometry
PlaneGeometry
用于创建一个平面几何体。
构造器
javascript
new THREE.PlaneGeometry(width, height, widthSegments, heightSegments)
参数 | 类型 | 描述 |
---|---|---|
width | float | 平面的宽度。 |
height | float | 平面的高度。 |
widthSegments | int | 宽度方向上的分段数。默认值为1。 |
heightSegments | int | 高度方向上的分段数。默认值为1。 |
MeshStandardMaterial
MeshStandardMaterial
是Three.js中的一种标准材质,支持物理光照模型。
构造器
javascript
new THREE.MeshStandardMaterial(parameters)
参数 | 类型 | 描述 |
---|---|---|
parameters | object | 可选参数,用于配置材质。包括但不限于 color (颜色)、roughness (粗糙度)、metalness (金属度)等。 |
代码
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);
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>