three.js 项目搭建（三）——场景搭建

2023-12-20 16:10:02

上一次我们添加了简单的对象并且作了简单的操作，这篇我们尝试增加一个环境贴图（HDR环境贴图），还有物体的阴影，不过阴影可能会影响性能，后面再补充阴影优化措施。

3D 场景中的环境贴图

环境贴图用于模拟真实世界中的环境光，使场景中的物体看起来更加逼真。在 three.js 中，环境贴图通常使用 HDR 图像来实现。HDR 图像具有更高的动态范围，能够展现更丰富的亮度和色彩细节。

添加环境贴图

在 three.js 中添加环境贴图非常简单，只需将 HDR 图像加载到纹理中，然后将其赋给场景的 environment 属性即可。例如：

const textureLoader = new THREE.TextureLoader();
const environmentTexture = textureLoader.load('hdr_image.hdr');
scene.environment = environmentTexture;

物体阴影

three.js 中的阴影分为两种：基本阴影和软阴影。基本阴影使用的是平行光，阴影边缘比较生硬；软阴影使用的是点光源或聚光灯，阴影边缘比较柔和。

添加基本阴影

在 three.js 中添加基本阴影非常简单，只需在场景中添加一个平行光源，然后将阴影类型设置为 THREE.BasicShadowMap 即可。例如：

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(10, 10, 10);
directionalLight.castShadow = true;
directionalLight.shadow.mapSize.width = 1024;
directionalLight.shadow.mapSize.height = 1024;
scene.add(directionalLight);

添加软阴影

在 three.js 中添加软阴影需要使用 THREE.PCFSoftShadowMap 阴影类型，并且需要将光源的 shadow.radius 属性设置为一个较大的值。例如：

const spotLight = new THREE.SpotLight(0xffffff, 1);
spotLight.position.set(10, 10, 10);
spotLight.castShadow = true;
spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;
spotLight.shadow.radius = 10;
scene.add(spotLight);