探索Three.js中的平行光阴影计算
平行光阴影简介
在Three.js中，平行光（DirectionalLight）可以模拟太阳光线，产生逼真的阴影效果。要实现这一效果，需要对模型、光源和渲染器进行适当的配置。
实现平行光阴影的步骤
- 设置模型产生阴影：通过
.castShadow属性。 - 设置光源产生阴影：通过
.castShadow属性。 - 设置模型接收阴影：通过
.receiveShadow属性。 - 启用渲染器的阴影渲染：通过
.shadowMap.enabled属性。 - 设置光源的阴影相机：通过
.shadow.camera属性。
示例代码：设置模型和光源产生阴影
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js Directional Light Shadows</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script type="importmap">
{
"imports": {
"three": "https://threejs.org/build/three.module.js",
"three/addons/": "https://threejs.org/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
// 创建地面和立方体
const geometry = new THREE.BoxGeometry(50, 50, 50);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
cube.castShadow = true; // 设置模型产生阴影
scene.add(cube);
const planeGeometry = new THREE.PlaneGeometry(200, 200);
const planeMaterial = new THREE.MeshStandardMaterial({ color: 0x000000 });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true; // 设置模型接收阴影
scene.add(plane);
// 设置光源
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(0, 1, 1);
directionalLight.castShadow = true; // 设置光源产生阴影
scene.add(directionalLight);
// 启用渲染器的阴影渲染
renderer.shadowMap.enabled = true;
// 设置光源的阴影相机
const shadowHelper = new THREE.CameraHelper(directionalLight.shadow.camera);
scene.add(shadowHelper);
// 渲染循环
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>详细描述
- 场景和相机设置：创建一个
PerspectiveCamera和WebGLRenderer，设置渲染器的尺寸以适应窗口大小。 - OrbitControls：添加相机控件，允许用户通过鼠标和键盘控制相机的视角。
- 模型和材质：创建一个立方体和平面，为它们设置材质，并添加到场景中。
- 光源设置：创建一个
DirectionalLight，设置其位置和颜色，并启用阴影效果。 - 阴影渲染：启用渲染器的阴影渲染功能，并添加
CameraHelper来可视化光源的阴影相机。 - 渲染循环：通过
requestAnimationFrame实现连续渲染，使立方体旋转以展示阴影效果。
纠错和优化
- 确保
importmap中的URL正确指向Three.js和其插件的路径。 - 使用
OrbitControls时，确保正确导入并初始化。 - 在设置阴影时，确保模型和光源的
.castShadow和.receiveShadow属性正确设置。 - 调整光源的
.shadow.camera属性，以优化阴影的渲染范围和性能。