three.ar.js 入门教程

HTML5 herman 2460浏览 0评论

不清楚 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)!

本文原文出处:业余草: » three.ar.js 入门教程