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

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

标签: stone, webgl, webxr

- +

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

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

支持中英文版本(默认为中文),当前版本号为1.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界面下方有一个模板库面板,鼠标双击其中的模板图标将加载该模板。

Stone界面下面还有一个资源池面板,里面包含预置的一些材料以及可免费使用的3D模型资源,可以通过在搜索条输入关键词(比如:车)来搜索资源。材料可以拖拉到场景中物体上来应用。模型可以通过鼠标双击直接导入当前场景中去。

上面是Stone的整体介绍。

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

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

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

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

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

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

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

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

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

Stone教程:如何创建管道模型

Stone教程:如何制作灯泡发光特效

Stone教程:如何实现用户交互

Stone教程:如何使用免费3D模型资源

Stone教程:如何制作软体旗帜飘扬动画

Stone教程:   如何制作全景图云展览

Stone教程:如何实现路径动画

Stone教程:如何批量创建植物(花草树木)


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

possitive(9) negative(0) views3037 comments2

发送私信

最新评论

techbrood 2021-02-27 23:37:57

@明月星空, Stone的新版本中可以通过划线来进行裁剪,类似blender里面的功能。


明月星空 2021-02-26 11:08:40

实体裁剪的范围怎么控制?


请先 登录 再评论.
相关文章
  • 微信公众号在线生成二维码带参数怎么搞?

    带参数二维码是微信公众号渠道二维码的一种实现
    微信的带参数二维码有两种,一种是临时二维码,一种是永久二维码,但是永久二维码的生成是有个数限制的,微...

  • 3D感知和建模关键硬件技术:双目、3D结构光和TOF

    无论VR、AR和3D打印,其核心技术包含3D成像和建模。而3D建模属于劳动密集型的工作,耗时耗力,凡这类工作都会是被新技术革命的地方,自动3D建模技术就是为了解决...

  • 增强现实引擎ARToolKit工作原理简介

    ARToolkit是一个基于CV(计算机视觉)和Marker(标识)的开源增强现实引擎。其具备如下功能特性:A. 鲁棒跟踪,包括基于标记的跟踪与基于特征的跟踪;

  • WebAssembly工作原理和JavaScript语言性能对比分析

    本文简单说明WebAssembly(简称wasm)工作原理和高性能的原由(和JavaScript相比)。不过需要提醒的是Wasm并非设计来完全替代JS,而是对JS的一个强大补充,JS中...

  • 如何使用CSS3合成模式(blend-mode)和滤镜(filter)实现彩色蜡笔(时光机)照片特效

    在之前的文章中我们已经详细讲解过CSS3滤镜(filter,也可称之为过滤器)的工作方式,本文将实现一个当下流行的时光机相片特效实例来说明其实际用途。
    我们...

  • HTTP1.1协议现状、问题和解决方案

    HTTP的现状最早的HTTP协议非常简单,只能用来传送文本,方法也只有GET,后来逐步发展到1.1,能够支持多种MIME格式数据(如文本、文件),支持GET,POST,HEAD,OPTI...

  • 三维向量的简单运算和实用意义

    在WebGL的实际应用中我们广泛使用向量的几何运算来计算角度、距离,判断点线、点面之间的关系,比如物体之间的碰撞检测。本文简要介绍三维计算机图形学中常用的...

  • 粒子运动模拟 - Verlet积分算法简介

    Verlet算法是经典力学(牛顿力学)中的一种最为普遍的积分方法,被广泛运用在分子运动模拟(Molecular Dynamics Simulation),行星运动以及织物变形模拟等领域...

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

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

  • WebGL入门教程4 - 使用纹理贴图(Texture Map)

    3D建模和纹理贴图的关系就好比人体和皮肤(或着装)的关系,3D建模用来处理空间属性,而贴图适合用来处理细腻的表面属性。如果不使用贴图,而想在表面达到足够的...

  • 使用Canvas绘制完美的不完美圆形

    真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canva...

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

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

  • SVG过滤器feColorMatrix矩阵变换效果用法详解

    在计算机图形学(数学)中,矩阵乘法可用于把空间向量进行几何变换。我们可以把颜色的值(RGBA)表示成一个四维空间向量:color = (r, g, b, a);那么就可以应用...

  • 使用CSS3实现流星雨动画教程

    很多营销页面中需要实现类似流星雨的动画背景,营造节日浪漫的气氛。要实现这样的效果,有两种方法,一个是使用Canvas,一个是使用纯CSS3,我们这里介绍第2种方...

  • 在PHP网页程序中执行Sass/Compass命令

    我们需要在wow云开发平台支持sass/compass等预编译样式语言,为此我们首先尝试了scssphp扩展,但是在支持最新语法上,经常会出现异常。所以我们采用了代理的方式...

  • 更多...