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
d2d44074
Commit
d2d44074
authored
Jun 16, 2024
by
Esguerra Montana
Browse files
Update index.html
parent
950762d0
Pipeline
#9405
passed with stage
in 7 seconds
Changes
1
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
public/index.html
View file @
d2d44074
...
@@ -23,15 +23,66 @@ async function activateXR() {
...
@@ -23,15 +23,66 @@ async function activateXR() {
const
scene
=
new
THREE
.
Scene
();
const
scene
=
new
THREE
.
Scene
();
// Color of the torus geometry.
// Define the vertices
const
material
=
new
THREE
.
MeshToonMaterial
({
color
:
0xc994c7
});
var
vertices
=
new
Float32Array
([
-
1.0
,
0.0
,
1.0
,
// P0
// Create the torus and add it to the demo scene.
1.0
,
0.0
,
1.0
,
// P1
const
torus
=
new
THREE
.
Mesh
(
new
THREE
.
TorusKnotGeometry
(
0.3
,
0.2
,
32
,
6
,
2
,
3
),
material
);
1.0
,
0.0
,
-
1.0
,
// P2
//position the next geometry (sphere)
-
1.0
,
0.0
,
-
1.0
,
// P3
torus
.
position
.
set
(
0
,
0
,
-
1
);
-
1.0
,
2.0
,
1.0
,
// P4
// Add the mesh to the scene
1.0
,
2.0
,
1.0
,
// P5
scene
.
add
(
torus
);
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
var
wallMaterial
=
new
THREE
.
MeshBasicMaterial
({
color
:
0x8B4513
,
side
:
THREE
.
DoubleSide
});
var
roofMaterial
=
new
THREE
.
MeshBasicMaterial
({
color
:
0xFF0000
,
side
:
THREE
.
DoubleSide
});
// Create the wall and roof meshes
var
wallMesh
=
new
THREE
.
Mesh
(
wallGeometry
,
wallMaterial
);
var
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
();
// Set up the WebGLRenderer, which handles rendering to the session's base layer.
// Set up the WebGLRenderer, which handles rendering to the session's base layer.
const
renderer
=
new
THREE
.
WebGLRenderer
({
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