Skip to content

GitLab

Switch branch/tag
Find file Normal viewHistoryPermalink
index.html 4.36 KB
Newer Older
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
1 
<!doctype html>
GitLab's avatar
Initial template creation  
GitLab committed
2 
<html>
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
3
4
5
6
7 
<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>Hit to Place Demo</title>
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
8
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
9
10 
  <!-- three.js -->
  <script src="https://unpkg.com/three@0.126.0/build/three.js"></script>
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
11
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
12
13
14 
  <script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js"></script>
</head>
<body>
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
15
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
16
17 
<!-- Starting an immersive WebXR session requires user interaction.
    We start this one with a simple button. -->
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
18 
<button onclick="activateXR()">Tap to Place AR Demo</button>
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
19
20 
<script>
async function activateXR() {
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61 
  // 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, 1.0);
  directionalLight.position.set(10, 15, 10);
  scene.add(directionalLight);

// 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']});
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 another XRReferenceSpace that has the viewer as the origin.
const viewerSpace = await session.requestReferenceSpace('viewer');
// Perform hit testing using the viewer as origin.
const hitTestSource = await session.requestHitTestSource({ space: viewerSpace });
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
62
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
63
64 
const loader = new THREE.GLTFLoader();
let reticle;
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
65 
loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/reticle/reticle.gltf", function(gltf) {
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
66
67
68
69 
  reticle = gltf.scene;
  reticle.visible = false;
  scene.add(reticle);
})
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
70
71 
        // Model Source: Antique Camera by Maximillan Kamps
        // License: CC0 1.0 Universal (https://creativecommons.org/publicdomain/zero/1.0/legalcode)
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
72 
let antique;
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
73 
loader.load("./antiqueCamera/AntiqueCamera.gltf", function(gltf) {
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
74
75 
  antique = gltf.scene;
  antique.scale.set(0.15, 0.15, 0.15);
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
76
77
78 
});

session.addEventListener("select", (event) => {
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
79
80 
  if (antique) {
    const clone = antique.clone();
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114 
    clone.position.copy(reticle.position);
    scene.add(clone);
  }
});

// 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);

    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);
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
115 
    }
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
116
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
117
118 
    // Render the scene with THREE.WebGLRenderer.
    renderer.render(scene, camera)
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
119 
  }
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
120
121
122 
}
session.requestAnimationFrame(onXRFrame);
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
123
124
125
126 
}
</script>
</body>
</html>

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal