-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
5ead4bd
commit 46cdb20
Showing
1 changed file
with
14 additions
and
97 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,98 +1,15 @@ | ||
| <!doctype html> | ||
| <!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/[email protected]/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}); | ||
|
|
||
| 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); | ||
|
|
||
| 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; | ||
|
|
||
| const session = await navigator.xr.requestSession("immersive-ar"); | ||
| session.updateRenderState({ | ||
| baseLayer: new XRWebGLLayer(session, gl) | ||
| }); | ||
|
|
||
| // A 'local' reference space has a native origin that is located | ||
| // near the viewer's position at the time the session was created. | ||
| const referenceSpace = await session.requestReferenceSpace('local'); | ||
|
|
||
| // Create a render loop that allows us to draw on the AR view. | ||
| const onXRFrame = (time, frame) => { | ||
| // Queue up the next draw request. | ||
| session.requestAnimationFrame(onXRFrame); | ||
|
|
||
| // Bind the graphics framebuffer to the baseLayer's framebuffer | ||
| gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer) | ||
|
|
||
| // Retrieve the pose of the device. | ||
| // XRFrame.getViewerPose can return null while the session attempts to establish tracking. | ||
| const pose = frame.getViewerPose(referenceSpace); | ||
| if (pose) { | ||
| // In mobile AR, we only have one view. | ||
| const view = pose.views[0]; | ||
|
|
||
| const viewport = session.renderState.baseLayer.getViewport(view); | ||
| renderer.setSize(viewport.width, viewport.height) | ||
|
|
||
| // Use the view's transform matrix and projection matrix to configure the THREE.camera. | ||
| camera.matrix.fromArray(view.transform.matrix) | ||
| camera.projectionMatrix.fromArray(view.projectionMatrix); | ||
| camera.updateMatrixWorld(true); | ||
|
|
||
| // Render the scene with THREE.WebGLRenderer. | ||
| renderer.render(scene, camera) | ||
| } | ||
| } | ||
| session.requestAnimationFrame(onXRFrame); | ||
|
|
||
| } | ||
|
|
||
|
|
||
| </script> | ||
| </body> | ||
| </html> | ||
| <head> | ||
| <title>AR.js A-Frame Location-based</title> | ||
| <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script> | ||
| <script type='text/javascript' src='https://raw.githack.com/AR-js-org/AR.js/master/three.js/build/ar-threex-location-only.js'></script> | ||
| <script type='text/javascript' src='https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js'></script> | ||
| </head> | ||
| <body> | ||
| <a-scene vr-mode-ui='enabled: false' arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false' renderer='antialias: true; alpha: true'> | ||
| <a-camera gps-new-camera='gpsMinDistance: 5'></a-camera> | ||
| <a-entity material='color: red' geometry='primitive: box' gps-new-entity-place="latitude: <add-your-latitude>; longitude: <add-your-longitude>" scale="10 10 10"></a-entity> | ||
| </a-scene> | ||
| </body> | ||
| </html> |