前端使用three.js来绘制三维图形

最近项目中在地图中显示三维河床的功能，最终实现是用three.js来实现绘制的。这里记录一下整体的调用过程。

一：安装 Three.js

Three.js 是一个强大的 JavaScript 库，用于在网页上创建和显示 3D 图形。如果你在使用一个前端框架，例如 Vue 或 React，你可以使用相应的库，例如 vue-threejs 或 react-three-fiber

作者这里用的vue3的框架

直接上命令，npm安装或者pnpm进行安装。

javascript 复制代码

npm install three

如果是其他也可以标签直接引入three.js的js文件。

地址：http://www.webgl3d.cn/

二：创建基础场景

Three.js 允许你以各种方式创建 3D 场景。下面是一个基本的示例，创建一个场景、一个相机和一个渲染器：

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 提供了一系列基础几何体，例如立方体、球体和圆锥体。下面代码是如何创建一个立方体的示例：

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); // 将立方体添加到场景中

四：渲染循环

javascript 复制代码

function animate() {  
  requestAnimationFrame(animate); // 请求下一帧动画  
  cube.rotation.x += 0.01; // 旋转立方体  
  cube.rotation.y += 0.01;  
  renderer.render(scene, camera); // 渲染场景和相机视图到屏幕上  
}  
animate(); // 开始动画循环

五：处理用户输入

三维场景肯定也要缩放旋转等，下面是一个处理鼠标滚轮事件的示例：

javascript 复制代码

function onDocumentScroll(event) {  
  camera.position.z -= event.deltaY * 0.01; // 根据鼠标滚轮的滚动方向移动相机位置，模拟缩放效果  
}  
window.addEventListener('wheel', onDocumentScroll); // 添加事件监听器到窗口对象，以便在用户滚动鼠标滚轮时触发事件处理函数