基于WebGL的在线3D建模与互动脚本开发系统 ThingJS

简介: ThingJS编辑界面布局3D建模与场景搭建方法交互控制脚本开发关键点

三维可视化##3D开发

ThingJS编辑界面布局
3D建模与场景搭建方法
交互控制脚本开发关键点
image.png

ThingJS平台基于 Web GL中的3D框架进行3D开发,界面设计采用HTML5,系统脚本采用 JavaScript。完整的平台系统包含七大模块:3D场景搭建、模型操作、模型导入、模型导出、场景渲染、压缩与解压、信息存储与显示。

各模块独立又紧密联系,核心的核心主要是3D建模与场景搭建、交互控制开发,ThingJS本着加速3D项目开发的原则,做了间接的封装,拥有自己的平台特色。

ThingJS编辑界面布局

平台只有一个主界面,分为三个区域:在线开发工具栏、3D编辑器及3D场景渲染区域。场景渲染区域为用于实时渲染整个场景的3D数据,同时用户也可以在这上面进行鼠标交互操作,例如缩放、旋转、平移等;在线开发工具栏区域提供官方示例及用户创建并保存的项目;3D编辑器区域展示了打开的项目或文件的内容,包含对象列表、几何信息、材质信息等,同时,用户可以通过编辑修改这些信息来改变对象的材质或属性等。
image.png

3D场景所需要的基本要素包括渲染器、场景、相机、灯光、物体,ThingJS 3D引擎都已经封装成js库,不需要再造轮子,当然,缺少其中某一样都不能构成一个完整的3D场景。

下面就来谈谈3D场景创建、脚本开发构建的过程,分成3D建模、交互控制两部分。

1. 3D建模与场景搭建

渲染方式

ThingJS平台提供两种渲染方式,即 WebGLRenderer及 CanvasRenderer。两者的渲染比较,从图中可以看出 WebGLRendere的3D渲染效果更真实生动,可以充分表现场景的细节与材质特性,但它对硬件性能和显卡有要求。相反地,CanvasRenderer则具有更好的兼容性,且没有锯齿,能够适用于更多的设备。

很显然,如果你的设备支持 WebGL,那么 WebGLRenderer渲染器具有比 Canvas Renderer更好的性能。ThingJS支持用Canvas进行2D面板内的贴图绘制。在合理范围内选择高效率、低成本的实现方案,这是平台宗旨。
image.png

基础几何体

有了场景,我们就可以添加物体对象了。ThingJS 3D引擎提供多种基础几何体对象,供用户选择创建于场景中,包括平面、圆形、立方体、圆柱体、球体、多面体等,如图所示。直接JavaScript调用代码创建,用户可以通过修改其参数来改变几何体的形状,物体参数可分为通用参数、特定物体类型(type)的专属参数、系统其他功能。列表如下:
image.png

(1)通用参数
type:该物体用什么物体类来创建
id:该物体的编号
name:物体的名字
position:设置世界位置
localPosition:设置在父物体下的相对位置,和 position 只能输入一个
angles:设置世界坐标系下三轴旋转角度,例如:angles:[90,45,90] ,代表在世界坐标系下物体沿X轴旋转90度,沿Y轴旋转45度,沿Z轴旋转90度
scale:设置相对自身坐标系下的缩放比例
parent:设置父物体是谁

(2)特定物体类型(type)的专属参数
url :物体模型资源路径,这个是 “Thing” 物体需要的参数

(3)系统其他功能
complete:初始化完成后的函数回调

外部模型

使用ThingJS创建常见几何体是十分方便的,非常复杂的模型会用3DSMAX软件制作。

ThingJS允许用户导入由3DMax、 blender等工具制作的三维模型,并在CampusBuilder里添加到场景中。支持导入的格式包括:obj、mtl、dae、.wrl、vtk、stl等【官方文件格式列表】。ThingJS导入外部模型文件需要3D插件,官网资源中心提供免费下载。

材质设置

有些精模在3DSMAX制作,加载的时候不带材质,那是因为没有同步加载模型的材质文件,从3DSMAX中导出模型的材质文件port.mtl即可。

在ThingJS中,模型材质创建与定义可以有两种方式,一种是在建模软件绘制好材质然后导出材质文件,利用CampusBuilder搭建3D场景,直接在建筑外立面添加贴图,自动生成材质的参数,截图如下。
image.png

另一种是在模型导入场景之后通过代码创建或设置材质。平台内直接JavaScript调用3D源码,引入图片URL进行贴图。

var imgUrl = 'https://www.thingjs.com/static/images/monitorPanel3.png'。

2. 交互控制脚本开发

虚拟漫游

ThingJS中提供了多种用于漫游的控制器,包括Track BallControls、 FlyControls RollControls、 OrbitControls、 FirstPersonContro、 PathControls。
FirstPersonControls (第一人称控件) 常用于物联网3D可视化领域的漫游场景。它的行为类似于第一人称射击游戏中的相机,用键盘移动或用鼠标转动,
image.png

对象拾取

3D场景的一个重要的用户交互技术是对象拾取,即3D场景中的对象选择。

一般系统的输入设备是一个2D鼠标。用户实际单击的是在其中渲染3D场景的画布。因为当用户围绕场景运动时,渲染会发生变化,必须将鼠标的2D坐标在单击时动态地映射到场景的三维坐标空间,以确定哪些对象被选中。

ThingJS的拾取分两种操作方式,一是通过属性和接口获取鼠标拾取(Pick)的物体,当鼠标在一个物体上悬停时,我们经常希望做一些操作,比如变色等。可以使用 Picker 类来获取鼠标拾取(Pick)的物体,通过 app.picker 得到 Picker 类来实现这个功能;二是通过事件获取鼠标拾取的物体。可以通过 MouseEnter 和 MouseLeave 来实现 。

平移、旋转与缩放

在三维空间坐标中,对象的平移变换是最简单的变换,其变换原理是在初始位置点坐标基础上加上一个平移的向量;相对而言,对象的旋转变换比较复杂,其变换原理是变换后点坐标等于初始位置点坐标乘以一个变换矩阵,绕指定的任意轴旋转变换就是由几个绕坐标轴旋转变换和平移变换效果叠加而成的。同样的,对象的缩放变换的原理为初始位置点坐标乘以一个变换矩阵。

在ThingJS中,控制对象的平移、旋转及缩放是比较容易实现的,分别对应translate, rotation, scale这三个属性。 ThingJS中封装了一个工具类,可以直接用来进行平移、旋转和缩放操作。
官网注册获取 3D demo

image.png

相关文章
|
5月前
|
图形学 开发者 搜索推荐
Unity Asset Store资源大解密:自制与现成素材的优劣对比分析,教你如何巧用海量资产加速游戏开发进度
【8月更文挑战第31天】游戏开发充满挑战,尤其对独立开发者或小团队而言。Unity Asset Store 提供了丰富的资源库,涵盖美术、模板、音频和脚本等,能显著加快开发进度。自制资源虽具个性化,但耗时长且需专业技能;而 Asset Store 的资源经官方审核,质量可靠,可大幅缩短开发周期,使开发者更专注于核心玩法。然而,使用第三方资源需注意版权问题,且可能需调整以适应特定需求。总体而言,合理利用 Asset Store 能显著提升开发效率和项目质量。
130 0
|
6月前
|
开发者 图形学 API
从零起步,深度揭秘:运用Unity引擎及网络编程技术,一步步搭建属于你的实时多人在线对战游戏平台——详尽指南与实战代码解析,带你轻松掌握网络化游戏开发的核心要领与最佳实践路径
【8月更文挑战第31天】构建实时多人对战平台是技术与创意的结合。本文使用成熟的Unity游戏开发引擎,从零开始指导读者搭建简单的实时对战平台。内容涵盖网络架构设计、Unity网络API应用及客户端与服务器通信。首先,创建新项目并选择适合多人游戏的模板,使用推荐的网络传输层。接着,定义基本玩法,如2D多人射击游戏,创建角色预制件并添加Rigidbody2D组件。然后,引入网络身份组件以同步对象状态。通过示例代码展示玩家控制逻辑,包括移动和发射子弹功能。最后,设置服务器端逻辑,处理客户端连接和断开。本文帮助读者掌握构建Unity多人对战平台的核心知识,为进一步开发打下基础。
226 0
|
6月前
|
开发者 图形学 iOS开发
掌握Unity的跨平台部署与发布秘籍,让你的游戏作品在多个平台上大放异彩——从基础设置到高级优化,深入解析一站式游戏开发解决方案的每一个细节,带你领略高效发布流程的魅力所在
【8月更文挑战第31天】跨平台游戏开发是当今游戏产业的热点,尤其在移动设备普及的背景下更为重要。作为领先的游戏开发引擎,Unity以其卓越的跨平台支持能力脱颖而出,能够将游戏轻松部署至iOS、Android、PC、Mac、Web及游戏主机等多个平台。本文通过杂文形式探讨Unity在各平台的部署与发布策略,并提供具体实例,涵盖项目设置、性能优化、打包流程及发布前准备等关键环节,助力开发者充分利用Unity的强大功能,实现多平台游戏开发。
212 0
|
9月前
|
自然语言处理 运维 架构师
我在平台与 AIGC 的交互的组件设计方案 (2)
上一篇梳理到我在平台与 AIGC 的交互的组件设计方案,进行了交互的设计架构,而进一步结合 IM 整合,将进一步阐述优化交互流程。同时到这步环节引入体验人员来验证 LLM 对工程师的提升效果,同时体现出超级工程师个体。
|
JavaScript 前端开发 数据库
Unity3d(webGL)构建数字孪生小案例(包含完整的数据交互体系)附赠完整代码
Unity3d(webGL)构建数字孪生小案例(包含完整的数据交互体系)附赠完整代码,请关注公众号:拼搏的小浣熊,获取简化版的代码!
|
vr&ar 图形学 Windows
CATIA等设计类软件实时渲染流化解决方案
**实时渲染技术可以实现在VR/AR眼镜中查看CATIA模型,其实不仅仅是VR和AR眼镜,还可以是手机、平板、电脑中直接打开网页就可以查看和浏览CATIA等3D模型。而VR/AR眼镜中通过实时渲染技术不仅仅可以查看CATIA模型,其他的比如BIM/Unreal/unity等模型也都是OK的。**那具体是怎么实现的呢?使用起来麻烦吗?能不能支持多人同时使用呢?关于这些对于实时渲染比较相关的问题,这里点量云小芹做统一解释说明。
249 0
CATIA等设计类软件实时渲染流化解决方案
|
移动开发 数据可视化 前端开发
基于自然流布局的可视化拖拽搭建平台设计方案
LowCode 是高效、高性能的拖拽式低代码开发平台. 也是笔者最近一直在研究的方向, 对于可视化搭建平台的实现方案笔者之前写过很多文章, 这里带大家探索一个新方向——基于自然流布局的可视化搭建平台.
977 0
|
移动开发 数据可视化 信息无障碍
|
存储 JSON 运维
基于WebGL的3D可视化告警系统关键技术解析 ThingJS
1. WebGL 3D技术 2. 新一代3D框架-ThingJS 3. 3D可视化告警系统案例 4. 基于ThingJS的通用架构设计
1款3D地图实景开发工具,JS前端工程师轻松构建 ThingJS 3D地图 全景 可视化
ThingJS是市场上1款3D软件开发方法,为了创业项目团队的拓展,更应保证做到普适化,这是轻量化研发设计3D地图可视化的核心价值。 先来看看ThingJS-CityBuilder城市地图可视化的郊果。
1款3D地图实景开发工具,JS前端工程师轻松构建 ThingJS 3D地图 全景 可视化

热门文章

最新文章