陈小峰（iefreer）的专栏

如果是通过stone 3d运行时库集成到普通网页中，有可能会需要处理场景中物体的交互事件来实现一些自定义的行为，最常见的是点击、悬停等事件交互。这可以通过在stone 3d容器中侦听如下事件来实现：tds_ev_entity_pointerdown （点击） tds_ev_entity_pointerover （悬停）举例如下，假设stone_div是3d场景容器的id：var cont = document.getElementById('stone_div')cont.a...

网页3D应用程序中一个常见的交互行为是用户点击场景中的某个热点，然后呈现特定的内容，如视频、音频、对话框；或者进行场景切换。本教程说明如何在Stone工具中轻松实现这样的热点交互。在左侧工具栏实体添加子栏目中，有一个灯泡状的图标按钮，如下所示：使用该按钮可以向场景中添加热点信息。点击按钮，默认将在场景根目录下创建一个名为HotSpot的实体：选中Hotspot，在检查器面板中可以修改该热点的交互行为：目前支持的行为类型有播放视频、音频、显示对话框和跳转链接。视频、

在html文件中加载类似 ./demo.tsp 这种相对路径的工程文件，不能工作，命令行错误信息为：URL scheme must be "http" or "https" for CORS request原因是Chrome默认不支持文件协议的跨域访问。解决方法有3种，一种是启用文件协议访问：--allow-file-access-from-files为安全起见，可使用一个单独安装的Chrome版本来以上面的参数来启动。该方法不推荐。第2种方法，是建立本地web服务器，可以是nodejs

Unity3D和Unreal里面可以引入树木花草包来批量创建这些植物，效果很棒。不过别忘了Unity3D需要5G+，Unreal需要10G+的空间。Stone只有3M多，也可以在场景中快速创建中小规模的自然植被。具体方法是使用Plant工具：点击Plant工具后，界面左侧会出现一个Plant工具箱：工具箱最上面的两个按钮分别是运行控制和帮助按钮，下面的范围、数量和缩放滑块用来控制种植区间、数量和植物大小。植物类型用来选择生成什么样的植被，依次可以是树、花、草和石头（石头这

路径动画用来使物体沿着指定路径运动。在Stone 3D中实现路径动画，首先要创建一个路径，路径实际由一系列点组成。如何创建路径？我们先向场景中添加一个实体，比如一个平面（也可以不是平面）：然后点击页面左侧工具栏工具下面的路径工具：然后用鼠标左键点击平面选择路径的各个中转点，绘制出一条路径，完成最后一个点的选择时，按鼠标右键来结束中转点的选择，如下白色线条：然后记得关闭左边的工具箱：（用来设置路径线条的外观的工具箱）。注意：最后要关闭左边的路径工具箱，否则路径不会生

展馆中的一个常见元素是旗帜，stone工具支持快速定制旗帜类软体动画。可以修改重力因子、风力、风阻、固定模式以及边缘加强因子。

出现这个framebuffer is incomplete的错误，一般是由于rendertarget设置有问题，比如缓冲区目标是否有效、使用上有没有冲突以及缓冲的尺寸是否设置非法等。

使用Techbrood Stone工具专业版可以快速制作在线云展厅，有效融合高清2D图文和3D场景交互。使用到了2D界面组件（专业版功能）、各种3D动画组件、路径规划、人机交互组件（专业版功能），以及粒子、UI系统。...

Stone工具最新版本实现了资源库功能，资源目前支持图片、视频、音频、材质和模型这5种类型。材质可以直接拖拉到实体上即可应用。模型通过双击即可加载到场景中，需注意模型的大小，可能需要调节其transform才可以合适的显示出来。Stone工具内置支持上千的免费模型资源，可以通过资源库面板右上角的搜索框来进行云端搜索：比如上面是通过搜索“铁”这个关键词，出来的结果。双击模型图标即可加载到场景中。...

3D引擎在用户交互上通常有3种方式，一种是开放API，通过执行用户脚本来实现；第二种是通过Blueprint（或Graph）蓝图工具来实现无编程可视化交互；还有一种是通过给实体添加交互组件来实现。这三种方式使用难度依次降低，功能性也依次降低。在Stone工具中，目前采用了第三种interaction组件来实现简单而常用的交互。首先选中实体，然后给实体添加interaction组件，在检测器中点开该组件，如下所示：这里对默认配置不做任何修改，直接点击菜单栏的运行图标：在

钻石是光学特性很复杂的物质，存在多次折射、反射、色散以及边缘高光闪烁等效果，要想非常真实的在网页端进行模拟是很困难的，需要使用到光线跟踪，而这显然很消耗性能。我们可以使用一些折中处理，来逼近真实的效果，不需要那么物理真实，更多的是视觉感受上达到差不多的效果。下面是我用Stone 3D工具制作的一个效果：视频链接：http://t.cn/A6GFjMCm?m=4577854908007251&u=1406897513...

使用踏得网的Stone工具可以轻松创建一个管道。首先创建一个曲线（Spine）实体，从左侧工具栏中选择并点击“曲线”菜单：这时场景当前选中实体下将出现一个曲线模型：该曲线模型默认情况下有4个控制节点，鼠标悬停到控制节点上会出现三轴变换辅助器，如上图所示。移动控制节点的位置将可以改变曲线形状。如何修改控制节点？可以在场景树中选中该曲线多边形实体，在其右键菜单中有“添加节点”和“删除节点”子菜单，点击即可增删控制节点。把多边形变成管道选中上述曲线对象，点击工具栏中的管道工

踏得网的Stone工具支持导入复杂的SVG图形并自动根据SVG里面的路径数据生成形状模型。具体操作：把svg文件直接拖拉到Stone编辑器的场景区域并松开鼠标，比如一个名为tiger.svg的文件。此时注意观察场景树的变化，如果加载成功，应该会出现一个名为tiger的节点，如果你的场景树层级关系较多，你可以在场景树最上面的搜索栏里面敲入“tiger”来快速定位到该节点。此时如果3D场景中没有出现预期的模型，那么一般是因为模型太大或太小所导致，可以通过选中tiger节点，在检测器的tr

踏得网Stone工具支持导入外部3D模型。当前支持的模型类型有fbx、glb和obj。有三种操作方式：1. 直接从文件资源管理器拖拉模型文件到编辑器的场景中2. 也可以通过点击菜单“程序”->“引入”来导入3. 也可以通过下面的资源池工具条上的导入按钮来导入模型导入后，默认情况下，如果导入正确，该模型将被插入为当前选中节点的子节点。由于大小问题模型可能超出编辑者视界，我们可以通过鼠标滚轮来缩放场景来看到模型全貌。如果模型过大或者过小，可以通过在场景树中选中该模型节点

踏得网的Stone工具采用了着色器粒子编辑引擎，可以很容易的实现烛火、萤火虫、烟花、喷泉、雨雪等3D动画特效。要在场景的特定位置添加粒子特效，可以首先在该位置添加一个空实体，然后给该实体添加particle组件：点开ParticleEmitter组件标签，可以看到一个当前使用的粒子贴图：双击该贴图将打开粒子编辑器：最上面是贴图，你可以换成自己制作的贴图，比如雨滴、雪花等。粒子参数有很多，比较重要的几个参数是粒子数量、生存周期、3个维度上的速度、加速度（注意除了初始值，还有变化

Stone支持直接从系统资源管理器中拖拉资源到场景实体上来自动完成音频和视频对象的创建。目前支持的音频格式为mp3/ogg/wav，视频格式为MP4/webm/ogg。第一步：在场景中创建一个实体，比如一个立方体。第二步：把音频或视频文件拖拉到立方体上，鼠标松开。如果是音频文件，则在场景树中选中立方体后，可以看到该实体多了一个AudioEmitter组件：点击Audio属性旁边的播放按钮，则可以播放该音频。如果要让Stone应用程序运行时自动播放该音频，请勾选组件的自动播放（Au

3D世界的平移、缩放和旋转操作和2D文档中有很大的差异。2D文档中选中文本框的时候一般会出现辅助边框用来进行缩放以及平移，类似的思路，3D目标操作目前比较成熟的一个方式是给目标3D实体添加辅助调节器，这个调节器必须是3个维度的，可以分别对X/Y/Z三个维度进行调节，还要可以对其中任意多个维度同时调节。选中选中实体有2种方式，一个是在中心场景中双击实体对象，还有一个是在场景树中选择实体。平移在Stone编辑器中选中实体后，点击左侧工具栏中的平移按钮（或者按快捷键T）：这时，

在Stone中添加图像很简单，只要2步。第一步，新建一个平面，然后移动到预定位置，并缩放到合适的比例第二步，把图片（png或jpg）从操作系统资源管理器中直接拖拉到上面的平面上即可：...

踏得网的Stone工具实现了经典而强大的ECS（即Entity-Component-System）架构，场景中的实体可以通过组件来轻松的扩展其功能。当我们在场景树中选择了一个实体对象时，检查器面板会自动显示该实体对象的属性和组件列表：在检查器的最顶部有一个添加组件的下拉列表框，我们首先分类介绍下已有组件的功能：操作类：drag-controls：拖拉控制，用来给实体添加可拖拉操作性object-controls：给实体添加对象控制（鼠标和键盘操作）fps-controls:

踏得网的Stone工具可以帮助用户快速构建3D场景，场景可以在Stone工具内编辑、播放、保存和重新加载。如果想把在Stone工具中制作的场景放到现有的网页中，也很简单，只需要2步。Stone提供了一个运行时库tds_rt.js，（tds_rt全称为techbrood stone runtime)链接地址为：https://techbrood.com/stone/tds_rt.js，第一步是把该js库加载到页面中：<script src="https://techbrood.co.

从表现形态上来看，互联网已经走过了3个大的阶段。第一个阶段是简单文本信息的分享，源于学术之间文档的共享需求，然后普及到普通用户对于新闻获取和知识搜索方面的需求。第二个阶段是富媒体交互，在这个阶段网页的内容不再局限于文本，而是图文并茂、乃至音频视频动画。而在交互上也不只是被动的接收，而有了更多的交互和动效，这使得电商等众多网页应用和网页游戏成为可能。第三个阶段是信息载体的变化，从桌面走向了移动，催生了移动互联网时代。而现在互联网内容将走入第四个关键的阶段，即沉浸式互联网时代。沉浸式互联网和

3D虚拟试衣系统的使用场景主要是在线电商或数字营销，为品牌服装、服饰、饰品添加高端3D虚拟购物动效，提升用户感官体验和交互体验。踏得网基于网页/HTML5独家研发了一套在线3D虚拟试衣间系统。纯网页版，跨平台支持，无需用户安装插件。

常常听到人们对于HTML5的讨论，看了页面头部这个那个就是HTML5，误认为HTML5只是新增些标签“而已”，学完了速查手册似乎就理解了。实际上很多从业人员并没有深入理解业界为什么要推出HTML5系列技术标准，为什么HTML5代表了下一代网页乃至移动应用技术。

Three.js是当下最流行的网页3D渲染JS引擎，其主要是对WebGL编程以面向对象方式进行的封装。踏得网专注于HTML5技术生态链的资源开发，鉴于网络上Three.js方面的资料比较散乱，且良莠不齐，因此我们把Three.js的官方文档、示例和我们的平台上已有资源整合起来，提供在线中文文档以及方便的调试学习环境。

踏得网精选2016年度最酷最新的HTML5动画集，评选标准为：创意新颖度+实现技术难度+趣味程度。技术全面覆盖HTML5/CSS3/SVG/WebGL/ES6。

WebVR和WebGL应用程序接口使得我们已经可以在浏览器上创建虚拟现实（VR）体验，但从工程化的角度而言，开发社区还需要更多方便强大的开发库来简化编程，Mozilla的 A-Frame 框架就是这样一个工具，提供了一个Web开发者所熟悉的标记语言来快速构建3D VR场景动画原型，而不需要编写过多的JavaScript和GLSL语句。本文将介绍如何使用A-Frame构建一个简单的在线可运行实例。

WebGL（基于HTML5 Canvas的3D绘图上下文）可以用来构建3D视图、立体动画、人机交互。Three.js是一个主流的JS框架用来支持和简化WebGL编程。本例是一个简单的Three.js应用，即把一个外部可用于打印的3D标准建模文件（STL文件）载入到浏览器中绘制出来。[img]http://www.techbrood.com/ueditor/php/upload/imag...

我们在网站开发过程中常常遭遇UI交互效果设计和实现的双重困扰。设计师一方面努力寻找创意，一方面担忧技术层面可实现性，而Web工程师则缺少好的开发参考。为此我们希望为自己建立一个HTML5技术资源库并提供专业的搜索服务，这个技术资源库应该要涵盖基础知识、高级应用实例、在线教程、工具以及创新的UI设计。这是踏得网（techbrood.com）的开发初衷。然后在这个资源库之上，我...

这是一个实验性的JavaScript API，提供了在用户网页浏览器中访问虚拟现实设备的统一接口。现在体验VR，一般你需要在VR设备的前方加上一个手机，这额外添加了重量和总体成本。理想的体验是能投影到空间上，然后使用内置浏览器打开url，而无须下载APP，这将打破视觉空间和输入空间的限制。