前言

在数字技术的浪潮中，三维图形渲染技术以其独特的魅力，正逐步渗透到我们生活的方方面面，从电影特效的震撼呈现到游戏世界的沉浸式体验，再到虚拟现实（VR）与增强现实（AR）技术的蓬勃发展，三维图形技术无疑成为了连接现实与虚拟世界的桥梁。而在这众多技术中，Three.js作为一款轻量级、易于上手且功能强大的JavaScript 3D库，凭借其跨平台、高性能的特点，成为了前端开发者探索三维世界的重要工具。
本文章基于《Three.js 3D人物漫游项目（上）》基础上将完成人物的投影及丰富场景的建筑物。

最终效果展示

1、人物添加阴影

回顾《Three.js 3D人物漫游项目（上）》我们最后的效果是人物T字型站在场景中，那么我们需要将她的人物投射阴影给加上。

1.1 添加地板

我们要给人物添加阴影首先要有接收阴影的物体，然后设置它的receiveShadow属性为true。
我们在src文件夹新建building.js文件，写入代码创建地板：

import * as THREE from 'three';

const plane = new THREE.Mesh(
    new THREE.PlaneGeometry(600,600),
    new THREE.MeshStandardMaterial({
        color: 0x90EE90,
        side: THREE.DoubleSide
    })
);

plane.rotation.x = -Math.PI / 2;

plane.receiveShadow = true;

export {plane};

接着我们在index.html中引入这个地面，并且加到场景中：

import {plane} from './src/building.js';
scene.add(plane);

1.1.1 效果

可以看到地面已经有了。可以阴影的效果还没有。

1.2 模型castShadow

我们需要将模型的属性castShadow投射阴影设为true才能开启阴影，在index.html中加入代码：

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

1.2.1 效果

可以看到我们现在人物已经有阴影了。

1.3 轨道控制器

现在我们无法去移动视角观察，所以添加轨道控制器去移动视角，在index.html中写入代码：

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

const control = new OrbitControls(camera, renderer.domElement)
// 开启阻尼惯性，默认值为0.05
control.enableDamping = true

1.3.1 效果

可以看到我们可以转动视角观察模型了。

---

2、创建建筑物

2.1 代码

现在我们的场景里只有一个人物，太单一了，所以我们添加建筑物。在building.js输入代码：

const getIntRandom = (min, max) => {
    return Math.floor(Math.random()*(max-min+1))+min;
}

// 创建立方体建筑物
const cubeBuild = [];
const createBuild = () => {
    for(let i=0; i < 400; i++) {
        const height = getIntRandom(5, 15);
        const width = getIntRandom(3, 8);
        const depth = getIntRandom(2, 8);
        const x = getIntRandom(-300, 300);
        const z = getIntRandom(-300, 300);
        const y = height/2;
        const mesh = new THREE.Mesh(
            new THREE.BoxGeometry(width, height, depth),
            new THREE.MeshStandardMaterial({
                color: 0xC67171
            })
        );
        mesh.position.set(x,y,z);
        cubeBuild.push(mesh);
    }
}
createBuild();

export {plane, cubeBuild};

可以看到我们循环创建不规则的立方体。

在index.html中加入如下代码：

import {plane, cubeBuild} from './src/building.js';

scene.add(plane, ...cubeBuild);

2.2 效果

可以看到我们不规则的建筑物就已经添加进来了。

在学习的路上，如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持。