... | @@ -88,11 +88,11 @@ async function activateXR() { |
... | @@ -88,11 +88,11 @@ async function activateXR() { |
|
</html>
|
|
</html>
|
|
```
|
|
```
|
|
|
|
|
|
# Initialize three.js
|
|
## 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.
|
|
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.
|
|
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
|
|
### 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.
|
|
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:
|
|
Add this code to the bottom of the **activateXR()** function:
|
... | @@ -115,7 +115,7 @@ cube.position.set(1, 1, 1); |
... | @@ -115,7 +115,7 @@ cube.position.set(1, 1, 1); |
|
scene.add(cube);
|
|
scene.add(cube);
|
|
```
|
|
```
|
|
|
|
|
|
## Set up rendering using three.js
|
|
### 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.
|
|
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:
|
|
Add this code to the bottom of the **activateXR()** function:
|
... | @@ -198,7 +198,7 @@ Navigate to the webpage you created from your device. You should be able to view |
... | @@ -198,7 +198,7 @@ Navigate to the webpage you created from your device. You should be able to view |
|
The complete code can be downloaded [cube.html](uploads/ac0260539a69bb6d5e8c440ac33c353e/cube.html) and a live demo can be acceded [here](https://transfer.hft-stuttgart.de/pages/muhammad.alfakhori/ar/1-Cube.html).
|
|
The complete code can be downloaded [cube.html](uploads/ac0260539a69bb6d5e8c440ac33c353e/cube.html) and a live demo can be acceded [here](https://transfer.hft-stuttgart.de/pages/muhammad.alfakhori/ar/1-Cube.html).
|
|
|
|
|
|
|
|
|
|
# **Tap to place **
|
|
# **Tap to place**
|
|
A common way of interacting with the AR world is through a **hit test**, which finds an intersection between a ray and real-world geometry. In Hello WebXR, you'll use a hit test to place a sunflower in the virtual world.
|
|
A common way of interacting with the AR world is through a **hit test**, which finds an intersection between a ray and real-world geometry. In Hello WebXR, you'll use a hit test to place a sunflower in the virtual world.
|
|
|
|
|
|
## Remove the demo cube
|
|
## Remove the demo cube
|
... | | ... | |