Skip to content

GitLab

Switch branch/tag
Find file Normal viewHistoryPermalink
index.html 4.97 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 
<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">
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
7 
  <title>Torus Demo</title>
Wolfgang Knopki's avatar
initial Template complete    
Wolfgang Knopki committed
8
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
9
10
11
12
13
14
15 
  <!-- 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. -->
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
16 
<button onclick="activateXR()">Start HOuse</button>
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
17
18
19
20
21
22 
<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});
GitLab's avatar
Initial template creation  
GitLab committed
23
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
24 
  const scene = new THREE.Scene();
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
25
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
26 
// Define the vertices
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
27 
 const vertices = new Float32Array([
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
28
29
30
31
32
33
34
35
36
37
38
39 
            -1.0, 0.0, 1.0,  // P0
             1.0, 0.0, 1.0,  // P1
             1.0, 0.0, -1.0, // P2
            -1.0, 0.0, -1.0, // P3
            -1.0, 2.0, 1.0,  // P4
             1.0, 2.0, 1.0,  // P5
             1.0, 2.0, -1.0, // P6
            -1.0, 2.0, -1.0, // P7
             0.0, 3.0, 0.0   // P8
        ]);

        // Define the indices for the walls
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
40 
        const wallIndices = new Uint16Array([
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
41
42
43
44
45
46
47
48 
            0, 1, 5, 0, 5, 4,  // Front face
            1, 2, 6, 1, 6, 5,  // Right face
            2, 3, 7, 2, 7, 6,  // Back face
            3, 0, 4, 3, 4, 7,  // Left face
            4, 5, 6, 4, 6, 7   // Top face
        ]);

        // Define the indices for the roof
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
49 
        const roofIndices = new Uint16Array([
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
50
51
52
53
54
55
56 
            4, 5, 8,  // Front roof face
            5, 6, 8,  // Right roof face
            6, 7, 8,  // Back roof face
            7, 4, 8   // Left roof face
        ]);

        // Create the wall geometry
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
57 
        const wallGeometry = new THREE.BufferGeometry();
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
58
59
60
61 
          wallGeometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
          wallGeometry.setIndex(new THREE.BufferAttribute(wallIndices, 1));

        // Create the roof geometry
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
62 
        const roofGeometry = new THREE.BufferGeometry();
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
63
64
65
66 
          roofGeometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
          roofGeometry.setIndex(new THREE.BufferAttribute(roofIndices, 1));

        // Create materials for walls and roof
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
67
68 
        const wallMaterial = new THREE.MeshBasicMaterial({ color: 0x8B4513, side: THREE.DoubleSide });
        const roofMaterial = new THREE.MeshBasicMaterial({ color: 0xFF0000, side: THREE.DoubleSide });
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
69
70 

        // Create the wall and roof meshes
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
71
72 
        const wallMesh = new THREE.Mesh(wallGeometry, wallMaterial);
        const roofMesh = new THREE.Mesh(roofGeometry, roofMaterial);
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
73
74
75
76
77
78
79
80
81
82
83
84
85 

        // Add the meshes to the scene
        scene.add(wallMesh);
        scene.add(roofMesh);

        // Render the scene
        function animate() {
            requestAnimationFrame(animate);
            wallMesh.rotation.y += 0.01;
            roofMesh.rotation.y += 0.01;
            renderer.render(scene, camera);
        }
        animate();
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102 

// 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".
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
103 
const session = await navigator.xr.requestSession("immersive-ar");
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
104
105
106 
session.updateRenderState({
  baseLayer: new XRWebGLLayer(session, gl)
});
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140 

// 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);
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
141 
}
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
142
143
144 
</script>
</body>
</html>

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