vue开发案例：基于Three.js搭建三维数字化场景

已于 2022-04-23 16:11:16 修改
阅读量1.8k 收藏 5
点赞数
分类专栏： # Three.js # Vue # GLTF 文章标签： vue.js javascript 前端框架
于 2022-03-04 11:09:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34520411/article/details/123271850
版权
Vue 同时被 3 个专栏收录
23 篇文章 5 订阅
订阅专栏
Three.js
8 篇文章 5 订阅
订阅专栏
GLTF
4 篇文章 2 订阅
订阅专栏

0、场景涉及的关键技术点

  • GLTFLoader加载gltf模型，并解析模型动画；
  • 基于worker-loader在vue中使用web worker；
  • 基于web worker动态设置模型（鸟、牛）的移动路线；
  • 基于geotiff.js与DEM生成三维地形场景；
  • threejs中加载geojson生成ShapeGeometry；
  • 使用BufferGeometryLoader加载风机模型，并设置风机动态转动；
  • 基于DataTexture3D生成三维云；
  • 基于Sprites实现树木、草地、向日葵等精灵效果；
  • 基于TextGeometry实现汉字效果；

1、效果示意图

碰碰qaq
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
vrsystem_Three.js:基于Three.js的三维全景漫游项目
05-08
基于Three.js的三维全景漫游demo A Vue.js project 使用方式以及思路 访问地址： 无后台所以保存和发布场景不可用 具体参考: Three.js的官方例子 图形学相关思路参考: 项目具体业务逻辑实现: Three.js 是一个基于WebGL封装的JS库,WebGL绘图API本身支持绘制点(Point),线(line),以及三角形(Triangle) WebGL绘制过程包括以下三步： 1、获取顶点坐标 (三维软件导出,或者框架生成几何体) 2、图元装配（通过投影矩阵将三维世界坐标转换为屏幕坐标,并通过顶点着色器画出一个个三角形） 3、光栅化（通过openGL的片元着色器生成片元(像素)，即三角形中生成一个个像素点） Three.js做了些什么 这幅图,我们可以看到能做的,three.js基本上都帮我们做了: 辅助我们导出了模型数据； 自动生成了各种矩阵； 生成了顶
vue-threejs：Three.js的Vue绑定
02-06
vue-threejs [WIP] 绑定从迁移演示： ， // import VueThreejs from 'vue-threejs' // below 0.2.0import * as VueThreejs from 'vue-threejs' // >= 0.2.0Vue . use ( VueThreejs ) < template> ...
Three.js重建真实地形【教程】
新缸中之脑
07-07 4470
在这个教程中，我们将学习如何搭建一个3D场景，如何编写GLSL程序并使用Vertex Shader和Fragment Shader重建澳洲著名的Ululu巨岩附近的真实地形。为了方便起见，我们将使用Three.js和React来编写本教程中的示例代码。 0、飞行模拟器 你可能知道微软去年8月发布的游戏 Flight Simulator，如果你和我一样对飞行模拟器或在计算机中重建现实生活中场景，可能已经花了很多时间敬畏地注意到这个游戏中的那些惊人的细节。 Terrain in Microsoft Fligh
可视化—“颠覆传统设计：用Three.js创造炫酷的3D交互界面！“
2401_82881178的博客
04-24 987
Three.js是一个开源的JavaScript库，它基于WebGL技术，可以在网页上创建逼真的3D场景和交互式界面。Three.js提供了丰富的API和工具，可以让开发者轻松地创建3D模型、动画、光影、材质等效果，并且可以与其他JavaScript库和框架进行无缝集成，如jQuery、React等。通过使用Three.js，我们可以轻松地创建炫酷的3D可视化交互界面，从而为用户带来更加沉浸式的体验。但是，Three.js也存在一些缺点，例如对于低端设备的兼容性不够好，需要考虑到用户的设备环境和性能要求。
Vue3+ThreeJS的简单使用
无敌暗黑暴龙神的博客
12-21 8759
Vue3中简单使用Three.js,步骤清晰,一看就会
在vue中使用three.js
fackyoufack的博客
10-10 9046
下面我会介绍three.js的基础写法，和在vue中写入three.js的写法。three在vue中使用的时候，用到纹理图片、模型加载不出来的时候的解决办法，在下面会具体体现出来。
threejs生成3d地图所需
思依_vr 的专栏
03-23 5421
threejs生成3d地图所需 1、threejs， 熟悉形状、线绘制，绘制白模楼宇 熟悉sprite，用以做POI标注 熟悉光照 熟悉LOD，用以远近不同时加载不同物体、地面 熟悉漫游控制； 可能用到 正交、透视转换（2d、3d转换） 根据json数据建筑生成算法（白模） 性能优化 three-geo，生成gps 3d地图 threejs实现3d地图案例 threejs实现地图的实践总结 2、地图数据 瓦片计算算法 地形图形json，geojson？threejs+geojson例子 经纬度数据与世
运用threejs渲染地形
白菜博客
09-25 502
使用threejs渲染地形；
vue3引入threeJs
weixin_43339378的博客
01-05 1267
测试了一下引入threeJs的这个demo是可以的。
Vue.js开发实战：基于Vue.js的电商产品列表页的实验心得与案例解析
最新发布
05-08
开发一个基于Vue.js的电商产品列表页，该页面展示商品信息，并提供筛选、排序和分页功能。Vue.js鼓励组件化开发，通过将页面拆分为多个可复用的组件，不仅提高了代码的可维护性，也促进了团队协作。Vue.js的响应式...
Vue项目中使用Three.js开发三维IT机房
03-07
本实例使用threejs+vue,实现三维IT机房可以将机房数据可视化，让企业更好的监控和管理 IT 机柜，在前端页面对 IT 机房进行三维展示，当鼠标划入IT 机柜的时候，提示当前机柜的详细信息，一键显示机房中过热的机柜，...
threejs-dem-visualizer:使用 THREE.js 可视化 ASTER 和 LANDSAT 卫星数据
08-04
Threejs-dem-visualizer Medium 上的详细解释： 特征 ： DEM（数字高程模型）和卫星图像数据从下载 使用 ASTER 和 LANDSAT 卫星的数据。 使用 QGIS 生成的 Geotiff 文件 安装 git clone git@github.com:zhunor/threejs-dem-visualizer.git cd threejs-dem-visualizer yarn install 用法 生成所有 js/css 包 yarn build 发展 yarn start 转到localhost:8080以查看您的项目！ 学分 代码框架建立在项目上。 我添加了一些用于加载的 css，因为读取 geotiff 文件需要时间。 如果您在构建时遇到问题，请最好遵循原始说明。 和 [mapmasters] ( ) 的演示对于理解 DEM 到th
Vue2.0+ThreeJs写的一个3D粮仓管理系统源码.zip
05-08
Vue2.0+ThreeJs写的一个3D粮仓管理系统源码，该项目基于ThreeJs+Vue2.0+Vue-Element+Admin实现了3D粮仓管理系统。 Vue2.0+ThreeJs写的一个3D粮仓管理系统源码，该项目基于ThreeJs+Vue2.0+Vue-Element+Admin实现了3D粮仓管理系统。 Vue2.0+ThreeJs写的一个3D粮仓管理系统源码，该项目基于ThreeJs+Vue2.0+Vue-Element+Admin实现了3D粮仓管理系统。 Vue2.0+ThreeJs写的一个3D粮仓管理系统源码，该项目基于ThreeJs+Vue2.0+Vue-Element+Admin实现了3D粮仓管理系统。 Vue2.0+ThreeJs写的一个3D粮仓管理系统源码，该项目基于ThreeJs+Vue2.0+Vue-Element+Admin实现了3D粮仓管理系统。 Vue2.0+ThreeJs写的一个3D粮仓管理系统源码，该项目基于ThreeJs+Vue2.0+Vue-Element+Admin实现了3D粮仓管理系统。
threejs一些示例及源码,包括智慧城市.粮仓,浮雕,下雨,三维地球....
04-28
threejs一些示例及源码,包括智慧城市.粮仓,浮雕,下雨,三维地球....
material-editor:基于Three.js，WebGL和Vue.js的材质和着色器编辑器
05-18
物质编辑 基于Three.js，WebGL和Vue.js的材质和着色器编辑器
Vue3中threejs模型缩略图生成的简单实现
qq_52013792的博客
12-01 1399
三维模型由于其需要将模型的每个面与边进行渲染，往往会出现打开模型十分缓慢的问题。那么这问题该如何解决呢，最简单粗暴的方法当然是对模型载入不断的进行优化，但是优化往往是最困难的。从另一方面想，让用户精准的打开自己需要的模型，是不是也能一定程度的缓解该问题呢？所以实现三维模型的缩略图是很有必要的。
最详细的Vue3+ThreeJS开发打包支持WebGL的移动端App教程
BayMin0-0的博客
11-15 6892
最详细的Vue3+ThreeJS开发项目打包支持WebGL渲染的移动端App教程 最近公司的项目里要求开发一款具有三维应用的App项目,本来对于以前从未开发过支持三维APP前端程序员来说无疑是个挑战但既然有了这样的需求那就欣然地接受下来并扛在肩上,于是就开始大肆地收集了过往老前辈们此种开发的记录加之以个人不断踩坑,终于上天不负有心人按时完成了产品经理的这一系列需求,赶时周末作此记录来供后来者参考少踩点坑,若有描述不当之处敬请谅解与指出,谢谢 打包方法一:Vue3项目采用Cordova集成crosswalk插
[原]three.js 地形纹理混合
weixin_30245867的博客
09-17 493
地形生成通常使用高度图， 而高度图的生成可以使用绘图工具，或者通过分形算法生成，例如square-diamond, fbm方法。 这里采用简单求平均值+随机波动的方法。 对于一个2^n+1 * 2^n+1 的网格， 中心点的高度是四角点的平均值加随机偏移， 边上中点的高度值是边两端点的平均值加随机偏移。 接着将偏移的幅度缩小， 计算四个较...
Cesium加载建筑物模型（shp转Geojson\3Dtiles）
热门推荐
feixiegis的博客
08-09 1万+
本文主要介绍cesium加载Geojson和3dtile格式的建筑物模型文件，除此之外还介绍了Cesium工具栏的屏蔽方法、天地图的加载、地球初始状态设置等几个部分的内容，其中又不乏参照、优化诸如：想成为大神的前端王菜鸟、loves小鱼儿、Alice爱俪丝等大神作品的内容，在此表示感谢，他们的文章地址分别如下： https://blog.csdn.net/ww...
vue.esm.js:5105 [Vue warn]: data functions should return an object: https://v2.vuejs.org/v2/guide/components.html#data-Must-Be-a-Function found in ---> <ShouYe> at src/components/ShouYe.vue <App> at src/App.vue <Root> warn$2 @ vue.esm.js:5105 initData @ vue.esm.js:4385 initState @ vue.esm.js:4322 Vue._init @ vue.esm.js:4711 VueComponent @ vue.esm.js:5836 createComponentInstanceForVnode @ vue.esm.js:5044 init @ vue.esm.js:4906 merged @ vue.esm.js:5061 createComponent @ vue.esm.js:6578 createElm @ vue.esm.js:6532 createChildren @ vue.esm.js:6651 createElm @ vue.esm.js:6555 patch @ vue.esm.js:7082 Vue._update @ vue.esm.js:2870 updateComponent @ vue.esm.js:2980 Watcher.get @ vue.esm.js:4164 Watcher @ vue.esm.js:4154 mountComponent @ vue.esm.js:2997 Vue.$mount @ vue.esm.js:9312 Vue.$mount @ vue.esm.js:11877 init @ vue.esm.js:4907 createComponent @ vue.esm.js:6578 createElm @ vue.esm.js:6532 patch @ vue.esm.js:7120 Vue._update @ vue.esm.js:2870 updateComponent @ vue.esm.js:2980 Watcher.get @ vue.esm.js:4164 Watcher @ vue.esm.js:4154 mountComponent @ vue.esm.js:2997 Vue.$mount @ vue.esm.js:9312 Vue.$mount @ vue.esm.js:11877 Vue._init @ vue.esm.js:4721 Vue @ vue.esm.js:5772 eval @ main.js:14 ./src/main.js @ app.js:2520 __webpack_require__ @ app.js:679 fn @ app.js:89 0 @ app.js:2537 __webpack_require__ @ app.js:679 (anonymous) @ app.js:725 (anonymous) @ app.js:728
06-07
这个警告表示，在定义 Vue 组件时，data 选项应该是一个函数而不是一个对象。Vue 的官方文档说明，每个组件的 data 必须是一个函数，返回一个对象，而不是一个对象本身。这是为了确保每个组件实例都有一个独立的数据对象，而不是共享同一个数据对象。 解决方法是将 data 选项改成一个函数，例如： ```javascript export default { name: 'ShouYe', data() { return { // your data properties } } } ``` 这样就能避免这个警告了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

碰碰qaq

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值