网页3D编辑器Stone简明教程

techbrood 发表于 2020-10-12 20:22:13

标签: stone, webgl, webxr

- +

踏得网在沉浸式互联网领域有着多年的技术探索和产品研发积累。

我们基于对行业前沿发展的深度理解,率先推出一款在线创作3D沉浸式展示的轻量级工具:Stone

支持中英文版本(默认为中文),当前版本号为0.1。

该工具简约而先进,主要特性如下:

  • 主流ECS架构,通过组件和系统定制可以轻松扩展应用程序功能。

  • 完全弹性的简约风格界面布局,支持所见即所得的编辑操作,支持资源直接拖放到场景。

  • 支持内置基础模型创建,以及外部fbx和glb等模型导入。

  • 支持复杂材质系统、粒子系统。

  • 支持简单物理系统和动力学系统。

  • 支持文本、富文本、图片、音频、视频和各种常用幻灯片。

  • 支持3D空间多画板绘画、支持直接在基础模型上绘画。

  • 支持多场景和场景轮播。

  • 支持生成爆炸图,可以自定义爆炸方向。

  • 支持VR/AR沉浸式渲染(需要相应设备支持)。

该工具的操作主要包含5个部分:

添加场景

Stone编辑器默认打开时,创建一个默认场景,场景里包含一个背景天空、直射光、远景相机、一个立方体及其信息标注。

如果要添加多个场景,可以通过点击“程序”菜单中的“添加场景”子菜单,也可以通过在场景树中选中program点击右键,在弹出式菜单中选择“添加场景”,还可以直接点击场景标签旁边的“加号”来实现:

image.png

添加实体

大部分常用的物体可以通过点击菜单和工具栏中的相应实体(Entity)直接添加到3D场景中。

Stone工具教程配图1
TechbroodD Stone介绍图1 - 添加实体

修改实体

如果要对实体进行修改,可以在场景树中选中该物体,然后在检测器中选择添加组件(Add Components)来使用组件对实体的功能进行具体的实现和延展。大部分实体已经内置了一些常用组件,比如球体通常有变换(Transform)和网格(Mesh)组件,变换组件用来控制实体的平移、旋转和缩放参数,网格组件用来构成实体的实际几何体。如果要修改球体的材质,可以点击Mesh组件,在属性面板中双击材质球来打开材料编辑器:

Stone教程配图2
TechbroodD Stone介绍图2 - 修改实体材料

所有组件都有相应的配置参数用来进行精细的制作,但大多数情况下,您只需要保持默认或者调节有限的几个参数即可。

操作实体

场景中的物体可以通过场景树选中,也可以直接单击来选中,选中后,点击页面左侧竖向工具栏中的移动(快捷键T)、旋转(快捷键R)或缩放(快捷键S)图标:

image.png

此时,中间场景渲染区域当前选中的物体上将出现变换控制器三个维度的帮助控制器,如以下为点击“平移”工具时出现的三个坐标轴控制器:

s3.jpg

通过鼠标拖拉控制器(如上图中的箭头)可以改变实体的位置、旋转角度和尺寸。

导入资源

我们还可以通过“程序”菜单中的“引入”二级菜单来直接从外部导入图片、模型、音频和视频资源,也可以快捷的直接从资源浏览器中拖曳到3D场景中。

上面是Stone的整体介绍。

后续我们会针对特定的应用场景比如基于物理的材质(比如如何调节金属度、粗糙度、使用贴图)、粒子特效(比如如何调节烛火)、幻灯片、物理运动、制作3D展厅特效等等来编写单独的教程。

已有在线教程(持续更新中):

Stone教程:如何选中、平移、旋转和缩放实体

Stone教程:组件简介以及如何使用组件来扩展实体的功能

Stone教程:如何在3D场景中添加图像

Stone教程:如何把3D场景植入到普通网页中

Stone教程:如何在3D场景中使用粒子动画特效

Stone教程:如何在3D场景中使用音频和视频

Stone教程:如何导入3D模型到场景中


如有任何问题也可以在本文下面进行留言,或发邮件到24739149@qq.com。

possitive(3) negative(0) views589 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章