Skip to content

GitLab

Switch branch/tag
Find file Normal viewHistoryPermalink
index.html 6.59 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>Basic Geometries 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 Static Geometries</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
27
28
29
30
31 
  // Add lighting to the tetrahedro scene
  //const light = new THREE.DirectionalLight(0xffffff, 1);
  //light.position.set(1, 1, 1).normalize();
  //scene.add(light);

   // Add lighting to the house scene
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
32 
  const light = new THREE.DirectionalLight(0xffffff, 1);
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
33
34 
  light.position.set(5, 10, 7.5);
  light.castShadow = true; // Enable shadow casting
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
35
36 
  scene.add(light);
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
37
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
38
39
40
41 
  const ambientLight = new THREE.AmbientLight(0x404040); // soft white light
  scene.add(ambientLight);

  // Color of the tetrahedron geometry.
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
42 
  //const material = new THREE.MeshPhysicalMaterial({ color: 0xC70039, roughness: 0.5, metalness: 0.5, clearcoat: 1.0, clearcoatRoughness: 0.1 });
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
43
44 

  // Create the tetrahedron and add it to the demo scene.
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
45 
  //const tetrahedron = new THREE.Mesh(new THREE.TetrahedronGeometry(0.5), material);
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
46
47 
  
  // Position the tetrahedron
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
48 
  //tetrahedron.position.set(0, 0, -1);
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
49
50 

  // Add the mesh to the scene
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93 
  //scene.add(tetrahedron);

// Define the vertices
  var vertices = new Float32Array([
    -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
  var wallIndices = new Uint16Array([
    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
  var roofIndices = new Uint16Array([
    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
  var wallGeometry = new THREE.BufferGeometry();
  wallGeometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
  wallGeometry.setIndex(new THREE.BufferAttribute(wallIndices, 1));

  // Create the roof geometry
  var roofGeometry = new THREE.BufferGeometry();
  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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108 
  var wallMaterial = new THREE.MeshPhysicalMaterial({
    color: 0x8B4513,
    metalness: 0.7, // Make it metallic
    roughness: 0.4, // Adjust for shininess
    clearcoat: 0.3, // Add clear coat for a polished effect
    clearcoatRoughness: 0.1
  });

  var roofMaterial = new THREE.MeshPhysicalMaterial({
    color: 0xFF0000,
    metalness: 0.9, // Make it more metallic
    roughness: 0.2, // Adjust for more shininess
    clearcoat: 0.3,
    clearcoatRoughness: 0.1
  });
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
109
110
111
112
113 

  // Create the wall and roof meshes
  var wallMesh = new THREE.Mesh(wallGeometry, wallMaterial);
  var roofMesh = new THREE.Mesh(roofGeometry, roofMaterial);
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
114
115
116
117
118
119 
  // Enable shadows for the house meshes
  wallMesh.castShadow = true;
  wallMesh.receiveShadow = true;
  roofMesh.castShadow = true;
  roofMesh.receiveShadow = true;
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
120 
  // Position the house
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
121
122 
  wallMesh.position.set(0, -1.5, -3);
  roofMesh.position.set(0, -1.5, -3);
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
123
124
125
126
127 

  // Add the meshes to the scene
  scene.add(wallMesh);
  scene.add(roofMesh);
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
128
129
130
131
132
133
134
135 
  // Add a ground plane to receive shadows
  const groundGeometry = new THREE.PlaneGeometry(10, 10);
  const groundMaterial = new THREE.ShadowMaterial({ opacity: 0.5 });
  const groundMesh = new THREE.Mesh(groundGeometry, groundMaterial);
  groundMesh.rotation.x = -Math.PI / 2; // Rotate to lie flat
  groundMesh.position.y = -1; // Position it below the house
  groundMesh.receiveShadow = true;
  scene.add(groundMesh);
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
136
137
138
139
140
141
142
143
144 

  // 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;
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
145
146
147 
  renderer.shadowMap.enabled = true; 
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187 

  // 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");
  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);
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
188
189
190
191 
      // Rotate the house
      wallMesh.rotation.y += 0.01;
      roofMesh.rotation.y += 0.01;
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
192
193
194
195 
      // Render the scene with THREE.WebGLRenderer.
      renderer.render(scene, camera);
    }
  };
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
196 
  session.requestAnimationFrame(onXRFrame);
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
197 
}
Esguerra Montana's avatar
Update index.html    
Esguerra Montana committed
198
199
200 
</script>
</body>
</html>

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