three.js 低代码编辑器内核知识分享

已于 2024-09-01 20:28:42 修改
阅读量786 收藏 6
点赞数 12
CC 4.0 BY-SA版权
分类专栏： three.js sdk 低代码 文章标签： 低代码 js 3d
于 2024-06-13 14:13:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guang2586/article/details/139652338
开发历程

开源地址 https://github.com/z2586300277/three-editor

预览查看 https://z2586300277.github.io/three-editor/dist/#/editor

低代码的开发是非常曲折的，尤其是早期根本没有任何参考作品或者 相关的一些知识博客去引领我们去做，会经历多次的推到再到重头再来，又需要开发者有很高的知识储备，举步维艰。
以下是我的一些的功能分布，希望能对你有一些启发，让你少走一些弯路。

1.组件化， 例如目前比较火的3dMap ，可视为一个功能组件
在这里插入图片描述
2. 自带动画 和 环境等功能集成。
在这里插入图片描述
3. 用户自定义配置变换动画。
在这里插入图片描述
4…用户自定义的各种着色器混合扩展。
在这里插入图片描述
5. 天空和环境等通用要素。
在这里插入图片描述
6. 自由绘制创建等功能
在这里插入图片描述
7. 后期处理等功能 集成和 扩展。
在这里插入图片描述

three.js 低代码组态编辑器，百度搜索three 编辑器第一个
2201_75964656的博客
12-11 1051
1. 保留three.js 原生态, 只是将three.js 内部案例功能做了一个集成，并不对底层库改变，只撰写你业务通用的逻辑。 2. 组件化：类似于二维低代码的组件化，three.js 也可以，例如你通过繁琐操作创建了一个三维物体，你将此方法封装起来，下次使用就不用从头写，只需要一些传参就能生成这个物体，一个组件只需要耗费经历写一次，而这个组件代码并不会与其他代码有过多的交集。 3. 高扩展性 你只是做了项目所需要的业务逻辑封装，内部场景的生命周期流程搭建一定要保留three.js 的相关扩展元素
开源的 Three.js 编辑器 组态低代码
2201_75964656的博客
02-19 973
官网：使用 Three.js 编辑器简单编辑。
scene-editor:Three.js编辑器
05-17
场景编辑 Three.js编辑器
three.js 编辑器，three.js 低代码内核搭建
06-12 894
易用性 低代码的创造一定是减少开发者的学习成本，如果让开发者 用了之后发现学习成本更高了，那这个低代码不开发也罢，封装成一个npm 包 对于这来说是一个最好的选择, 开发者使用的时候只需要知道传什么参数，然后能生成什么结果就好，完全不需要去了解内部逻辑。组件化：类似于二维低代码的组件化，three.js 也可以，例如你通过繁琐操作创建了一个三维物体，你将此方法封装起来，下次使用就不用从头写，只需要一些传参就能生成这个物体，一个组件只需要耗费经历写一次，而这个组件代码并不会与其他代码有过多的交集。
Vue3 + Three.js 首款 3D 数字孪生编辑器！正式开源！
最新发布
HUANGXIN9898的博客
07-04 1810
Three-Editor 就是一个专门搞 3D 场景构建的低代码编辑器内核，目的就是把 3D 应用开发的门槛给降下来。它搞了个可视化编辑界面，开发者和设计师用起来可方便了，能轻轻松松地创建、编辑和优化 3D 场景，那些复杂的 3D 编程细节都不用管，搞数字孪生项目效率一下就上去了。说实话，Vue3 + Three.js 这首款 3D 数字孪生编辑器一开源，3D 开发领域直接被改变了。它让开发变得更简单、更高效，还激发了大家更多的创意。首款 3D 数字孪生编辑器一开源，3D 开发领域直接被改变了。
three.js 编辑器，低代码，无代码
06-11 1839
低代码： 实际上例如我们的操作流程用到了很多 class 或者 Function, 又进行封装成了一个 Class,我直接调用这个Class 就可以完成之前的一系列操作，跟我们现在从npm 上下的依赖是一个含义，这样假如别人去使用你的这个Class 或者 Function, 不需要了解你内部的逻辑，只了解你实现了什么怎么用就好了，真正的实现学习和应用的低成本。低代码就是大家例如 大家写代码的时候封装了一个Class 或者一个 Function。
threejs编辑器(3D场景编辑器)
Chou_Junn的博客
06-11 8383
threejs编辑器
Three.js3D场景编辑器
qq_35304110的博客
10-18 3350
一直在公司负责可视化平台的设计研发工作。公司可视化需求的大量增加，又想少开发写代码。就慢慢衍生出了2款编辑器。可视化编辑器，3D场景编辑器。最近把2款编辑器进行了简单的融合。最终达到了以上示例效果。可视化解析器有vue2，vue3。3d场景解析器vue3版本。基于以上编辑器衍生出了。
Three.js编辑器云设计
03-21
引用3是一个低代码编辑器内核的分享，并提供了预览链接；引用4则提到组件化的低代码方法，可能涉及封装Three.js对象。 接下来，我需要整理这些信息，并可能补充一些其他常见的Three.js在线工具。例如，Three.js官方...
从网路冲浪到three.js+cannon.js
通达的博客
06-03 839
网络通信和Web开发中的基础知识点。至今：浏览器继续发展，重点包括性能提升、安全性增强、隐私保护、对新兴Web标准的支持等。Chrome因其快速、安全、丰富的扩展程序而成为市场领导者。未来：随着Web技术的不断进步，浏览器将继续向着更加快速、安全、用户友好的方向发展。新的浏览技术，如WebAssembly和Service Workers，将进一步扩展浏览器的功能。
Three.js 场景编辑器 (Vue3 + TypeScript 实现)
huhuan123456的博客
04-18 2779
因此我决定开发一个基于 Vue3 + TypeScript 的 Three.js 场景编辑器，保留核心功能的同时，提供更友好的开发体验。
three-material-editor:在您精心制作的threejs场景中轻松编辑材料。 相容的香草和React
03-30
三料编辑 GLSL编辑器，用于Threejs材料。 自动检测WebGL程序并为着色器提供实时编辑。 该编辑器可以生成onBeforeCompile函数，并具有一个diff编辑器来分析您的更改。 特征 ： 根据您的修改生成onBeforeCompile函数 差异查看器 处理和记录错误 全屏模式将自动将您的画布嵌入到弹出窗口中 管理共享资料 处理动态场景和网格 GLSL制服自动GUI 根据env变量在生产中自动删除 支持 ： 支持所有类型的后处理（三个/示例/后处理，后处理，react-post后处理） 使用onBeforeCompile的支持材料 支持troika导出素材和troika-3d文本 React和Vanilla版本 支持SSR框架，例如NextJS 快速入门-香草 yarn add -D @three-material-editor/vanilla import {
ThreeJs模型编辑器ShadowEditor-win32-x64.zip
04-07
可导入/导出obj，fbx模型，在线编辑贴图，设置模型展示效果，设置好之后保存导出，引入项目展示！
基于Three.js的一款运行于浏览器三维图编辑器
12-22
基于Three.js的一款运行于浏览器（chrome、Firefox、360）三维图编辑器。本人呕心开发，具备如下功能，且功能仍在进一步完善中。 1、添加立方体、园柱体、球体、半球体、圆锥体等。 2、实现几何体边框的虚实线。 3、鼠标点击选中几何体，用鼠标和键盘在场景中拖拽平移。 4、正视、俯视、侧视整个场景。 5、鼠标旋转场景，各个角度查看。 6、修改几何体材质，包括颜色、透明度等。 7、实现环境光源、点光源的光照效果，可修改点光源强度、角度等。 8、几何体的缩放，包括整体缩放、X、Y、Z各方向的缩放。 9、部件合并功能，可以把几个几何体合并在一起，整体移动、缩放等。
ThreeJSEditorExtension:用于Google Chrome的Three.js编辑器扩展
05-19
用于Google Chrome的Three.js编辑器扩展 Chrome DevTools扩展程序，用于管理任何three.js项目。 的双项目 如何安装 在测试版中，您可以直接从磁盘加载扩展程序： 签出仓库 打开Chrome的“扩展程序”页面（ Settings / More tools / Extensions ） 启用Developer Mode 点击``加载解压后的扩展程序...'' 在检出的项目中选择文件夹/ src 或者，您可以自己打包扩展并通过在扩展页面中删除.crx文件来加载。 如何使用 浏览到包含three.js内容的页面（您可以在或找到许多内容） 打开DevTools 选择Three.js Editor选项卡 该扩展程序需要检测THREE ，因此必须使用被注入的脚本重新加载被检查的选项卡。 点击Reload按钮 如果要开发页面，请确保THREE是全局的
terrain-editor:ThreeJS Terrain编辑器
05-20
三个JS Terrain编辑器 该项目的主要目标是实现一个可以编辑地形（平面几何形状）并绘制多个纹理的系统。 我使用 ，它是Javascript WebGL库。 要求 v14（需要ESM） 入门 克隆后 $ npm i $ npm start 移动 相机 ZQSD移动相机上/下摄​​像机的Shift/Space Middle Mouse Button旋转相机 编辑模式 Tab以更改编辑模式（顶点/平面/纹理） 仅顶点编辑模式有效 顶点编辑 在顶点编辑模式下： 在键盘上高于AZE的1/2/3 ： 1：提高=鼠标左键/降低=鼠标右键2：展平=鼠标左键单击（将您单击的高度的所有点展平）3：平滑=鼠标左键单击
three.js3D模型场景编辑器
ZHANG_666
03-26 1515
three.js为浏览器提供了加载和渲染3d模型文件的功能，也提供了很多针对3d模型参数和效果修改的方法如：模型材质贴图，颜色，金属度，粗糙度，缩放，位置，旋转，动画，阴影，灯光，选中效果等。灵活化的添加模型内容，可通过鼠标拖拽的方式来定义模型的大小，缩放，旋转等属性也可以通过输入框手动调整。目前系统支持（.glb,.obj,.gltf,.fbx,.stl,.usdz）格式的模型导入。2.场景内容，位置，大小，缩放，可见性，阴影，模型材质相关内容可视化编辑修改。6.渲染器，场景，地面，天气等动态修改。
Three.js 大屏低代码
废了
08-28 569
Three.js 大屏低代码
基于threejs 搭建web 3D 简单编辑器
BluePanther的专栏
03-13 3674
<!DOCTYPE html> <html lang="en"> <head> <title>智雨物联</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no,...
Three.js实现的浏览器三维图编辑器功能详解
- js文件可能包含Three.js的库文件引用以及特定于该编辑器的JavaScript代码。 4. Three.js与WebGL的关系 - WebGL是基于OpenGL ES的一个JavaScript API，用于在不需要插件的情况下，在网页浏览器中渲染2D和3D图形...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值