【04】基于 Three.js 的 3D 地形代码解析（webgl_geometry_terrain_raycast.html）

最新推荐文章于 2025-04-27 17:20:04 发布

Jiaberrrr

最新推荐文章于 2025-04-27 17:20:04 发布

阅读量937

点赞数 22

分类专栏：探秘Three.js：官网示例代码深度解析文章标签： javascript 3d 前端 webgl three.js

本文链接：https://blog.csdn.net/Jiaberrr/article/details/144692943

版权

摘要：本文将对一段使用 Three.js 库构建的 3D 地形场景相关代码进行详细解析，涵盖从基础的场景初始化、对象创建，到交互逻辑以及纹理生成等多个方面，旨在帮助读者更好地理解 Three.js 在创建复杂 3D 地形场景中的应用。

一、引言

Three.js 是一个功能强大且广泛应用于 Web 端 3D 图形开发的 JavaScript 库，它提供了丰富的 API 来创建各种绚丽的 3D 场景、动画以及交互效果。接下来我们要解析的这段代码就是利用 Three.js 构建了一个特定的 3D 场景，并实现了一些交互功能，官网示例地址：https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_terrain_raycast.html下面就让我们逐步深入了解其每一部分的作用和原理。

二、代码整体结构与模块导入

代码开头部分通过import语句导入了多个 Three.js 相关的模块，如下：

import * as THREE from 'three';

import Stats from 'three/addons/libs/stats.module.js';

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

import { ImprovedNoise } from 'three/addons/math/ImprovedNoise.js';

import * as THREE from 'three';：这行代码导入了整个 Three.js 库，使得我们可以使用 Three.js 提供的各种类和方法来构建 3D 场景，例如创建几何体、材质、相机等。

import Stats from 'three/addons/libs/stats.module.js';：导入Stats模块，它通常用于在页面上显示帧率等性能相关的统计信息，方便我们了解场景渲染的性能表现。

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';：引入OrbitControls，它能够让我们以一种直观的方式通过鼠标操作来控制相机在场景中的视角，比如旋转、缩放和平移等操作。

import { ImprovedNoise } from 'three/addons/math/ImprovedNoise.js';：这个模块用于生成噪声数据，在代码中后续会利用它来生成地形高度等相关数据，常用于创建更加真实自然的地形效果。

三、全局变量声明

接着定义了一系列的全局变量：

let container, stats;

let camera, controls, scene, renderer;

let mesh, texture;

const worldWidth = 256, worldDepth = 256,

worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;

let helper;

const raycaster = new THREE.Raycaster();

const pointer = new THREE.Vector2();