发表于
2025-04-25 15:13:41
stone 3d v3.3.0版本发布，含时间线和连接器等新功能
新加了连接器（connects）系统，打开connector模块时，通过ctrl+click来连接场景实体，这使得在stone 3d中构建网络拓扑和仿真数据流变得容易。2.新加了度量（metrics）系统，通过scene对象检测器中的useMetrics属性来启用或禁用，启用时所选物体将显示三维度量数据。1.新加了时间线（timeline）编辑器，可以类似blender一样给对象制作动画。4.标签（Label）和注解（Annotation）组件重构和问题修复。5.添加了新的爆炸（explosion）组件。
...继续阅读
发表于
2024-11-26 16:42:09
three.js中的动画系统设计简介
其中动画数据分为关键帧、动画轨道和动画片段，关键帧可以独立于动画对象属性而存在，这样便于复用，动画轨道对应于对象属性如位置或颜色，动画片段是一系列轨道的组合。动画连接器用来连接动画数据和对象，这样数据就能作用在特定对象属性上，这里有一点是数据类型需要和属性匹配。动画混合器用来管控动画任务，就像音乐混合器一样，如创建、播放、停止、切换动画动作。要设计一个通用的可复用3d对象动画系统，需要把动画任务做一些结构分解。主要是分为动画数据、动画连接器、动画混合器以及动画过渡曲线。在three.js中，
...继续阅读
(49)
发表于
2024-07-06 16:37:14
探讨3D沉浸式在线会议系统的研发 - Meta演示的元宇宙虚拟化身多人对话场景，Web端现在也可以实现了 ！
现在随着沉浸式互联网渲染技术的成熟、大模型系统的成熟、3D虚拟人动画技术的成熟，结合传统游戏领域的MMORPG引擎，一个基于web的低成本高并发3D元宇宙会议系统正在快速成为可能。我可以快速创建多个角色，设定好角色剧本，然后让他们在同一个3D数字空间中彼此对话和交互。随着3D和AI技术的快速发展和普及，下一代互联网是越来越有趣了。1. 3D虚拟空间的构建（含光影特效、虚拟现实和增强现实）2. 3D虚拟化身的构建（含动画、表情、语音）想想20年前，web还只能用来分享文档！5. 语言大模型的支持。
...继续阅读
(43)
发表于
2024-06-24 12:05:36
轻量级在线服装3D定制引擎Myway简介
用于在线商品定制，比如个性化服装的定制、日常用品（如杯子）、家装（被套）等物品的在线定制。我写的面向web元宇宙轻量级系列引擎中的另外一个，在线3D定制引擎Myway 3D。注：demo非最新版本，如需最新版或定制版可评论区回复。文档和sdk链接如下。
...继续阅读
(53)
发表于
2023-10-06 16:06:41
vite dev开发模式下支持外部模块引用
vite build通过rollupOptions.external来支持外部模块，可是这对vite dev模式不工作。一个临时解决方法是使用插件vite-plugin-externalize-dependencies。
...继续阅读
(56)
发表于
2023-09-22 16:50:28
iOS播放MP3视频流AudioContext解码报错null问题处理
web中的媒体流是html5以后才引入的新的不断发展的技术，中间还经历了layer1，layer2和layer3标准。解码器不应该关心未知数据，解码器应该只是寻找，直到它找到它理解的和可以解码的标识。iOS设备的AudioContext对于Mpeg1,2,3数据流的编解码容错性支持不好，需要frame数据都是完整的（从头部边界开始）。mp3或mp2的每个音频帧（每大约200字节）的所有起始标头为0XFFE，而acc音频为0XFFF，因此可以使用0XFFE来做为同步标识。
...继续阅读
(76)
发表于
2023-07-14 18:07:16
http请求header中设置的数据未能发送成功
通过在cookie中设置user token来实现用户请求鉴权是常见的方式，但cookie设置会遇到跨域的问题，这个时候可以在header中加user token来传递数据，而服务端返回的user token放在localstorage中。但在header中添加自定义数据时，需注意规避使用下划线，因为nginx服务器默认是把下划线禁用的，也就是header中带下划线的字段会被自动过滤，导致请求丢失了该字段。比如，如果token的名字是user_token，或者user_id，都会出现丢失问题。
...继续阅读
(70)
发表于
2021-04-17 23:24:12
Stone教程：如何在普通网页中处理Stone 3D场景中实体交互事件
如果是通过stone 3d运行时库集成到普通网页中，
有可能会需要处理场景中物体的交互事件来实现一些自定义的行为，最常见的是点击、悬停等事件交互。
这可以通过在stone 3d容器中侦听如下事件来实现：
tds_ev_entity_pointerdown （点击）
tds_ev_entity_pointerover （悬停）
举例如下，假设stone_div是3d场景容器的id：
var cont = document.getElementById('stone_div')
cont.a...
...继续阅读
(60)
发表于
2021-03-10 20:19:50
Stone 3D教程：常用的可建构实体造型功能（合并、相交和相减）
常用的实体造型功能一般包括对两个（或多个）几何体进行合并、相交和相减。
合并是取两个模型的并集，即非重叠部分保留且重叠部分的体素只取其中一个。
相交是取两个模型的交集，即只保留相交部分的体素。
相减是取两个模型的体素差，显然有顺序，即A-B和B-A是不同的。
举例而言，我们要在一个立方体的一个侧面挖出一个坑，具体步骤如下：
1. 首先新建一个大的立方体，和一个小的球体，然后把小的球体移动到立方体的上方并部分的陷入立方体中。
2. 然后按住CTRL键，通过鼠标点击界面右侧场景树中的几何体来选择两个
...继续阅读
(61)
发表于
2021-03-09 14:20:15
Stone教程：如何给网页3D应用程序添加交互热点
网页3D应用程序中一个常见的交互行为是用户点击场景中的某个热点，
然后呈现特定的内容，如视频、音频、对话框；或者进行场景切换。
本教程说明如何在Stone工具中轻松实现这样的热点交互。
在左侧工具栏实体添加子栏目中，有一个灯泡状的图标按钮，如下所示：
使用该按钮可以向场景中添加热点信息。
点击按钮，默认将在场景根目录下创建一个名为HotSpot的实体：
选中Hotspot，在检查器面板中可以修改该热点的交互行为：
目前支持的行为类型有播放视频、音频、显示对话框和跳转链接。
视频、
...继续阅读
(60)
发表于
2021-03-04 22:58:49
stone 3d常见问题：本地tsp工程文件无法加载
在html文件中加载类似 ./demo.tsp 这种相对路径的工程文件，不能工作，
命令行错误信息为：URL scheme must be "http" or "https" for CORS request
原因是Chrome默认不支持文件协议的跨域访问。
解决方法有3种，一种是启用文件协议访问：--allow-file-access-from-files
为安全起见，可使用一个单独安装的Chrome版本来以上面的参数来启动。该方法不推荐。
第2种方法，是建立本地web服务器，可以是nodejs
...继续阅读
(49)
发表于
2021-02-27 23:52:02
Stone 3D教程：如何快速批量创建树木、花草等自然物体
Unity3D和Unreal里面可以引入树木花草包来批量创建这些植物，效果很棒。
不过别忘了Unity3D需要5G+，Unreal需要10G+的空间。
Stone只有3M多，也可以在场景中快速创建中小规模的自然植被。
具体方法是使用Plant工具：
点击Plant工具后，界面左侧会出现一个Plant工具箱：
工具箱最上面的两个按钮分别是运行控制和帮助按钮，
下面的范围、数量和缩放滑块用来控制种植区间、数量和植物大小。
植物类型用来选择生成什么样的植被，依次可以是树、花、草和石头（石头这
...继续阅读
(65)
发表于
2021-02-23 09:08:27
网页3D编辑器Stone教程：如何实现路径动画
路径动画用来使物体沿着指定路径运动。
在Stone 3D中实现路径动画，首先要创建一个路径，路径实际由一系列点组成。
如何创建路径？
我们先向场景中添加一个实体，比如一个平面（也可以不是平面）：
然后点击页面左侧工具栏工具下面的路径工具：
然后用鼠标左键点击平面选择路径的各个中转点，绘制出一条路径，完成最后一个点的选择时，按鼠标右键来结束中转点的选择，如下白色线条：
然后记得关闭左边的工具箱：（用来设置路径线条的外观的工具箱）。
注意：最后要关闭左边的路径工具箱，否则路径不会生
...继续阅读
(62)
发表于
2021-02-21 00:47:22
Stone 3D教程：创建全景图云展览，只需要几分钟
Stone 3D工具1.1.0版本引入全景图制作工具：
点击全景图图标，Stone将默认创建一个全景图查看器和两张全景图场景：
默认选中了Pano1节点。
如果想在Pano1场景中添加切换热点，可以先通过按住鼠标左键来旋转场景到预期位置，直接鼠标点击该位置即可：
注意！如果您点击时没有出现上图这样的灯泡图标，那么你可能没有选中任何一个Pano节点，你需要先选择一个想要添加热点的Pano场景节点（如Pano1）。
然后在场景树中我们选中Pano2节点，类似方法添加热点。
点击运行，鼠标
...继续阅读
(69)
发表于
2021-01-23 21:52:32
网页3D编辑器Stone案例：房地产数字沙盘
房产和展馆类的数字沙盘（或电子沙盘）目前主要是通过全息投影来实现的，即通过外围硬件把事先制作好的数字影像和物理沙盘进行全息融合。
这种方案的优点是观感较好，缺点是用户和场景内物体没有互动，其技术本质和看3D电影类似。
如果要提供3D电影的效果，同时又要能使得用户身临其境融入场景进行实时互动，就得依靠XR（三维）应用程序，而不只是投影。
Stone工具和Unity、Unreal类似，可用来制作XR应用程序，Stone专门制作网页类的XR应用程序。
下面是用Stone制作的一个房地产数字沙盘案例：
...继续阅读
(67)
发表于
2021-01-19 13:34:11
WebGL渲染错误：GL_INVALID_FRAMEBUFFER_OPERATION: Draw framebuffer is incomplete
出现这个framebuffer is incomplete的错误，一般是由于rendertarget设置有问题，比如缓冲区目标是否有效、使用上有没有冲突以及缓冲的尺寸是否设置非法等。
...继续阅读
(53)
发表于
2021-01-08 17:19:09
网页3D编辑器Stone案例：未来城市云展厅
使用Techbrood Stone工具专业版可以快速制作在线云展厅，有效融合高清2D图文和3D场景交互。
使用到了2D界面组件（专业版功能）、各种3D动画组件、路径规划、人机交互组件（专业版功能），以及粒子、UI系统。
...
...继续阅读
(58)
发表于
2021-01-05 01:00:42
如何在centos7上安装ruby和compass
踏得网迁移服务器（CentOS5->CentOS7）时，遇到了一些麻烦，这里记录一下。
Compass是用来编译SCSS语法的，依赖于Ruby，虽然目前该项目可能已经不再活跃，但不能影响历史代码的应用。
yum install centos-release-scl-rh centos-release-scl
next install the right version
yum --enablerepo=centos-sclo-rh install rh-ruby26
then e..
...继续阅读
(69)
发表于
2020-12-17 00:28:29
Web3D编辑器Stone教程：如何使用资源库导入免费在线模型
Stone工具最新版本实现了资源库功能，资源目前支持图片、视频、音频、材质和模型这5种类型。
材质可以直接拖拉到实体上即可应用。
模型通过双击即可加载到场景中，需注意模型的大小，可能需要调节其transform才可以合适的显示出来。
Stone工具内置支持上千的免费模型资源，可以通过资源库面板右上角的搜索框来进行云端搜索：
比如上面是通过搜索“铁”这个关键词，出来的结果。双击模型图标即可加载到场景中。
...
...继续阅读
(56)
发表于
2020-12-17 00:04:48
Web3D编辑器Stone教程：使用Interaction组件实现用户交互
3D引擎在用户交互上通常有3种方式，
一种是开放API，通过执行用户脚本来实现；
第二种是通过Blueprint（或Graph）蓝图工具来实现无编程可视化交互；
还有一种是通过给实体添加交互组件来实现。
这三种方式使用难度依次降低，功能性也依次降低。
在Stone工具中，目前采用了第三种interaction组件来实现简单而常用的交互。
首先选中实体，然后给实体添加interaction组件，在检测器中点开该组件，如下所示：
这里对默认配置不做任何修改，直接点击菜单栏的运行图标：
在
...继续阅读
(72)
发表于
2020-12-03 01:57:54
使用踏得网Web3D编辑器Stone制作WebGL钻石特效
钻石是光学特性很复杂的物质，存在多次折射、反射、色散以及边缘高光闪烁等效果，
要想非常真实的在网页端进行模拟是很困难的，需要使用到光线跟踪，而这显然很消耗性能。
我们可以使用一些折中处理，来逼近真实的效果，不需要那么物理真实，更多的是视觉感受上达到差不多的效果。
下面是我用Stone 3D工具制作的一个效果：
视频链接：
http://t.cn/A6GFjMCm?m=4577854908007251&u;=1406897513
...
...继续阅读
(59)
发表于
2020-11-26 22:40:52
踏得网Web3D编辑器Stone教程：分分钟制作灯泡发光特效
灯泡发光发亮是生活中稀松平常的现象，可是在网页3D中想要模拟这样的效果，却没有想象中的那么简单。
首先需要建立发光的后处理程序，而WebGL的着色器代码是出了名的难写难以调试，更不用说这里面有不少的物理原理和数学计算。
其次得处理发光体和周边物体的遮挡问题，最后还得慎重考虑发光物体在一个大型场景中渲染时的性能问题。
Stone 3D工具内置了相关处理，使得用户创建这样的效果非常简单和高效。
1. 给场景Scene节点添加glow组件，添加好后，glow组件的属性保持默认即可。
不知道如何给实体添加
...继续阅读
(60)
发表于
2020-11-16 12:16:23
网页3D编辑器Stone教程：如何在3D场景中添加注解
注解是在线展示（无论2D还是3D）的基本功能。Stone提供了两种方式的注解，一种是带自动位置调整和连接器的注解器，一种是简单的文本框。
带自动位置调整和连接器的注解器对应的组件为：annotation-with-connector
简单的文本框注解器对应的组件为：annotation
Annotation with Connector
这个组件比较灵活，能够从目标对象的一个锚点引出一条连接线，然后在连接线的另一端显示标题和描述。
该组件文本可内联编辑，也可以通过常用的组件属性中进行编辑，在组件属
...继续阅读
(64)
发表于
2020-11-10 13:46:09
主流3D内容制作工具简介和坐标系一览
市面上的主流3D软件功能各有特色，所采纳的坐标系不尽相同，有时需要在彼此之间转换。
现在整理如下：
软件
官网链接
简介
类型
轴向
坐标系
Unity
https://unity.com
美国优美缔公司出品的实时3D内容平台
3D应用开发
Y轴向上
.
...继续阅读
(56)
发表于
2020-11-06 12:13:31
网页3D编辑器Stone教程：如何创建管道模型
使用踏得网的Stone工具可以轻松创建一个管道。
首先创建一个曲线（Spine）实体，从左侧工具栏中选择并点击“曲线”菜单：
这时场景当前选中实体下将出现一个曲线模型：
该曲线模型默认情况下有4个控制节点，鼠标悬停到控制节点上会出现三轴变换辅助器，如上图所示。
移动控制节点的位置将可以改变曲线形状。
如何修改控制节点？
可以在场景树中选中该曲线多边形实体，在其右键菜单中有“添加节点”和“删除节点”子菜单，点击即可增删控制节点。
把多边形变成管道
选中上述曲线对象，点击工具栏中的管道工
...继续阅读
(64)
发表于
2017-04-07 00:05:51
[原]A-Frame WebVR开发入门教程
发表于
2017-03-02 22:12:26
[原]如何在浏览器中使用WebAssembly特性
WebAssembly是一个新的重大网页技术，顾名思义“网页的汇编语言”。[参考阅读：什么是WebAssembly，为什么需要WebAssembly]该技术得到Mozilla、Google和Microsoft的支持，但目前如果要体验该特性，需要修改浏览器的一些标记（配置）：对于Chrome，打开chrome://flags/#enable-webassembly，启用该标记。对于Firefox Nightly，打开about:config，然后设置javascript.options.wasm配置项的值为true。对于MicroSoft Edge，请查看Edge支持页面。对于Safari，查看Webkit的特性说明页面。对于其他包装版的浏览器（如QQ、百度、360等），请各自对照参考上述内核。对于IE，你想多了。
...继续阅读
(72)
发表于
2017-02-07 13:24:39
[原]CSS3特性查询（Feature Query: @supports）功能简介
这是2017年不能不了解和学习的一个CSS新特性，非常实用，考虑到现实世界浏览器的复杂性，该特性本应该先于其他新特性出来。我们已经知道使用媒体查询（Media Query）来检测屏幕尺寸，从而实现响应式界面设计。而特性查询则用来查询用户代理（如桌面浏览器）是否支持某个CSS3的特性，这个功能除了IE之外，已被其他浏览器所支持。语法格式@supports <supports-condition> {
<group-rule-body>
}特性查询使用@supports规则（和媒体查询@media类似，都是使用一个@符号前缀：at-rule），该CSS规则允许我们把CSS样式写在条件块中，这样只有在当前用户代理支持一个特定的CSS属性值对（property-value pair）的时候才被应用。举个简单的例子，如果我们要为支持弹性框（flexbox）特性的浏览器定义样式，可以像下面这样写：123@supports ( display: flex ) { .foo { display: flex; }}同样的，和媒体查询规则类似，可以使用一些逻辑操作符（如and、or和not），并支持串
...继续阅读
(74)
发表于
2016-12-27 17:55:24
[原]2016年度10大HTML5动画
发表于
2016-12-21 15:20:57
[原]php tesseract 不能执行成功
centos6的环境，php版本为5.5，tesseeract为2.0.2版本，执行其他命令如ls可以，执行tesseract不工作。在命令中加入 2>&1，返回错误信息“不能加载eng.unicharset"，语言包访问权限问题，修改权限解决问题，记录下。
...继续阅读
(59)