Web AR框架 three.ar.js API 大全

Web AR 和 Web VR将是未来前端的一个发展方向。目前美国的一些互联网公司都已在进行相关的研究。谷歌的 three.ar.js 最近已经被开源，因此我在前两篇中介绍了它。本文将介绍它的一些常用的 API，期望能对 Web AR有兴趣朋友有所帮助。

new THREE.ARView(vrDisplay, renderer)

使用VRDisplay和THREE.WebGLRenderer可以创建一个ARView。用来处理ARCore和ARKit平台之间的相机差异，并将相机放置在您的场景后面。

THREE.ARView#render()

ARView对象的render()方法可以通过照相机进行渲染。通常在渲染循环中的每个帧之前调用，然后再渲染场景中的其他对象。

new THREE.ARReticle(vrDisplay, innerRadius, outerRadius, color, easing)

通过创建一个THREE.Mesh线与vrdisplay命中测试。

void THREE.ARReticle#update(x, y)

对标准化坐标执行击打测试，x并将y标线运行到该位置。通常称为每一帧执行命中测试，并使标线沿着曲面“跟踪”以放置其他对象。

new THREE.ARPerspectiveCamera(vrDisplay, fov, aspect, near, far)

THREE.ARPERSpectiveCamera 是THREE.PerspectiveCamera的一个子类。用于创建一个与您的设备视角相匹配的透视相机，并保持投影矩阵与设备同步。使用这台摄像头，通过摄像机可以看到AR上的三个物体。如果没有提供vrdisplay，或不是一个AR显示器。可以退回到正常的THREE.PerspectiveCamera 并提供值。仅projectionMatrix是如果使用AR能力的设备更新，并且fov，aspect，near，far属性是不适用的。

void THREE.ARPerspectiveCamera#getProjectionMatrix()

如果在构造函数中给出VRDisplay，则从API生成投影矩阵以匹配本机相机内在函数。要使用缓存的投影矩阵，只需访问projectionMatrix属性。

new THREE.ARDebug(vrDisplay)

创建一个ARDebug面板来显示命中和姿势信息。使用getElement()返回由ARDebug面板管理的元素注入到您的内容。

• THREE.ARDebug#open()打开ARDebug面板。
• THREE.ARDebug#close()关闭ARDebug面板。
• HTMLElement THREE.ARDebug＃getElement（）返回调试面板注入内容的HTMLElement。

THREE.ARUtils

THREE.ARUtils不是一个构造函数，而是存储下面列出的几个实用函数的对象。

• Promise<VRDisplay?> THREE.ARUtils.getARDevice()返回使用AR功能解析为VRDisplay的承诺，如果设备不受支持，则返回null。
• boolean THREE.ARUtils.isARDisplay(vrDisplay)获取一个VRDisplay实例，并返回一个布尔值，无论这是否被视为AR显示。将来很可能是基于特色的。
• boolean THREE.ARUtils.isTango(vrDisplay)使用VRDisplay实例并返回一个布尔值，无论这是否为Tango-backed / ARCore Android设备。
• boolean THREE.ARUtils.isarkit(vrDisplay)使用VRDisplay实例并返回一个布尔值，无论这是否是基于ARKit的iOS设备。
• Promise<THREE.Mesh> THREE.ARUtils.loadBlocksModel(objPath, mtlPath?)为OBJ模型和可选的MTL纹理的路径创建路径，并返回一个解析到三个.Mesh的承诺，并加载适当的材料。可以从块中下载的模型使用。
• void THREE.ARUtils.placeObjectAtHit(object, hit, easing=1, applyOrientation=false)从一个调用中获取一个THREE.Object3D和一个VRHit对象，并将对象VRDisplay.prototype.hitTest和位置进行选择性地定位到命中的模型矩阵。可以选择使用缓动来将对象的当前变换转换为命中变换。
• void THREE.ARUtils.displayUnsupportedMessage()生成元素并向DOM注入消息，通知用户他们的浏览器不支持原型AR功能。

： » Web AR框架 three.ar.js API 大全