不清楚 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增强浏览器可以到谷歌开发者社区进行测试。
： » three.ar.js 入门教程
原创文章，作者：745907710，如若转载，请注明出处：https://blog.ytso.com/tech/aiops/251270.html