公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog2,发送下载链接帮助你免费下载!
本博客日IP超过2000,PV 3000 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog2,之前的微信号好友位已满,备注:返现
受密码保护的文章请关注“业余草”公众号,回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年,高性价比,助您轻松上云
本博客日IP超过2000,PV 3000 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog2,之前的微信号好友位已满,备注:返现
受密码保护的文章请关注“业余草”公众号,回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年,高性价比,助您轻松上云
不清楚 three.ar.js 的朋友,可以看我的关于three.ar.js的介绍。
本文将通过一个例子讲解 three.ar.js 的安装和使用。
安装
使用 Script 脚本的可以下下载 three.ar.js。下载完成后并将其作为脚本标签包含在网页中。使用 three.ar.js 必须先引入 three.js。
<script src='three.js'></script> <script src='three.ar.js'></script>
如果您使用的是构建工具,像browserify或的WebPack,可以通过NPM进行安装。注意,您还必须通过npm安装three.js。
$ npm install --save three three.ar.js
使用
下面是一个通过 Script 脚本标签引入 three.ar.js 方式的一个完整demo。
<!DOCTYPE html> <html lang="en"> <head> <title>three.ar.js - Reticle</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <style> body { font-family: monospace; margin: 0; overflow: hidden; position: fixed; width: 100%; height: 100vh; -webkit-user-select: none; user-select: none; } #info { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 0); margin: 1em; z-index: 10; display: block; width: 100%; line-height: 2em; text-align: center; } #info a, #info .title { padding: 0.4em 0.6em; border-radius: 0.1em; } #info a { color: rgba(255, 255, 255, 0.8); background-color: rgba(40, 40, 40, 0.6); font-weight: bold; text-decoration: none; } .title { color: rgba(255, 255, 255, 0.9); background-color: rgba(40, 40, 40, 0.4); margin-left: 0.2em; } canvas { position: absolute; top: 0; left: 0; } </style> </head> <body> <div id="info"> <a href="https://github.com/google-ar/three.ar.js">three.ar.js</a><span class="title">Reticle</span> </div> <script src="../third_party/three.js/three.js"></script> <script src="../third_party/three.js/VRControls.js"></script> <script src="../dist/three.ar.js"></script> <script> var vrDisplay; var vrControls; var arView; var canvas; var camera; var scene; var renderer; var reticle; /** *使用`getARDisplay()`工具来利用WebVR API *看看是否有任何支持AR的WebVR VRDisplay。返回 *如果找到有效的显示。否则,显示不受支持 *浏览器消息。 * / THREE.ARUtils.getARDisplay().then(function (display) { if (display) { vrDisplay = display; init(); } else { THREE.ARUtils.displayUnsupportedMessage(); } }); function init() { //打开调试面板 var arDebug = new THREE.ARDebug(vrDisplay); document.body.appendChild(arDebug.getElement()); //设置three.js渲染环境 renderer = new THREE.WebGLRenderer({ alpha: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); renderer.autoClear = false; canvas = renderer.domElement; document.body.appendChild(canvas); scene = new THREE.Scene(); //创建ARView,它是处理的对象 //在3.js后面渲染相机流 //场景 arView = new THREE.ARView(vrDisplay, renderer); // ARPerspectiveCamera非常类似于THREE.PerspectiveCamera, //除了使用支持AR的浏览器,相机使用 //从设备提供的投影矩阵,使得 //透视相机的深度平面和视野匹配 //设备上的物理摄像头。 camera = new THREE.ARPerspectiveCamera(vrDisplay, 60, window.innerWidth / window.innerHeight, 0.01, 100); //创建我们的ARReticle,它将不断地触发“hitTest”进行跟踪 //检测到的表面 reticle = new THREE.ARReticle(vrDisplay, 0.03, // innerRadius 0.04, // outerRadius 0xff0077, // 颜色 0.25); // 宽松 scene.add(reticle); // VRControls是三个应用设备的实用程序 //取向/位置到透视相机,保持我们 //现实世界和虚拟世界的同步。 vrControls = new THREE.VRControls(camera); //绑定我们的事件处理程序 window.addEventListener('resize', onWindowResize, false); update(); } /** *渲染循环,每帧调用一次。处理更新 *我们的场景和渲染。 */ function update() { //在更新我们的相机投影矩阵的情况下 //近或远的飞机已更新 camera.updateProjectionMatrix(); //更新我们的ARReticle的位置,并提供归一化 //屏幕坐标发送命中测试 - 在这种情况下,(0.5,0.5) //是我们屏幕的中间 reticle.update(0.5, 0.5); //更新我们的观点相机的位置 vrControls.update(); //在屏幕上渲染设备的相机流 arView.render(); //渲染我们的三个虚拟场景 renderer.clearDepth(); renderer.render(scene, camera); //启动requestAnimationFrame来调用此函数 //在下一帧 requestAnimationFrame(update); } /** *在窗口调整大小时,更新透视相机的纵横比, *并调用`updateProjectionMatrix`,以便我们可以得到最新的 *从设备提供的投影矩阵 */ function onWindowResize () { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } </script> </body> </html>
通过上面的代码,我们可以使用AR增强浏览器来访问该demo的实现效果。相关AR增强浏览器可以到谷歌开发者社区进行测试。
最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加作者微信号:xttblog2。备注:“1”,添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系!
本文原文出处:业余草: » three.ar.js 入门教程