... | ... | @@ -112,3 +112,31 @@ const cube = new THREE.Mesh(new THREE.BoxBufferGeometry(0.2, 0.2, 0.2), material |
|
|
cube.position.set(1, 1, 1);
|
|
|
scene.add(cube);
|
|
|
```
|
|
|
|
|
|
## Set up rendering using three.js
|
|
|
To be able to view this scene in AR, you'll need a renderer and a camera. The renderer uses WebGL to draw your scene to the screen. The camera describes the viewport from which the scene is viewed.
|
|
|
|
|
|
Add this code to the bottom of the **activateXR()** function:
|
|
|
```
|
|
|
// Set up the WebGLRenderer, which handles rendering to the session's base layer.
|
|
|
const renderer = new THREE.WebGLRenderer({
|
|
|
alpha: true,
|
|
|
preserveDrawingBuffer: true,
|
|
|
canvas: canvas,
|
|
|
context: gl
|
|
|
});
|
|
|
renderer.autoClear = false;
|
|
|
|
|
|
// The API directly updates the camera matrices.
|
|
|
// Disable matrix auto updates so three.js doesn't attempt
|
|
|
// to handle the matrices independently.
|
|
|
const camera = new THREE.PerspectiveCamera();
|
|
|
camera.matrixAutoUpdate = false;
|
|
|
```
|
|
|
|
|
|
## Create an XRSession
|
|
|
The entrypoint to WebXR is through **XRSystem.requestSession()**. Use the **immersive-ar** mode to allow rendered content to be viewed in a real-world environment.
|
|
|
|
|
|
An **XRReferenceSpace** describes the coordinate system used for objects within the virtual world. The 'local' mode is best suited for an AR experience, with a reference space that has an origin near the viewer and stable tracking.
|
|
|
|
|
|
To create an **XRSession** and **XRReferenceSpace**, add this code to the bottom of the **activateXR()** function: |
|
|
\ No newline at end of file |