最近项目中在地图中显示三维河床的功能，最终实现是用three.js来实现绘制的。这里记录一下整体的调用过程。
# 一：安装 Three.js
Three.js 是一个强大的 JavaScript 库，用于在网页上创建和显示 3D 图形。如果你在使用一个前端框架，例如 Vue 或 React，你可以使用相应的库，例如 vue-threejs 或 react-three-fiber
作者这里用的vue3的框架
直接上命令，npm安装或者pnpm进行安装。
代码语言：txt复制```javascript
npm install three
```如果是其他也可以标签直接引入three.js的js文件。
地址：http://www.webgl3d.cn/
# 二：创建基础场景
Three.js 允许你以各种方式创建 3D 场景。下面是一个基本的示例，创建一个场景、一个相机和一个渲染器：
代码语言：txt复制```javascript
import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
```# 三：添加几何体
Three.js 提供了一系列基础几何体，例如立方体、球体和圆锥体。下面代码是如何创建一个立方体的示例：
代码语言：txt复制```javascript
const geometry = new THREE.BoxGeometry(1, 1, 1); // 创建一个立方体几何体，边长为1
const material = new THREE.MeshBasicMaterial({color: 0x00ff00}); // 创建一个绿色基本材质
const cube = new THREE.Mesh(geometry, material); // 创建一个立方体网格，使用几何体和材质
scene.add(cube); // 将立方体添加到场景中
```# 四：渲染循环
代码语言：txt复制```javascript
function animate() {
requestAnimationFrame(animate); // 请求下一帧动画
cube.rotation.x = 0.01; // 旋转立方体
cube.rotation.y = 0.01;
renderer.render(scene, camera); // 渲染场景和相机视图到屏幕上
}
animate(); // 开始动画循环
```# 五：处理用户输入
三维场景肯定也要缩放旋转等，下面是一个处理鼠标滚轮事件的示例：
代码语言：txt复制```javascript
function onDocumentScroll(event) {
camera.position.z -= event.deltaY * 0.01; // 根据鼠标滚轮的滚动方向移动相机位置，模拟缩放效果
}
window.addEventListener('wheel', onDocumentScroll); // 添加事件监听器到窗口对象，以便在用户滚动鼠标滚轮时触发事件处理函数
```# 六：使用体验
自从我开始接触并深入使用Three.js这个强大的WebGL 3D库以来，我深刻感受到了它在网页上创建沉浸式三维体验的巨大潜力和灵活性。Three.js不仅简化了WebGL的复杂性，还提供了丰富的API和文档支持，让开发者能够轻松地将三维图形集成到Web应用中。
1. 入门门槛相对较低
相比原生WebGL，Three.js的入门门槛相对较低。它封装了底层的WebGL细节，使得开发者不需要深入了解复杂的图形学知识就能开始构建三维场景。Three.js的文档和社区资源也非常丰富，无论是通过官方文档、教程还是社区论坛，都能找到大量的学习资料和解答疑问的地方。
2. 强大的功能和灵活性
Three.js提供了丰富的功能和灵活的API，使得开发者能够创建出各种复杂且富有创意的三维场景。从基础的几何体（如立方体、球体等）到复杂的模型加载（支持多种格式，如FBX、OBJ、GLTF等），再到材质、纹理、阴影、光照、动画等高级特性的应用，Three.js都能提供全面的支持。此外，它还支持后处理效果，如景深、HDR渲染、色调映射等，这些功能可以大大提升场景的真实感和视觉效果。
3. 性能优化与调试
虽然Three.js为开发者提供了很多便利，但在创建大型或复杂的三维场景时，性能优化仍然是一个不可忽视的问题。Three.js提供了一些内置的性能优化工具和方法，如场景图优化、纹理压缩、层次细节（LOD）技术等。同时，开发者也需要关注渲染循环中的性能瓶颈，并适时进行调试和优化。幸运的是，Three.js的社区中有很多关于性能优化的讨论和分享，这为开发者提供了宝贵的参考。
4. 跨平台与兼容性
Three.js基于WebGL，而WebGL又得到了现代浏览器的大力支持。这意味着使用Three.js创建的三维场景可以在绝大多数现代浏览器上运行，无需担心兼容性问题。此外，随着Web技术的发展和普及，越来越多的设备和平台开始支持WebGL和Three.js，这为Three.js的跨平台应用提供了广阔的空间。
5. 社区与生态
Three.js拥有庞大的社区和活跃的生态系统。在社区中，你可以找到各种高质量的教程、插件、工具和库，这些资源可以帮助你更快地学习和使用Three.js。同时，社区中的开发者们也非常乐于分享自己的经验和知识，这为你解决遇到的问题提供了有力的支持。
