首页 > 其他分享 >Three.js 实现原生化组态化 低代码 封装适用与 企业项目使用的编辑器

Three.js 实现原生化组态化 低代码 封装适用与 企业项目使用的编辑器

时间:2024-11-10 15:45:04浏览次数:3  
标签:封装 代码 three js Three 开发者 组件 组态

开发历程

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

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

Three.js 案例学习 https://threehub.cn/

在这里插入图片描述

保留three.js 原生态, 只是将three.js 内部案例功能做了一个集成,并不对底层库改变,只撰写你业务通用的逻辑。

组件化:类似于二维低代码的组件化,three.js 也可以,例如你通过繁琐操作创建了一个三维物体,你将此方法封装起来,下次使用就不用从头写,只需要一些传参就能生成这个物体,一个组件只需要耗费经历写一次,而这个组件代码并不会与其他代码有过多的交集。

高扩展性 你只是做了项目所需要的业务逻辑封装,内部场景的生命周期流程搭建一定要保留three.js 的相关扩展元素, 如 后期处理系列, 着色器系列等,或者使用者自身去扩展系列。

创造理念, 一定不是直接就从树苗长成参天大树,而是搭建了一个健康的生长体系,让使用者去搭建成一个家园。

易用性 低代码的创造一定是减少开发者的学习成本,如果让开发者 用了之后发现学习成本更高了,那这个低代码不开发也罢,封装成一个npm 包 对于这来说是一个最好的选择, 开发者使用的时候只需要知道传什么参数,然后能生成什么结果就好,完全不需要去了解内部逻辑。

通用性 一定要和以外的斩断联系,例如 vue react, 把思想放到js 上 , 这样你创造的 才会是 轻量,通用, 高效的也会避免一些问题,可以多去看看 node_modules 的每一个依赖都是如何创造的,去获取这种理念。

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

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

标签:封装,代码,three,js,Three,开发者,组件,组态
From: https://blog.csdn.net/guang2586/article/details/143661764

相关文章

  • Nodejs安装配置
    Nodejs安装配置安装:官方地址点击跳转:Node.js—在任何地方运行JavaScript安装到D盘(C盘外)Next即可配置在安装目录下,新建node_cachenode_global两个文件夹添加到环境变量:可以不用%NODE_HOME%的方式,添加直接添加D:\nodejs\node_cacheD:\nodejs\node_gl......
  • 【JS】如何设置一个只读属性
    1.Object.defineProperty通过属性描述符将属性设置为不可修改constobj={};Object.defineProperty(obj,'name',{value:'John',writable:false,//不允许修改该属性configurable:true,//允许删除或修改属性描述符});console.log(obj.name);//输......
  • node.js毕设网上书店系统设计与实现(程序+论文)
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容选题背景关于网上书店系统设计与实现的研究,现有研究主要集中在电子商务平台的设计、用户体验优化、服务效果评估等方面。然而,专门针对网上书店系统设计与实现的研究......
  • jsonargparse python cli 开发库
    jsonargparse是一个pythoncli库,尽管不如其他库火(click)目前Lightningcli就使用了此库包含的特性自动创建cli类似Fire,typer,Clize以及Tyro支持类型校验支持通过配置文件或者环境变量的配置解析(集成confuse,configargparse,dynaconf,omegaconf)dataclass支持说明jsonargpa......
  • 华为OD机试2024年E卷-MVP争夺战[100分]( Java | Python3 | C++ | C语言 | JsNode | Go
    题目描述在星球争霸篮球赛对抗赛中,最大的宇宙战队希望每个人都能拿到MVP,MVP的条件是单场最高分得分获得者。可以并列所以宇宙战队决定在比赛中尽可能让更多队员上场,并且让所有得分的选手得分都相同,然而比赛过程中的每1分钟的得分都只能由某一个人包揽。输入描述输入第一行......
  • 华为OD机试2024年E卷-AI识别面板[100分]( Java | Python3 | C++ | C语言 | JsNode | Go
    题目描述AI识别到面板上有N(1≤N≤100)个指示灯,灯大小一样,任意两个之间无重叠。由于AI识别误差,每次别到的指示灯位置可能有差异,以4个坐标值描述AI识别的指示灯的大小和位置(左上角x1,y1,右下角x2,y2),请输出先行后列排序的指示灯的编号,排序规则:每次在尚未排序的灯中挑选最高的......
  • JSP程序设计2577互联网在线医疗诊断系统【源码+讲解视频】
    项目包含:源码、参考论文、讲解视频、说明文档运行环境:推荐jdk1.8开发工具:Eclipse、MyEclipe以及idea(推荐)操作系统:windows108G内存以上(其他windows)浏览器:GoogleChrome(推荐)、Edge、360浏览器;数据库:MySQL5.7;数据库可视化工具:NavicatPremium推荐)以及其他Navicat版......
  • node.js毕设网络课程管理系统(程序+论文)
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景随着信息技术的飞速发展,网络教育逐渐成为教育领域的重要组成部分。关于网络课程管理系统的研究,现有研究主要以通用性的在线教育平台功能为主,专门针对毕......
  • node.js毕设试卷生成器(程序+论文)
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景在现代教育体系中,考试作为一种重要的评估手段,广泛应用于各类教育机构。关于试卷生成器的研究,现有研究主要集中在通用性试卷生成系统的开发和应用上,专门......
  • 如何在 Ubuntu 18.04 上为生产环境设置 Node.js 应用程序
    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。简介Node.js是一个用于构建服务器端和网络应用程序的开源JavaScript运行环境。该平台可在Linux、macOS、FreeBSD和Windows上运行。虽然你可以在命令行上运行Node.j......