前端使用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); // 添加事件监听器到窗口对象,以便在用户滚动鼠标滚轮时触发事件处理函数
相关推荐
Cachel wood2 分钟前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架
学代码的小前端4 分钟前
0基础学前端-----CSS DAY9
前端·css
Code哈哈笑5 分钟前
【Java 学习】深度剖析Java多态:从向上转型到向下转型,解锁动态绑定的奥秘,让代码更优雅灵活
java·开发语言·学习
joan_858 分钟前
layui表格templet图片渲染--模板字符串和字符串拼接
前端·javascript·layui
程序猿进阶8 分钟前
深入解析 Spring WebFlux:原理与应用
java·开发语言·后端·spring·面试·架构·springboot
qq_4336184411 分钟前
shell 编程(二)
开发语言·bash·shell
charlie11451419125 分钟前
C++ STL CookBook
开发语言·c++·stl·c++20
袁袁袁袁满25 分钟前
100天精通Python(爬虫篇)——第113天:‌爬虫基础模块之urllib详细教程大全
开发语言·爬虫·python·网络爬虫·爬虫实战·urllib·urllib模块教程
还是大剑师兰特31 分钟前
什么是尾调用,使用尾调用有什么好处?
javascript·大剑师·尾调用
ELI_He99932 分钟前
PHP中替换某个包或某个类
开发语言·php