diff --git a/simplear.html b/simplear.html deleted file mode 100644 index 25db1cbe6e643b3f845acfb452e01877f4108397..0000000000000000000000000000000000000000 --- a/simplear.html +++ /dev/null @@ -1,120 +0,0 @@ -<!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>Simple AR</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> - -<button onclick="activateXR()">Start Hit to Place Demo</button> -<script> -async function activateXR() { - 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, 1.0); - directionalLight.position.set(10, 15, 10); - scene.add(directionalLight); - - const renderer = new THREE.WebGLRenderer({ alpha: true, preserveDrawingBuffer: true, canvas: canvas, context: gl }); - renderer.autoClear = false; - - const camera = new THREE.PerspectiveCamera(); - camera.matrixAutoUpdate = false; - - const session = await navigator.xr.requestSession("immersive-ar", { requiredFeatures: ['hit-test'] }); - session.updateRenderState({ baseLayer: new XRWebGLLayer(session, gl) }); - - const referenceSpace = await session.requestReferenceSpace('local'); - const viewerSpace = await session.requestReferenceSpace('viewer'); - const hitTestSource = await session.requestHitTestSource({ space: viewerSpace }); - - const loader = new THREE.GLTFLoader(); - let reticle; - loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/reticle/reticle.gltf", function(gltf) { - reticle = gltf.scene; - reticle.visible = false; - scene.add(reticle); - }); - - let flower; - loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/sunflower/sunflower.gltf", function(gltf) { - flower = gltf.scene; - }); - - let selectedObject = null; - let initialHitTestSource = null; - - session.addEventListener("selectstart", (event) => { - if (reticle.visible) { - const hitTestResults = event.frame.getHitTestResults(hitTestSource); - if (hitTestResults.length > 0) { - const hitPose = hitTestResults[0].getPose(referenceSpace); - selectedObject = flower.clone(); - selectedObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z); - scene.add(selectedObject); - initialHitTestSource = hitTestSource; - } - } else { - const raycaster = new THREE.Raycaster(); - const mouse = new THREE.Vector2(); - raycaster.setFromCamera(mouse, camera); - - const intersects = raycaster.intersectObjects(scene.children, true); - if (intersects.length > 0) { - selectedObject = intersects[0].object; - initialHitTestSource = hitTestSource; - } - } - }); - - session.addEventListener("selectend", () => { - selectedObject = null; - }); - - const onXRFrame = (time, frame) => { - session.requestAnimationFrame(onXRFrame); - gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer); - - const pose = frame.getViewerPose(referenceSpace); - if (pose) { - const view = pose.views[0]; - const viewport = session.renderState.baseLayer.getViewport(view); - renderer.setSize(viewport.width, viewport.height); - - camera.matrix.fromArray(view.transform.matrix); - camera.projectionMatrix.fromArray(view.projectionMatrix); - camera.updateMatrixWorld(true); - - const hitTestResults = frame.getHitTestResults(hitTestSource); - if (hitTestResults.length > 0 && reticle) { - const hitPose = hitTestResults[0].getPose(referenceSpace); - reticle.visible = true; - reticle.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z); - reticle.updateMatrixWorld(true); - } - - if (selectedObject && initialHitTestSource) { - const hitTestResults = frame.getHitTestResults(initialHitTestSource); - if (hitTestResults.length > 0) { - const hitPose = hitTestResults[0].getPose(referenceSpace); - selectedObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z); - selectedObject.updateMatrixWorld(true); - } - } - - renderer.render(scene, camera); - } - }; - session.requestAnimationFrame(onXRFrame); -} -</script> -</body> -</html>