Three.js实现光照阴影
在Three.js中，物体可以形成阴影投影效果，但是由于渲染阴影需要消耗计算机大量资源，所以Three.js在默认情况下是不会渲染阴影的。 为了实现渲染阴影效果，我们还需要完成以下四个部分的设置。
1. renderer设置
首先我们需要告诉渲染器我们需要阴影效果：
renderer.shadowMap.enabled = true;
更多详细内容可以查看WebGLRenderer的shadowMap属性。
2. 光源设置
然后我们需要定义能够产生阴影的光源：
light.castShadow = true;
注意： 不是所有的光源都能够产生阴影，只有一部分光源可以，例如通过
THREE.PointLight(点光源)、THREE.SpotLight(聚光源)和THREE.DirectionalLight(平行光光源)定义的光源是能够产生阴影的。
3. 指定物体投射阴影
接下来我们需要指定场景中的哪些物体能够投射阴影，能够产生阴影的物体需要设置以下代码：
const geometry = new THREE.BoxBufferGeometry(4, 4, 4); // 生成几何体
const material = new THREE.MeshLambertMaterial({ // 生成材质
color: 0x00ff00,
});
const mesh = new THREE.Mesh(geometry, material); // 生成网格
mesh.castShadow = true; // 对象是否渲染到阴影贴图中，默认值为false
注意： 只有
castShadow属性为true的物体才会产生阴影。
4. 指定物体接受阴影
最后我们还需要指定哪些物体能够接受阴影，这样才能够看出阴影效果。
const planeGeometry = new THREE.PlaneGeometry(300, 300); // 生成平面几何
const planeMaterial = new THREE.MeshLambertMaterial({ // 生成材质
color: 0xcccccc,
});
const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial); // 生成平面网格
planeMesh.receiveShadow = true; // 设置平面网格为接受阴影的投影面
注意： 只有
receiveShadow属性为true的物体才能够接受阴影。
全部代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Three.js实现光照阴影</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script type="module">
import * as THREE from 'https://threejs.org/build/three.module.js';
import Stats from 'https://threejs.org/examples/jsm/libs/stats.module.js';
import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';
let stats = new Stats(); // 性能监控器，用来查看Three.js渲染帧率
// 创建div
let container = document.createElement('div');
document.body.appendChild(container);
// 创建场景
let scene = new THREE.Scene();
// 创建相机
let camera = new THREE.PerspectiveCamera( // 透视投影相机
40, // 视场，表示能够看到的角度范围
window.innerWidth / window.innerHeight, // 渲染窗口的长宽比，设置为浏览器窗口的长宽比
0.1, // 从距离相机多远的位置开始渲染
2000 // 距离相机多远的位置截止渲染
);
camera.position.set(-10, 10, 40); // 设置相机位置
// 创建渲染器
let renderer = new THREE.WebGLRenderer({
antialias: true, // 是否执行抗锯齿
});
renderer.setPixelRatio(window.devicePixelRatio); // 设置设备像素比率。通常用于HiDPI设备，以防止输出画布模糊。
renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器大小
renderer.shadowMap.enabled = true;
container.appendChild(renderer.domElement);
// 创建控制器
let controls = new OrbitControls(camera, renderer.domElement);
// 创建物体
const geometry = new THREE.BoxBufferGeometry(4, 4, 4); // 生成几何体
const material = new THREE.MeshLambertMaterial({
// 生成材质
color: 0x00ff00,
});
const mesh = new THREE.Mesh(geometry, material); // 生成网格
mesh.castShadow = true; // 对象是否渲染到阴影贴图中，默认值为false
mesh.position.set(0, 3, 0); // 设置物体位置
scene.add(mesh); // 添加到场景中
// 创建平面
const planeGeometry = new THREE.PlaneGeometry(300, 300); // 生成平面几何
const planeMaterial = new THREE.MeshLambertMaterial({
// 生成材质
color: 0xcccccc,
});
const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial); // 生成平面网格
planeMesh.receiveShadow = true; // 设置平面网格为接受阴影的投影面
planeMesh.rotation.x = -Math.PI / 2; //绕X轴旋转90度
scene.add(planeMesh); // 添加到场景中
// 创建平行光源
const light = new THREE.DirectionalLight(0xffffff, 1); // 平行光，颜色为白色，强度为1
light.position.set(-40, 40, 20); // 设置灯源位置
light.castShadow = true; // 允许生成阴影
light.target = mesh;
scene.add(light); // 添加到场景中
animate();
function animate() {
requestAnimationFrame(animate);
stats.begin();
renderer.render(scene, camera);
stats.end();
}
</script>
</body>
</html>
网友评论