273. 采样器实战：漫山遍野的植被（三）

上节用采样器加上了很多植被：

但效果还不够真实，我们这节继续完善。

首先加上雾气：

scene.background = new THREE.Color(0x87CEEB); // 天空蓝
scene.fog = new THREE.Fog(0x87CEEB, 200, 1500);

背景是天空蓝。

然后雾气也是从 200 到 1500 的视野距离逐渐加重雾气，颜色也是天空蓝。

然后加上阴影，这样会更真实：

renderer.shadowMap.enabled = true;

const light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.set(1000, 3000, 2000);
light.castShadow = true;

light.shadow.mapSize.width = 2048;
light.shadow.mapSize.height = 2048;
light.shadow.camera.near = 0.5;
light.shadow.camera.far = 5000;
light.shadow.camera.left = -1000;
light.shadow.camera.right = 1000;
light.shadow.camera.top = 1000;
light.shadow.camera.bottom = -1000;

scene.add(light);

const ambientLight = new THREE.AmbientLight(0xffffff, 0.1);
scene.add(ambientLight);

调了下平行光位置，开启阴影，设置阴影矩阵。

并且加上了一个比较弱的环境光。

然后开启树和花的阴影投射：

tree.traverse((child) => {
    if (child.isMesh) {
        child.castShadow = true;
    }
});

flower.traverse((child) => {
    if (child.isMesh) {
        child.castShadow = true;
    }
});

然后在山坡上开启接收阴影：

mountainside.receiveShadow = true;

加上阴影后，就感觉不那么突兀了，像是那个位置生长出来的一样。

然后加上相机动画：

let cameraAngle = 0;
const cameraRadius = 800;
const cameraHeight = 400;

cameraAngle += 0.005;

camera.position.x = Math.cos(cameraAngle) * cameraRadius;
camera.position.z = Math.sin(cameraAngle) * cameraRadius;
camera.position.y = cameraHeight;
camera.lookAt(0, 0, 0);

案例代码上传了小册仓库

总结

这节加上了雾、阴影、相机动画。

其实这个效果和之前林海雪原的差不多，但区别在于这次用的是表面采样器。

用表面采样器实现这种效果明显简单了好多，不用自己去计算位置。

并且这次我们用了 5 层噪音，5 种颜色，实现了更复杂的地形和颜色。