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是一个背景天空。
<!DOCTYPE html> <html> <head> <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script> </head> <body> <a-scene> <a-box position="0 0 -5" rotation="0 0 0" color="#d4380d"></a-box> <a-sky color="#1890ff"></a-sky> </a-scene> </body> </html>
显示出来的效果如下：
a-box的position属性是x,y,z的值。其中x的正方向向右，y的正方向向上，z的正方向向外。 rotation也是按x,y,z轴旋转。
我们试下先水平向左转30度。为了区分上图我们换个颜色：
<!DOCTYPE html> <html> <head> <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script> </head> <body> <a-scene> <a-box position="0 0 -5" rotation="0 -30 0" color="#eb2f96"></a-box> <a-sky color="#1890ff"></a-sky> </a-scene> </body> </html>
这个盒子可不是静态的哈，可以拖着玩一玩。
一个场景不能只有孤零零一个元素啊，我们再给我们的盒子上面顶个球。我们给盒子也换个方向，让它右转30度。
<!DOCTYPE html> <html> <head> <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script> </head> <body> <a-scene> <a-box position="0 0 -5" rotation="0 30 0" color="#eb2f96"></a-box> <a-sphere position="0 1.4 -5" radius="1" color="#389e0d"></a-sphere> <a-sky color="#1890ff"></a-sky> </a-scene> </body> </html>
效果如下：
这两个元素是一体的，可以一起拖来拖去。
从3D到6D
光有形状太单调了，我们需要像加载2D时代的图片一样的3D模型。
a-assets用来指定资源，每一条资源项目用a-assets-item来表示。
<a-assets> <a-asset-item id="glass" src="./model.glb"></a-asset-item> </a-assets>
引用的时候，我们给模型指定类型就好：
<a-entity position="0 1.5 -4" scale="5.0 5.0 5.0" gltf-model="#glass"> </a-entity>
我们给上面的例子的球上面加个眼镜吧：
<!DOCTYPE html> <html> <head> <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script> </head> <body> <a-scene> <a-box position="0 0 -5" rotation="0 30 0" color="#eb2f96"></a-box> <a-sphere position="0 1.4 -5" radius="1" color="#389e0d"></a-sphere> <a-sky color="#1890ff"></a-sky> <a-assets> <a-asset-item id="glass" src="./model.glb"></a-asset-item> </a-assets> <a-entity position="0 1.5 -4" scale="5.0 5.0 5.0" gltf-model="#glass"></a-entity> </a-scene> </body> </html>
然后我们一脚踢开VR的大门，点击右下解的VR按钮，最终变成下面这样子：
这时候我们需要VR眼镜和支持VR的游览器。需要硬件设备的支持来让我们从3自由度跨越到6自由度。 小伙伴们表示缺少VR设备，我们先按下不表，说说不需要设备就可以使用的AR技术。 比如，上面的图我们通过AR的插件可以支持AR模式：
带你读《2022技术人的百宝黑皮书》——进入 WebXR 的世界（2）
https://developer.aliyun.com/article/1262253?spm=a2c6h.13148508.setting.15.69d84f0eIRNX5Z
