An error occurred while loading the file. Please try again.
-
Esguerra Montana authored15c4933a
<!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>Cube Demo</title> <!-- three.js --> <script src="https://unpkg.com/three@0.126.0/build/three.js"></script> <script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js"></script></head><body><!-- Starting an immersive WebXR session requires user interaction. We start this one with a simple button. --><button onclick="activateXR()">Start Cube Demo</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(); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.3); directionalLight.position.set(10, 15, 10); scene.add(directionalLight);// 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.5, 0.5, 0.5), materials);cube.position.set(0, 0, -1);scene.add(cube);// 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;// Initialize a WebXR session using "immersive-ar".const session = await navigator.xr.requestSession("immersive-ar", {requiredFeatures: ['hit-test']});// 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.
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
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>