前端使用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); // 添加事件监听器到窗口对象,以便在用户滚动鼠标滚轮时触发事件处理函数
相关推荐
DES 仿真实践家1 小时前
【Day 11-N22】Python类(3)——Python的继承性、多继承、方法重写
开发语言·笔记·python
Code Warrior2 小时前
【每日算法】专题五_位运算
开发语言·c++
孤水寒月4 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
沐知全栈开发4 小时前
HTML DOM 访问
开发语言
祝余呀4 小时前
html初学者第一天
前端·html
脑袋大大的5 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
二进制person6 小时前
Java SE--方法的使用
java·开发语言·算法
速易达网络6 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
OneQ6666 小时前
C++讲解---创建日期类
开发语言·c++·算法
耶啵奶膘6 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app