基于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

相关文章
|
2月前
|
搜索推荐 前端开发 测试技术
打造个性化安卓应用:从设计到开发的全面指南
在这个数字时代,拥有一个定制的移动应用不仅是一种趋势,更是个人或企业品牌的重要延伸。本文将引导你通过一系列简单易懂的步骤,从构思你的应用理念开始,直至实现一个功能齐全的安卓应用。无论你是编程新手还是希望拓展技能的开发者,这篇文章都将为你提供必要的工具和知识,帮助你将创意转化为现实。
|
5月前
|
传感器 人工智能 数据挖掘
构建全息交互式开发环境:技术设想与未来展望
全息交互式开发环境结合全息投影与交互技术,为开发者打造三维编程空间,提升效率与创新。其核心特点包括三维代码视图、自然用户交互及实时协作。通过全息显示、高精度输入设备、空间计算与AI辅助,实现沉浸式体验。应用场景涵盖教育、复杂系统开发及远程协作,预示着软件开发新时代的到来。
|
6月前
|
开发者 图形学 iOS开发
掌握Unity的跨平台部署与发布秘籍,让你的游戏作品在多个平台上大放异彩——从基础设置到高级优化,深入解析一站式游戏开发解决方案的每一个细节,带你领略高效发布流程的魅力所在
【8月更文挑战第31天】跨平台游戏开发是当今游戏产业的热点,尤其在移动设备普及的背景下更为重要。作为领先的游戏开发引擎,Unity以其卓越的跨平台支持能力脱颖而出,能够将游戏轻松部署至iOS、Android、PC、Mac、Web及游戏主机等多个平台。本文通过杂文形式探讨Unity在各平台的部署与发布策略,并提供具体实例,涵盖项目设置、性能优化、打包流程及发布前准备等关键环节,助力开发者充分利用Unity的强大功能,实现多平台游戏开发。
214 0
|
6月前
|
开发者 图形学 API
从零起步,深度揭秘:运用Unity引擎及网络编程技术,一步步搭建属于你的实时多人在线对战游戏平台——详尽指南与实战代码解析,带你轻松掌握网络化游戏开发的核心要领与最佳实践路径
【8月更文挑战第31天】构建实时多人对战平台是技术与创意的结合。本文使用成熟的Unity游戏开发引擎,从零开始指导读者搭建简单的实时对战平台。内容涵盖网络架构设计、Unity网络API应用及客户端与服务器通信。首先,创建新项目并选择适合多人游戏的模板,使用推荐的网络传输层。接着,定义基本玩法,如2D多人射击游戏,创建角色预制件并添加Rigidbody2D组件。然后,引入网络身份组件以同步对象状态。通过示例代码展示玩家控制逻辑,包括移动和发射子弹功能。最后,设置服务器端逻辑,处理客户端连接和断开。本文帮助读者掌握构建Unity多人对战平台的核心知识,为进一步开发打下基础。
226 0
|
JavaScript 前端开发 数据库
Unity3d(webGL)构建数字孪生小案例(包含完整的数据交互体系)附赠完整代码
Unity3d(webGL)构建数字孪生小案例(包含完整的数据交互体系)附赠完整代码,请关注公众号:拼搏的小浣熊,获取简化版的代码!
|
JSON 前端开发 数据可视化
漏刻有时云守护数据可视化画质感知状态迭代说明文档
漏刻有时云守护数据可视化画质感知状态迭代说明文档
72 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地图 全景 可视化