mirror of
https://github.com/google-ar/three.ar.js.git
synced 2026-01-25 14:06:43 +00:00
193 lines
5.5 KiB
HTML
193 lines
5.5 KiB
HTML
<!--
|
|
/*
|
|
* Copyright 2017 Google Inc. All Rights Reserved.
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
-->
|
|
<!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;
|
|
|
|
/**
|
|
* Use the `getARDisplay()` utility to leverage the WebVR API
|
|
* to see if there are any AR-capable WebVR VRDisplays. Returns
|
|
* a valid display if found. Otherwise, display the unsupported
|
|
* browser message.
|
|
*/
|
|
THREE.ARUtils.getARDisplay().then(function (display) {
|
|
if (display) {
|
|
vrDisplay = display;
|
|
init();
|
|
} else {
|
|
THREE.ARUtils.displayUnsupportedMessage();
|
|
}
|
|
});
|
|
|
|
function init() {
|
|
// Turn on the debugging panel
|
|
var arDebug = new THREE.ARDebug(vrDisplay);
|
|
document.body.appendChild(arDebug.getElement());
|
|
|
|
// Setup the three.js rendering environment
|
|
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();
|
|
|
|
// Creating the ARView, which is the object that handles
|
|
// the rendering of the camera stream behind the three.js
|
|
// scene
|
|
arView = new THREE.ARView(vrDisplay, renderer);
|
|
|
|
// The ARPerspectiveCamera is very similar to THREE.PerspectiveCamera,
|
|
// except when using an AR-capable browser, the camera uses
|
|
// the projection matrix provided from the device, so that the
|
|
// perspective camera's depth planes and field of view matches
|
|
// the physical camera on the device.
|
|
camera = new THREE.ARPerspectiveCamera(vrDisplay, 60, window.innerWidth / window.innerHeight, 0.01, 100);
|
|
|
|
// Create our ARReticle, which will continuously fire `hitTest` to trace
|
|
// the detected surfaces
|
|
reticle = new THREE.ARReticle(vrDisplay,
|
|
0.03, // innerRadius
|
|
0.04, // outerRadius
|
|
0xff0077, // color
|
|
0.25); // easing
|
|
scene.add(reticle);
|
|
|
|
// VRControls is a utility from three.js that applies the device's
|
|
// orientation/position to the perspective camera, keeping our
|
|
// real world and virtual world in sync.
|
|
vrControls = new THREE.VRControls(camera);
|
|
|
|
// Bind our event handlers
|
|
window.addEventListener('resize', onWindowResize, false);
|
|
|
|
update();
|
|
}
|
|
|
|
/**
|
|
* The render loop, called once per frame. Handles updating
|
|
* our scene and rendering.
|
|
*/
|
|
function update() {
|
|
// Render the device's camera stream on screen first of all.
|
|
// It allows to get the right pose synchronized with the right frame.
|
|
arView.render();
|
|
|
|
// Update our camera projection matrix in the event that
|
|
// the near or far planes have updated
|
|
camera.updateProjectionMatrix();
|
|
|
|
// Update our ARReticle's position, and provide normalized
|
|
// screen coordinates to send the hit test -- in this case, (0.5, 0.5)
|
|
// is the middle of our screen
|
|
reticle.update(0.5, 0.5);
|
|
|
|
// Update our perspective camera's positioning
|
|
vrControls.update();
|
|
|
|
// Render our three.js virtual scene
|
|
renderer.clearDepth();
|
|
renderer.render(scene, camera);
|
|
|
|
// Kick off the requestAnimationFrame to call this function
|
|
// on the next frame
|
|
requestAnimationFrame(update);
|
|
}
|
|
|
|
/**
|
|
* On window resize, update the perspective camera's aspect ratio,
|
|
* and call `updateProjectionMatrix` so that we can get the latest
|
|
* projection matrix provided from the device
|
|
*/
|
|
function onWindowResize () {
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
camera.updateProjectionMatrix();
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|