35. Three.js案例-创建带阴影的球体与平面
实现效果
知识点
WebGLRenderer_8">WebGLRenderer
WebGLRenderer 是Three.js中用于渲染场景的主要类之一，它负责将场景中的对象渲染到画布上。
构造器
new THREE.WebGLRenderer(parameters : Object)
| 参数 | 类型 | 描述 |
|---|---|---|
| parameters | Object | 可选参数对象，包含多个属性，如 antialias（抗锯齿）、alpha（透明背景）等。 |
方法
setPixelRatio(value : Number): 设置设备像素比。setSize(width : Number, height : Number): 设置渲染器的尺寸。setClearColor(color : Color, alpha : Number): 设置渲染器的背景颜色。render(scene : Scene, camera : Camera): 渲染场景。
Scene
Scene 是Three.js中的场景类，用于存储和管理所有可见的对象。
构造器
new THREE.Scene()
PerspectiveCamera
PerspectiveCamera 是Three.js中的透视相机类，用于模拟人眼的透视效果。
构造器
new THREE.PerspectiveCamera(fov : Number, aspect : Number, near : Number, far : Number)
| 参数 | 类型 | 描述 |
|---|---|---|
| fov | Number | 视野角度（以度为单位）。 |
| aspect | Number | 相机的宽高比。 |
| near | Number | 近裁剪面距离。 |
| far | Number | 远裁剪面距离。 |
方法
position.set(x : Number, y : Number, z : Number): 设置相机的位置。lookAt(vector : Vector3): 设置相机的朝向。
DirectionalLight
DirectionalLight 是Three.js中的方向光类，用于模拟太阳光或其他平行光源。
构造器
new THREE.DirectionalLight(color : Color, intensity : Number)
| 参数 | 类型 | 描述 |
|---|---|---|
| color | Color | 光源的颜色。 |
| intensity | Number | 光源的强度。 |
方法
castShadow = true: 启用阴影投射。position.set(x : Number, y : Number, z : Number): 设置光源的位置。
SphereBufferGeometry
SphereBufferGeometry 是Three.js中的球体几何体类，用于创建球体。
构造器
new THREE.SphereBufferGeometry(radius : Number, widthSegments : Number, heightSegments : Number)
| 参数 | 类型 | 描述 |
|---|---|---|
| radius | Number | 球体的半径。 |
| widthSegments | Number | 经度方向上的分段数。 |
| heightSegments | Number | 纬度方向上的分段数。 |
Mesh
Mesh 是Three.js中的网格类，用于组合几何体和材质。
构造器
new THREE.Mesh(geometry : Geometry, material : Material)
| 参数 | 类型 | 描述 |
|---|---|---|
| geometry | Geometry | 几何体对象。 |
| material | Material | 材质对象。 |
方法
position.set(x : Number, y : Number, z : Number): 设置网格的位置。castShadow = true: 启用阴影投射。receiveShadow = true: 启用阴影接收。
PlaneGeometry
PlaneGeometry 是Three.js中的平面几何体类，用于创建平面。
构造器
new THREE.PlaneGeometry(width : Number, height : Number, widthSegments : Number, heightSegments : Number)
| 参数 | 类型 | 描述 |
|---|---|---|
| width | Number | 平面的宽度。 |
| height | Number | 平面的高度。 |
| widthSegments | Number | 宽度方向上的分段数。 |
| heightSegments | Number | 高度方向上的分段数。 |
方法
rotateX(angle : Number): 绕X轴旋转。rotateZ(angle : Number): 绕Z轴旋转。position.set(x : Number, y : Number, z : Number): 设置平面的位置。receiveShadow = true: 启用阴影接收。
代码
<!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 myDirectionalLight1 = new THREE.DirectionalLight('white', 1);myDirectionalLight1.castShadow = true;myDirectionalLight1.position.set(-4, 10, 8);myScene.add(myDirectionalLight1);// 创建第二束方向光var myDirectionalLight2 = new THREE.DirectionalLight('white', 0.5);myDirectionalLight2.castShadow = true;myDirectionalLight2.position.set(4, 12, 12);myScene.add(myDirectionalLight2);// 创建用于投射阴影的球体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>
演示链接
示例链接
