文章目录
前言
对 3D 环境的最初兴趣来自 Croquet 团队的这篇论文.
从 Alan Kay 那里学到这样的一种视角来看待交互式图形计算: 桌面隐喻/GUI 的力量是心理层面的, 它们为用户制造了一种"幻觉", 仿佛事物就在屏幕那里, 因此用户可以将他们在现实世界的经验迁移过来, 就像与物理对象打交道一样, 与屏幕上的虚拟对象打交道.
沿着这个视角, 我们自然会渴望 3D 环境, 因为它能够进一步增强这种"用户幻觉", 事物存在于一个虚拟的 3 维空间里, 而不是一个 2 维的"桌面"上, 这样一来, 用户能够更多地迁移他们在现实世界(3 维空间)的经验.
这些想法的背后是让计算适应人类, 而不是让人类适应计算.
将 3D 环境引入 Snap!
Snap! 提供的舞台区通常用于制作 2D 项目. 我渴望将 3D 环境引入到 Snap! 中.
有许多方法可以达成目标:
- Bernat 的 3D Beetle 展示了一种可行的思路, 将 babylonjs 制作的 3D 世界带入 Snap! 里
- Dynalab 团队尝试过使用 Snap! 驱动 Croquet Microverse
我一直渴望更加通用和非侵入的方案, 最好 “只是一个普通的 Snap! 项目”.
前段时间完成的通用 iframe 库提供了这种可能性.
大体来说, 我的想法是这样的:
- 通过 iframe 库将基于 web 的 3D 环境引入 Snap!.
- 通过 postMessage API, Snap! 可以与 iframe 中的 3D 环境通信
- 在 postMessage 之上构建 dynatalk, Snap! 就能够与这些 3D 环境进行同步或异步的互操作, 仿佛它们由同一个引擎驱动.
我打算挑选一个 3D 引擎来演示如何实施以上想法. 一番比较之后, 最终选择了 Spline, 它是我了解的 3D 工具中最简单易用的.Spline 和 Scratch 有很多相似性, 它极大降低了 3D 项目的制作难度。
理论上, 我们有可能基于 threejs 或 babylonjs 为 Snap! 制作一个 3D 编辑器, 就像 Snap! 的像素编辑器/矢量编辑器 那样, 深度整合到 Snap! 中, 这样做的坏处是, 工程量巨大无比, 是否易用也值得怀疑. 我最终放弃了这个想法, 转而去思考:
哪个 3D 编辑器非常易用, 而且暴露出了与之互操作的 API ? 如果有这样的项目, 我们可以将其视为 Snap! 的 “外部编辑器”
我选择了 Spline(还有很多其他的潜在选项).
Spline 负责制作 3D 项目, 并暴露出 API, 而编程和控制的的部分, 由 Snap! 负责。 在 Snap! 中操作 Spline 项目, 很像在 Snap! 操作 MicroBlocks 项目. Spline 和 MicroBlocks 用于编写项目的"内核", 对外提供出服务, Snap! 则作为客户端使用这些服务.
查看具体例子之前, 可以看下 演示视频
demo 1
演示使用的 Spline 项目, 修改自 Little World Kawaii Pig。
填写在 Snap! 中 world url 是 https://prod.spline.design/s7FG1KdbdsyW8yOY/scene.splinecode (FAQ 里介绍了如何获取项目的 world url)
demo 2
演示使用的 Spline 项目, 修改自 Mini House - Conditional Logic。
填写在 Snap! 中 world url 是 https://prod.spline.design/nO5gRl8xdZ5gp4UJ/scene.splinecode
demo3: 修改变量
演示使用的 Spline 项目, 修改自 3D Text - Blue。
填写在 Snap! 中 world url 是 https://prod.spline.design/CJdfFOXzOrARU5Nz/scene.splinecode
关于变量在 Spline 中的用法, 参考 这个教程
FAQ
如何获取 world url
如何自托管项目文件?
以 demo 2 https://prod.spline.design/dP5NwOaNd2IR5Npm/scene.splinecode 为例, 你可以将其下载下来, 存放在自己的服务器上(我把它放在:https://wwj718.github.io/post/img/scene.splinecode), 然后加载它.
open world url 积木是如何工作的?
open world url 积木接收 Spline 项目的地址, 形如 https://prod.spline.design/nO5gRl8xdZ5gp4UJ/scene.splinecode, 你可以从项目的 export 中找到它.
在 open world url 内部, 它会将 Spline 项目的地址传递给这个 iframe 页面: https://wwj718.github.io/Snap-Spline-Demo?project=https://prod.spline.design/nO5gRl8xdZ5gp4UJ/scene.splinecode
iframe 页面的源代码在这里:Snap-Spline-Demo.
Spline 对外暴露了哪些 API?
这儿给出了完整的 API 描述.
这些 API 决定了外部系统 (如 Snap!) 可以以哪些方式操作 Spline 项目.
dynatalk-over-postmessage 在这里有什么用?
架构将掌控材料 – Alan Kay
浏览器提供了 postMessage API , 用于与 iframe 页面进行通信, 这是一种异步通信(pub/sub)方式. 有时候我们想要同步通信(如 Spline 库的 ask _ for _ 积木), 类似 RPC 或者函数调用, dynatalk 能够做到这点.
制作 dynatalk-over-postmessage, 所需的工作并不多, 只需将消息管道从 MQTT 切换到 postMessage 即可, 具体而言, 需要调整接收和发送消息的机制. 其他的代码一行未改, 全都可以复用.
如何将其转化为标准的 Snap! 库?
目前 Spline 库 已成为了 Snap! 中文版 内置库.
更多细节参考 如何将其转化为标准的 Snap! 库?