本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云
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功能。
最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！
本文原文出处：业余草： » Web AR框架 three.ar.js API 大全