Web3D编辑器-使用THREE.JS+Vuejs打造大屏可视化快速搭建工具/BI/WEB3D/可视化平台/编辑平台/大数据可视化工具

置顶 已于 2022-02-07 11:41:16 修改
阅读量1.1w 收藏 49
点赞数 19
分类专栏： javascript 可视化 THREE 文章标签： javascript vue.js three.js
于 2021-01-06 17:40:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29814417/article/details/112286549
版权
THREE 同时被 3 个专栏收录
39 篇文章 38 订阅
订阅专栏
可视化
27 篇文章 15 订阅
订阅专栏
javascript
9 篇文章 0 订阅
订阅专栏

WEB-3D编辑器

目前支持：效果组件联动，物体设置，事件联动、导入导出、引入vuejs模板；
待做：场景设置，特效组件，物体效果设置（烘培贴图， 特效，shader效果等），视角镜头动画，模型动画，事件与前端联动，前端组件及联动，work，websoket，接入后台；
支持2D+3D可视化组件拖入，构建大数据可视化平台，与后台数据进行联动。
支持讨论qq：674656681
QQ群:1082834010
DEMO
代码地址 请给一个star

编辑器

在这里插入图片描述

加载模型

材质修改

在这里插入图片描述

定制组件拖入

定制化组件添加，通过数据拉起城市，地图等。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

效果添加

在这里插入图片描述

在这里插入图片描述

管理已添加效果

在这里插入图片描述

一键导入

导入自动根据路径找到模型，并且加载相关组件和效果
在这里插入图片描述

一键导出JSON配置

在这里插入图片描述

拖入平面组件

在这里插入图片描述

代码注入。可注入vue模板，与页面联动。

vue回调可以获取当前页面绑定的数据，以及事件联动
在这里插入图片描述

在这里插入图片描述

vue3+threeJs实现可视化大屏展示
jenesBangBang的博客
07-16 398
这里主要讲tween.js的作用，为了让视角切换不那么生硬，所以使用了tween.js进行动画过渡，除了通过事件进行切换视角，还有初始化加载的时候也可以有个过渡动画效果，看起来更炫酷。直接在初始化的时候也调用switchView方法。tween.js（用于动画过渡）
Vue3数据大屏 ThreeJS 3D模型加载与展示实践
weixin_42070282的博客
10-21 676
通过本文的实践步骤，我们成功地在Vue3项目中集成了ThreeJS，并加载了gltf格式的3D模型。结合Vue3的响应式机制和ThreeJS的强大3D渲染能力，我们可以创建出具有生动、立体展示效果的数据大屏。在mounted钩子函数中调用loadScene方法，将3D模型加载到场景中，并设置OrbitControls以实现模型的旋转、缩放和平移操作。本文将介绍如何在Vue3项目中集成ThreeJS，并加载外部gltf格式的3D模型，以打造更具视觉冲击力和立体感的数据大屏展示。// 省略了部分代码…
Shadow Editor：基于Three.js的强大3D场景编辑器
gitblog_00017的博客
10-10 994
Shadow Editor：基于Three.js的强大3D场景编辑器 项目地址:https://gitcode.com/gh_mirrors/sh/ShadowEditor 项目介绍 Shadow Editor 是一款基于 Three.js、Go 语言和 MongoDB 的跨平台 3D 场景编辑器。它不仅支持 Windows、Linux 和 Mac 操作系统，还提供了桌面版和 Web 版两种使用方...
基于vue3+threejs实现可视化大屏
2401_83384536的博客
06-30 2288
Three.js是一款基于原生WebGL封装通用Web 3D引擎，在小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域基本上都有three.js的身影。本文需要对 threejs 的一些基本概念和 api 有一定了解。如果对 threejs 这部分还不了解的可以看下官方文档和一些中文文档进行学习。官方文档地址：threejs.org/中文文档地址：www.webgl3d.cn/pages/aac9a…
基于vue3+threejs实现三维可视化大屏
09-04
项目，包含了一些常用的功能，场景、灯光、摄像机初始化，模型、天空盒的加载，以及鼠标点击和悬浮的事件交互。 cnpm/npm install 下载依赖 npm run dev  启动项目后就可以运行了。
3D编辑器-Web在线编辑基于WebGL/Threejs技术
热门推荐
ALLENJIAO的专栏
11-20 2万+
在线场景编辑器 3D场景在线编辑器，可导出工程、场景、物体或几何体等。 内置多种几何体、光源，场景支持雾效、影子、反光等。 支持导入多种不同格式的3D模型（json、obj、stl、dae等)。 可视化修改场景、相机、几何体、材质、纹理等属性。 应用不同项目场景机房、大楼、园区、设备、器材等 更多细节和功能改进后续赘述，感兴趣的可以留言或发邮件1985692469...
Web端免费开源三维场景编辑器Shadow Editor v0.0.7
10-10
名称：Shadow Editor 版本：v0.0.7（开发中） 说明：基于three.js的免费开源场景编辑器。 源码：https://github.com/tengge1/ShadowEditor 功能： 1. 3D场景在线编辑。 2. 内置多种几何体、光源，场景支持雾效、影子、反光、背景图片等。 3. 支持导入多种不同格式的3D模型。 4. 服务端使用MongoDB保存模型和场景数据。 5. 可视化修改场景、相机、几何体、材质、音频播放器、粒子发射器等属性。 6. js脚本、着色器脚本在线编辑，带智能提示。 7. 自带播放器，实时演示场景动态效果。 8. 支持补间动画、骨骼动画、粒子动画，支持mmd动画，支持lmesh动画。
Web3D编辑器-使用THREE.JS+Vuejs打造大屏可视化快速搭建工具/W3D/BI/WEB3D/可视化平台/编辑平台/大数据可视化工具 -功能持续开发中
stonerao
03-10 6708
WEB-3D编辑器（持续开发中) 目前支持：效果组件联动，物体设置，事件联动、导入导出、引入vuejs模板； 待做：场景设置，特效组件，物体效果设置（烘培贴图， 特效，shader效果等），视角镜头动画，模型动画，事件与前端联动，前端组件及联动，work，websoket，接入后台； 支持2D+3D可视化组件拖入，构建大数据可视化平台，与后台数据进行联动。 支持讨论qq：674656681 QQ群:1082834010 DEMO 编辑器 加载模型 材质修改 定制组件拖入 定制化组件添加，通过数据拉起城
vue基于threejs实现的3D可视化编辑器
CodingNoob
07-16 9006
随着5G网络的渐渐普及，物联网在人们的生活中渐渐广泛使用，社会向着越来越智能化的方向发展。当康科技经过不懈努力，研发属于自己的一款3D可视化编辑器，助力企业应用实现3D可视化服务。......
Web在线3D编辑器-全场景编辑全新功能升级
ALLENJIAO的专栏
01-10 8314
在线编辑器采用了在线互动三维引擎技术，为用户提供了快速场景搭建能力， 使用户得以零基础、低门槛、低成本地在数字化世界中，搭建一个真实世界的仿真场景。
Three.js3D场景编辑器
qq_35304110的博客
10-18 2570
一直在公司负责可视化平台的设计研发工作。公司可视化需求的大量增加，又想少开发写代码。就慢慢衍生出了2款编辑器。可视化编辑器，3D场景编辑器。最近把2款编辑器进行了简单的融合。最终达到了以上示例效果。可视化解析器有vue2，vue3。3d场景解析器vue3版本。基于以上编辑器衍生出了。
three.js 可视化大屏 3D场馆模型Demo
02-26
在本项目中，"three.js 可视化大屏 3D场馆模型Demo"是一个基于最新前端技术栈的实现，旨在帮助新手学习如何利用three.js创建3D场馆模型，并将其应用于大屏幕展示。这个项目结合了Vue3、Vite和TypeScript等现代Web...
智慧城市+数字大屏+Vue+Three.js + 3D可视化 + 数字楼宇
07-01
本项目是一个数字楼宇大屏项目，对每个楼层都可做到3D可视化，项目使用vue+three.js 值接npm install npm run 可以直接运行，本项目有能源预警、视频监控、消防等数据展示可轻松对接。
地图Web3D可视化-WebGL、Three.js
05-09
课程分享——地图Web3D可视化-WebGL、Three.js，附源码 课程概述 - 本课程讲解如何在web上实现地图3D可视化 - 学习本课程有前端基础即可，如果了解three.js更好 适用人群 有前端基础，想基于Web实现地图数据的3D...
Three.js-webgl物联网粮仓3D可视化
03-12
本项目名为"Three.js-webgl物联网粮仓3D可视化"，是基于WebGL技术的3D可视化管理系统，利用了Three.js库以及Vue.js框架，旨在实现对粮仓的高效管理和监控。通过JavaScript语言进行编程，结合物联网技术，该系统能够...
基于-Three.js-的仓库可视化管理系统源码（优质项目）.zip
04-22
基于-Three.js-的仓库可视化管理系统源码+数据库.zip【项目资源】：基于 Three.js 的仓库可视化管理系统是一个利用 Three.js 这一强大的 JavaScript 3D 库来创建和管理仓库数据的系统。Three.js 允许开发者在网页上...
vue3打造大屏可视化项目,包含全屏适配方案和ThreeJS 3D模型加载与展示实践
最新发布
wlor的博客
10-22 254
/</width;height;overflow;</通过本文的实践步骤，我们成功在Vue3项目中集成了ThreeJS，并加载了gltf格式的3D模型。借助Vue3的响应式机制和ThreeJS强大的3D渲染能力，我们可以创建出生动、立体的数据展示大屏。这不仅提升了数据的可读性，也增强了用户的交互体验。
three.js+vue实现酷炫三维地图web3d大屏可视化GIS地图
dengjiexs8的专栏
06-22 2023
基于three.js+vue，实现酷炫三维地图web3d大屏可视化GIS地图
webglstudio.js：浏览器中的完整开源3D图形编辑器，包括场景编辑器，编码板，图形编辑器，虚拟文件​​系统以及许多其他功能
01-28
WEBGLSTUDIO正在迁移到新的REPO。 保持沉默 WebGLStudio.js WebGLStudio.js是一个基于浏览器的开源3D图形套件。 您可以使用标准Web技术在浏览器中编辑场景和材质，设计效果和着色器，代码行为并共享您的工作。 WebGLStudio.js的一些重要功能： 完整的3D图形引擎（ ），支持多种光照，，实时反射，自定义材质，postFX，蒙皮，动画等。 一个易于扩展的基于组件的系统，用于控制渲染管道和交互事件挂钩 简单易用，所见即所得（WYSIWYG）编辑器为所有编码，图形合成和时间轴功能提供了一个界面。 使用来控制行为，着色器和后处理效果的图形编辑器。 支持 ，这是一个虚拟文件系统，允许在Web上拖放资源以及可配置的配额，用户和共享文件夹。 通过发送单个链接导出并共享您的工作。 有关更多信息，请访问 功能缺失： 网格编辑，您不能选择面并移动它们 对FBX的支持，它具有某种支持，但功能不完全 物理 正在安装 要安装WebGLStudio.js，请将编辑器文件复制到服务器，然后将安装到editor/目录中的fileserver/文件夹
[web3d] | 示例代码编辑器
啊嘞嘞的博客
04-30 1188
之前做的一些示例只能看看没有在线编辑的功能，重新整理弄一个示例编辑器，后续完善一下发布。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

菜鸡饶

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

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

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

打赏作者

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

抵扣说明：

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

余额充值