|
@@ -9,7 +9,7 @@
|
|
|
<body>
|
|
<body>
|
|
|
|
|
|
|
|
<div id="info">
|
|
<div id="info">
|
|
|
- <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> ar - hit test<br/>Enable chrome://flags/#webxr-ar-module<br/>Enable chrome://flags/#webxr-hit-test<br/>(Chrome Android 80+)
|
|
|
|
|
|
|
+ <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> ar - hit test<br/>Enable chrome://flags/#webxr-ar-module<br/>Enable chrome://flags/#webxr-hit-test<br/>(Chrome Android 81+)
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<script type="module">
|
|
<script type="module">
|
|
@@ -21,7 +21,10 @@
|
|
|
var camera, scene, renderer;
|
|
var camera, scene, renderer;
|
|
|
var controller;
|
|
var controller;
|
|
|
|
|
|
|
|
- var matrix, ray, reticle;
|
|
|
|
|
|
|
+ var reticle;
|
|
|
|
|
+
|
|
|
|
|
+ var hitTestSource;
|
|
|
|
|
+ var hitTestSourceRequested = false;
|
|
|
|
|
|
|
|
init();
|
|
init();
|
|
|
animate();
|
|
animate();
|
|
@@ -49,7 +52,7 @@
|
|
|
|
|
|
|
|
//
|
|
//
|
|
|
|
|
|
|
|
- document.body.appendChild( ARButton.createButton( renderer ) );
|
|
|
|
|
|
|
+ document.body.appendChild( ARButton.createButton( renderer, { requiredFeatures: [ 'hit-test' ] } ) );
|
|
|
|
|
|
|
|
//
|
|
//
|
|
|
|
|
|
|
@@ -73,10 +76,6 @@
|
|
|
controller.addEventListener( 'select', onSelect );
|
|
controller.addEventListener( 'select', onSelect );
|
|
|
scene.add( controller );
|
|
scene.add( controller );
|
|
|
|
|
|
|
|
- matrix = new THREE.Matrix4();
|
|
|
|
|
-
|
|
|
|
|
- ray = new THREE.Ray();
|
|
|
|
|
-
|
|
|
|
|
reticle = new THREE.Mesh(
|
|
reticle = new THREE.Mesh(
|
|
|
new THREE.RingBufferGeometry( 0.15, 0.2, 32 ).rotateX( - Math.PI / 2 ),
|
|
new THREE.RingBufferGeometry( 0.15, 0.2, 32 ).rotateX( - Math.PI / 2 ),
|
|
|
new THREE.MeshBasicMaterial()
|
|
new THREE.MeshBasicMaterial()
|
|
@@ -114,35 +113,39 @@
|
|
|
|
|
|
|
|
var referenceSpace = renderer.xr.getReferenceSpace();
|
|
var referenceSpace = renderer.xr.getReferenceSpace();
|
|
|
var session = renderer.xr.getSession();
|
|
var session = renderer.xr.getSession();
|
|
|
- var pose = frame.getViewerPose( referenceSpace );
|
|
|
|
|
|
|
|
|
|
- if ( pose ) {
|
|
|
|
|
|
|
+ if ( hitTestSourceRequested === false ) {
|
|
|
|
|
+
|
|
|
|
|
+ session.requestReferenceSpace( 'viewer' ).then( function ( referenceSpace ) {
|
|
|
|
|
+
|
|
|
|
|
+ session.requestHitTestSource( { space: referenceSpace } ).then( function ( source ) {
|
|
|
|
|
|
|
|
- matrix.fromArray( pose.transform.matrix );
|
|
|
|
|
|
|
+ hitTestSource = source;
|
|
|
|
|
|
|
|
- ray.origin.set( 0, 0, 0 );
|
|
|
|
|
- ray.direction.set( 0, 0, - 1 );
|
|
|
|
|
- ray.applyMatrix4( matrix );
|
|
|
|
|
|
|
+ } );
|
|
|
|
|
|
|
|
- var xrRay = new XRRay( ray.origin, ray.direction );
|
|
|
|
|
|
|
+ } );
|
|
|
|
|
|
|
|
- session.requestHitTest( xrRay, referenceSpace )
|
|
|
|
|
- .then( function ( results ) {
|
|
|
|
|
|
|
+ hitTestSourceRequested = true;
|
|
|
|
|
|
|
|
- if ( results.length ) {
|
|
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- var hitResult = results[ 0 ];
|
|
|
|
|
|
|
+ if ( hitTestSource ) {
|
|
|
|
|
|
|
|
- reticle.visible = true;
|
|
|
|
|
- reticle.matrix.fromArray( hitResult.hitMatrix );
|
|
|
|
|
|
|
+ var hitTestResults = frame.getHitTestResults( hitTestSource );
|
|
|
|
|
|
|
|
- } else {
|
|
|
|
|
|
|
+ if ( hitTestResults.length ) {
|
|
|
|
|
|
|
|
- reticle.visible = false;
|
|
|
|
|
|
|
+ var hit = hitTestResults[ 0 ];
|
|
|
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ reticle.visible = true;
|
|
|
|
|
+ reticle.matrix.fromArray( hit.getPose( referenceSpace ).transform.matrix );
|
|
|
|
|
|
|
|
- } );
|
|
|
|
|
|
|
+ } else {
|
|
|
|
|
+
|
|
|
|
|
+ reticle.visible = false;
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
Mr.doob