前端使用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); // 添加事件监听器到窗口对象,以便在用户滚动鼠标滚轮时触发事件处理函数
相关推荐
程序员爱钓鱼8 分钟前
Go语言中的反射机制 — 元编程技巧与注意事项
前端·后端·go
为了更好的明天而战23 分钟前
Java 中的 ArrayList 和 LinkedList 区别详解(源码级理解)
java·开发语言
GIS之路29 分钟前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化
just小千32 分钟前
重学React(二):添加交互
javascript·react.js·交互
烛阴37 分钟前
一文搞懂 Python 闭包:让你的代码瞬间“高级”起来!
前端·python
AA-代码批发V哥41 分钟前
HTML之表单结构全解析
前端·html
JosieBook1 小时前
【Java编程动手学】Java中的数组与集合
java·开发语言·python
qq_589568101 小时前
element-plus按需自动导入的配置 以及icon图标不显示的问题解决
开发语言·javascript·ecmascript
聪聪的学习笔记1 小时前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js
小磊哥er1 小时前
【前端工程化】你知道前端编码规范包含哪些内容吗
前端