网页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) views582 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章
  • CentOS6 Apache2.2多站点HTTPS配置

    可以使用letsencrypt(certbot)免费证书服务。支持多系统、多站点和多目录,支持wildcard(通配符域名),90天生效,可用定时任务自动更新。需要注意一点的是apache2.4以下版本需要在默认的ssl配置中添加如下的指令:NameVirtualHost

  • 2019年开源WebRTC媒体服务器选型比较

    什么是WebRTC服务器?在WebRTC的早期开始,该技术的主要卖点之一是它允许点对点(浏览器到浏览器)通信,几乎没有服务器的干预,服务器通常仅用于信令(比如用于...

  • 常用光照类型基本概念工作原理及其计算公式

    在三维场景中,原理上物体的渲染效果取决于光照与物体表面的相互作用,对于渲染程序而言,可以通过把一些数学公式应用于像素着色来实现,从而模拟出真实生活中的...

  • 如何使用BabylonJS加载OBJ或STL模型

    BabylonJS(也就是babylon.js,这是一个和three.js类似的WebGL开发框架),更多的用在游戏领域。
    本文说明和演示如何使用babylon.js来加载一个标准3d模型文...

  • WebGL Roadmap

    Unity 5.0 shipped with a working preview of our WebGL technology in March this year. Since then, Google has disabled (by default) NPAPI support in the...

  • JavaScript事件模型图解

    在JavaScript中用户交互的核心部分就是事件处理。本文为对事件模型和处理机制的总体性描述。Event是什么?
    event是用户操作网页时发生的交互动作,比如clic...

  • 深入理解JS和CSS3动画性能问题和技术选择

    本文对比了JS及其框架和CSS3的动画性能,并深入剖析了其内在原因。技术结论大致如下:1. jQuery出于设计原因,在动画性能上表现最差2. CSS3由于把动画逻辑推给了...

  • 如何使用Three.js加载obj和mtl文件

    OBJ和MTL是3D模型的几何模型文件和材料文件。在最新的three.js版本(r78)中,以前的OBJMTLLoader类已废弃。现在要加载OBJ和MTL文件,需要结合OBJLoader和MTLLoade...

  • Three.js入门教程5 - 10个必须知道的编程技巧

    作者为Google的Paul,关于如何写出好的WebGL代码的文章。和很多开发者一样,我通过实践学习,但同时我也向其他更有经验的开发者们学习。在过去的几个月中,我在c...

  • CSS3图片混合(Blend)效果及其参考计算公式一览表

    在Photoshop软件中,混合是将两个图层的色彩值进行合成,从而创造出大量的效果。在这些效果的背后实际是一些简单的数学公式在起作用。下面所介绍的公式仅适用于R...

  • WebGL入门教程5 - 详解纹理滤镜(Texture Filter)

    WebGL中使用纹理贴图来实现细腻的物体表面观感,其中一个重要的参数是纹理滤镜(Texture Filter)。
    这个参数用来处理当对象出现缩放时,纹理如何处理中间...

  • 如何使用CSS3实现一个平滑的3D文本标题

    要实现3D文本,基本上有3种方法:1. 使用CSS3的投影滤镜(filter: drop-shadow)2. 使用3d建模和CSS3 3d变换来实现(最真实)3. 使用CSS3 text-shadow属性来实现...

  • 如何使用CSS3实现书页(书本)卷角效果

    我们有时候想在页面显示一个公告或用户提示信息。一个常用设计是使用书签形状。我们可以给书签添加卷角效果,以使其更为逼真。所谓的“卷角”实际上可以用小角度...

  • 更多...