3DXR技术篇 ​ 推荐语：新的技术浪潮奔涌而来，我们又处在下一代沉浸式互联网的起点之上。硬件设备、交互方式、 内 容载体、应用场景等都会有彻底改变，毫不夸张的说基于移动技术的娱乐、社交、电商等线上应用未来都 将被重塑。趋势是确定性的，路径是不确定性的。回到当下，构建沉浸式互联网将面临一系列挑战，比 如：“杀手级的XR应用是怎么样的？如何低门槛的研发3D/XR应用？如何解决建模成本和渲染质量问 题？”等等。如下文章仅展示了我们在各个方向的一些探索，我们坚定相信技术创造未来，希望跟行业一 同通过技术构建消费新体验。 —— 磊宇巴巴资深技术专家 吕行 ​ 进入 WebXR 的世界 作者：刘子瑛 出品：大淘宝技术 ​ 随着元宇宙的兴起，VR和AR技术再次回到同学们的视野。 ​ 比起完全是0%支持率的WebGPU,作为WebVR技术的后继者，WebXR Device API以0%+71.08%的支持率展示 了对于一个新的feature的期待。 ​ ​ 面对越来越碎片化的移动端生态，Web标准作为可能是唯一的跨平台工具，在生态中的重要性不言而喻。 如果想要学习WebXR，从哪里入手呢？别急，虽然WebXR和WebGPU还都不成熟，但是现有的技术已经可以让 我们实现超出你想象的效果了。 ​ 3DoF和6DoF 3DoF是Three Degrees of Freedom的简称，意思是三个自由度。同理，6DoF是Six Degrees of Freedom的简 称，表示有6个自由度。 ​ 当只有三个自由度的时候，就是我们日常使用的3D模型系统那样的，只能响应旋转操作。千里之行，始于足下。我 们就从3个自由度开始。 2D时代，我们通过布局来管理页面的版面。到了3D情况下有些不同。我们先从一个例子来体会一下。 CSS时代我们就是画各种盒子的，所以为了向CSS致敬，我们也画一个3D的盒子。 前端写3D，最主要的框架是Three.js。我们从Three.js的一个封装，A-frame入手。类似于div，在A-frame中使用a-scene来作为一个场景的容器。场景中放各种实体。实体有各种属性。 a-box是一个3D的盒子。a-sky是一个背景天空。 ​ 显示出来的效果如下： ​ ​ a-box的position属性是x,y,z的值。其中x的正方向向右，y的正方向向上，z的正方向向外。 rotation也是按x,y,z轴旋转。 我们试下先水平向左转30度。为了区分上图我们换个颜色： ​ ​ 这个盒子可不是静态的哈，可以拖着玩一玩。 ​ ​ 一个场景不能只有孤零零一个元素啊，我们再给我们的盒子上面顶个球。我们给盒子也换个方向，让它右转30度。 ​ 效果如下： ​ ​ 这两个元素是一体的，可以一起拖来拖去。 ​ 从3D到6D ​ 光有形状太单调了，我们需要像加载2D时代的图片一样的3D模型。 a-assets用来指定资源，每一条资源项目用a-assets-item来表示。 ​ 引用的时候，我们给模型指定类型就好： ​ 我们给上面的例子的球上面加个眼镜吧： ​ 然后我们一脚踢开VR的大门，点击右下解的VR按钮，最终变成下面这样子： ​ ​ 这时候我们需要VR眼镜和支持VR的游览器。需要硬件设备的支持来让我们从3自由度跨越到6自由度。 小伙伴们表示缺少VR设备，我们先按下不表，说说不需要设备就可以使用的AR技术。 比如，上面的图我们通过AR的插件可以支持AR模式： ​