... | ... | @@ -86,3 +86,29 @@ async function activateXR() { |
|
|
</html>
|
|
|
```
|
|
|
|
|
|
# Initialize three.js
|
|
|
Not much will happen when pressing the Start button. To set up a 3D environment, you can use a rendering library to display a scene.
|
|
|
|
|
|
In this example, you will use three.js, a JavaScript 3D rendering library that provides a WebGL renderer. Three.js handles rendering, cameras, and scene graphs, making it easier to display 3D content on the web.
|
|
|
## Create a scene
|
|
|
A 3D environment is generally modelled as a scene. Create a THREE.Scene that contains AR elements. The following code allows you to look at an unlit colored box in AR.
|
|
|
|
|
|
Add this code to the bottom of the **activateXR()** function:
|
|
|
```
|
|
|
const scene = new THREE.Scene();
|
|
|
|
|
|
// The cube will have a different color on each side.
|
|
|
const materials = [
|
|
|
new THREE.MeshBasicMaterial({color: 0xff0000}),
|
|
|
new THREE.MeshBasicMaterial({color: 0x0000ff}),
|
|
|
new THREE.MeshBasicMaterial({color: 0x00ff00}),
|
|
|
new THREE.MeshBasicMaterial({color: 0xff00ff}),
|
|
|
new THREE.MeshBasicMaterial({color: 0x00ffff}),
|
|
|
new THREE.MeshBasicMaterial({color: 0xffff00})
|
|
|
];
|
|
|
|
|
|
// Create the cube and add it to the demo scene.
|
|
|
const cube = new THREE.Mesh(new THREE.BoxBufferGeometry(0.2, 0.2, 0.2), materials);
|
|
|
cube.position.set(1, 1, 1);
|
|
|
scene.add(cube);
|
|
|
``` |