| ... | ... | @@ -217,3 +217,37 @@ To initialize **hit test** functionality, request session with the hit-test feat |
|
|
|
const session = await navigator.xr.requestSession("immersive-ar", {requiredFeatures: ['hit-test']});
|
|
|
|
```
|
|
|
|
|
|
|
|
## Add a model loader
|
|
|
|
Currently, the scene only contains a colored cube. To make the experience more interesting, add a model loader, which allows GLTF models to be loaded.
|
|
|
|
|
|
|
|
In your document's **<head>** tag, add three.js' **GLTFLoader**.
|
|
|
|
|
|
|
|
```
|
|
|
|
<!-- three.js -->
|
|
|
|
<script src="https://unpkg.com/three@0.126.0/build/three.js"></script>
|
|
|
|
|
|
|
|
<script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js"></script>
|
|
|
|
```
|
|
|
|
|
|
|
|
## Load GLTF models
|
|
|
|
Use the model loader from the previous step to load a targeting reticle and a sunflower from the web.
|
|
|
|
|
|
|
|
Add this code above **onXRFrame**:
|
|
|
|
|
|
|
|
```
|
|
|
|
const loader = new THREE.GLTFLoader();
|
|
|
|
let reticle;
|
|
|
|
loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/reticle/reticle.gltf", function(gltf) {
|
|
|
|
reticle = gltf.scene;
|
|
|
|
reticle.visible = false;
|
|
|
|
scene.add(reticle);
|
|
|
|
})
|
|
|
|
|
|
|
|
let flower;
|
|
|
|
loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/sunflower/sunflower.gltf", function(gltf) {
|
|
|
|
flower = gltf.scene;
|
|
|
|
});
|
|
|
|
|
|
|
|
// Create a render loop that allows us to draw on the AR view.
|
|
|
|
const onXRFrame = (time, frame) => {
|
|
|
|
``` |
