| ... | @@ -51,4 +51,38 @@ If everything works fine you will see this page: |
... | @@ -51,4 +51,38 @@ If everything works fine you will see this page: |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
# **Step 2 - index.html** |
|
# **Step 2 - Create an HTML page**
|
|
|
|
WebXR requires user interaction to be able to start a session. Create a button that calls **activateXR()**. Upon loading the page, the user can use this button to start the AR experience.
|
|
|
|
|
|
|
|
Edit the **index.html** and add the following HTML code to it:
|
|
|
|
```
|
|
|
|
<!doctype html>
|
|
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
<meta name="viewport"
|
|
|
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
|
|
<title>Hello WebXR!</title>
|
|
|
|
|
|
|
|
<!-- three.js -->
|
|
|
|
<script src="https://unpkg.com/three@0.126.0/build/three.js"></script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
|
|
<!-- Starting an immersive WebXR session requires user interaction.
|
|
|
|
We start this one with a simple button. -->
|
|
|
|
<button onclick="activateXR()">Start Hello WebXR</button>
|
|
|
|
<script>
|
|
|
|
async function activateXR() {
|
|
|
|
// Add a canvas element and initialize a WebGL context that is compatible with WebXR.
|
|
|
|
const canvas = document.createElement("canvas");
|
|
|
|
document.body.appendChild(canvas);
|
|
|
|
const gl = canvas.getContext("webgl", {xrCompatible: true});
|
|
|
|
|
|
|
|
// To be continued in upcoming steps.
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|
|
```
|
|
|
|
|
