Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Esguerra Montana
Web AR
Commits
23042021
Commit
23042021
authored
Jun 16, 2024
by
Esguerra Montana
Browse files
Update index.html
parent
ae1c3370
Pipeline
#9407
passed with stage
in 5 seconds
Changes
1
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
public/index.html
View file @
23042021
...
...
@@ -13,7 +13,7 @@
<!-- Starting an immersive WebXR session requires user interaction.
We start this one with a simple button. -->
<button
onclick=
"activateXR()"
>
Start
HO
us
e
</button>
<button
onclick=
"activateXR()"
>
Start
Tor
us
</button>
<script>
async
function
activateXR
()
{
// Add a canvas element and initialize a WebGL context that is compatible with WebXR.
...
...
@@ -23,66 +23,15 @@ async function activateXR() {
const
scene
=
new
THREE
.
Scene
();
// Define the vertices
const
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
const
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
const
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
const
wallGeometry
=
new
THREE
.
BufferGeometry
();
wallGeometry
.
setAttribute
(
'
position
'
,
new
THREE
.
BufferAttribute
(
vertices
,
3
));
wallGeometry
.
setIndex
(
new
THREE
.
BufferAttribute
(
wallIndices
,
1
));
// Create the roof geometry
const
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
const
wallMaterial
=
new
THREE
.
MeshBasicMaterial
({
color
:
0x8B4513
,
side
:
THREE
.
DoubleSide
});
const
roofMaterial
=
new
THREE
.
MeshBasicMaterial
({
color
:
0xFF0000
,
side
:
THREE
.
DoubleSide
});
// Create the wall and roof meshes
const
wallMesh
=
new
THREE
.
Mesh
(
wallGeometry
,
wallMaterial
);
const
roofMesh
=
new
THREE
.
Mesh
(
roofGeometry
,
roofMaterial
);
// 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
();
// Color of the torus geometry.
const
material
=
new
THREE
.
MeshToonMaterial
({
color
:
0xc994c7
});
// Create the torus and add it to the demo scene.
const
torus
=
new
THREE
.
Mesh
(
new
THREE
.
PolyhedronBufferGeometry
(
6
,
2
,
3
),
material
);
//position the next geometry (sphere)
torus
.
position
.
set
(
0
,
0
,
-
1
);
// Add the mesh to the scene
scene
.
add
(
torus
);
// Set up the WebGLRenderer, which handles rendering to the session's base layer.
const
renderer
=
new
THREE
.
WebGLRenderer
({
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment