ThreeJS 掘金最通俗入门指南 - 城市地图构建案例

2023-11-22 15:37:31

引言

ThreeJS，一个功能强大的 JavaScript 库，让我们能够创建令人惊叹的 3D 体验。凭借其易于使用的 API 和丰富的功能，ThreeJS 已成为构建 3D Web 应用程序和游戏的首选。如果您渴望踏入 ThreeJS 的世界，那么本指南将为您提供一个循序渐进的入门，并通过一个实际的案例引导您构建一个城市地图。

准备工作

在开始之前，我们需要安装必要的依赖项：

Node.js ：安装 Node.js 及其包管理器 npm。
Three.js ：使用 npm 安装 Three.js 库：npm install three。
代码编辑器 ：选择您喜欢的代码编辑器，例如 Visual Studio Code 或 Atom。

构建场景

首先，我们需要定义一个场景，这是 ThreeJS 中承载 3D 对象的容器。在 JavaScript 中：

const scene = new THREE.Scene();

接下来，设置场景的背景色和雾的颜色，以增强 3D 效果：

scene.background = new THREE.Color(0x000000); // 黑色背景
scene.fog = new THREE.Fog(0x000000, 100, 500); // 雾颜色为黑色，范围 100-500

添加照相机

照相机是用户观察场景的窗口。我们使用透视照相机，它提供类似于人眼的视角：

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5; // 将照相机放置在 z 轴上

添加光源

光源至关重要，因为它照亮场景并创建阴影。我们添加一个平行光作为主光源：

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1).normalize(); // 设置光源位置和方向
scene.add(light);

导入城市地图模型

为了构建城市地图，我们需要导入一个 3D 模型。在我们的案例中，我们将使用一个免费的 Blender 城市地图模型：

const loader = new THREE.ObjectLoader();
loader.load('city_map.gltf', (gltf) => {
  scene.add(gltf.scene);
});

渲染场景

现在场景已准备好，我们需要渲染它以在屏幕上显示。我们将使用 Three.js 渲染器：

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const animate = () => {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
};

animate();

交互

为了增强交互性，我们可以添加鼠标控制，允许用户围绕场景旋转：

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

优化

为了提高性能，我们可以启用一些优化措施，例如启用 depth test 和剔除：

renderer.shadowMap.enabled = true;
renderer.shadowMapSoft = true;
scene.traverse((object) => {
  if (object.isMesh) {
    object.castShadow = true;
    object.receiveShadow = true;
  }
});

完整代码

// 初始化场景
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);
scene.fog = new THREE.Fog(0x000000, 100, 500);

// 初始化照相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 初始化光源
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1).normalize();
scene.add(light);

// 导入城市地图模型
const loader = new THREE.ObjectLoader();
loader.load('city_map.gltf', (gltf) => {
  scene.add(gltf.scene);
});

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 鼠标控制
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

// 优化
renderer.shadowMap.enabled = true;
renderer.shadowMapSoft = true;
scene.traverse((object) => {
  if (object.isMesh) {
    object.castShadow = true;
    object.receiveShadow = true;
  }
});

// 渲染循环
const animate = () => {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
};

animate();