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

HTML5 herman 2613浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

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)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » Web AR框架 three.ar.js API 大全