前端使用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); // 添加事件监听器到窗口对象,以便在用户滚动鼠标滚轮时触发事件处理函数
相关推荐
Wadli3 小时前
C++语法 | static静态|单例模式
开发语言·c++·单例模式
reembarkation3 小时前
使用pdfjs-dist 预览pdf,并添加文本层的实现
前端·javascript·pdf
reembarkation3 小时前
vue-pdf 实现blob数据的预览
javascript·vue.js·pdf
他们都不看好你,偏偏你最不争气4 小时前
【iOS】AFNetworking
开发语言·macos·ios·objective-c
李明卫杭州4 小时前
JavaScript中的dispatchEvent方法详解
javascript
KenXu4 小时前
F2C-PTD工具将需求快速转换为代码实践
前端
Bigemap4 小时前
BigemapPro快速添加历史影像(Arcgis卫星地图历史地图)
java·开发语言
给月亮点灯|4 小时前
Vue3基础知识-setup()、ref()和reactive()
前端·javascript·vue.js
芜青4 小时前
【Vue2手录12】单文件组件SFC
前端·javascript·vue.js
冷冷的菜哥4 小时前
react实现无缝轮播组件
前端·react.js·typescript·前端框架·无缝轮播