36. Three.js案例-创建带光照和阴影的球体与平面
实现效果
知识点
Three.js基础
WebGLRenderer
WebGLRenderer 是Three.js中最常用的渲染器，用于将场景渲染到网页上。
构造器
new THREE.WebGLRenderer(parameters)
方法
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)
方法
position.set(x, y, z): 设置相机的位置。lookAt(vector): 设置相机的朝向。
PointLight
PointLight 是Three.js中的点光源，用于模拟从一个点发出的光。
构造器
new THREE.PointLight(color, intensity, distance, decay)
属性
castShadow: 是否投射阴影。distance: 光源的最大影响距离。intensity: 光源强度。
SphereBufferGeometry
SphereBufferGeometry 用于创建一个球体几何体。
构造器
new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)
Mesh
Mesh 是Three.js中的网格对象，用于将几何体和材质组合在一起。
构造器
new THREE.Mesh(geometry, material)
属性
castShadow: 是否投射阴影。receiveShadow: 是否接收阴影。
PlaneGeometry
PlaneGeometry 用于创建一个平面几何体。
构造器
new THREE.PlaneGeometry(width, height, widthSegments, heightSegments)
MeshStandardMaterial
MeshStandardMaterial 是Three.js中的一种标准材质，支持物理光照模型。
构造器
new THREE.MeshStandardMaterial(parameters)
代码
<!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>