Skip to content
GitLab
Explore
Projects
Groups
Snippets
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Esguerra Montana
Web AR
Commits
ae1c3370
Commit
ae1c3370
authored
1 year ago
by
Esguerra Montana
Browse files
Options
Download
Email Patches
Plain Diff
Update index.html
parent
d2d44074
Pipeline
#9406
passed with stage
in 6 seconds
Changes
1
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
public/index.html
+10
-10
public/index.html
with
10 additions
and
10 deletions
+10
-10
public/index.html
+
10
-
10
View file @
ae1c3370
...
@@ -13,7 +13,7 @@
...
@@ -13,7 +13,7 @@
<!-- Starting an immersive WebXR session requires user interaction.
<!-- Starting an immersive WebXR session requires user interaction.
We start this one with a simple button. -->
We start this one with a simple button. -->
<button
onclick=
"activateXR()"
>
Start
Tor
us
</button>
<button
onclick=
"activateXR()"
>
Start
HO
us
e
</button>
<script>
<script>
async
function
activateXR
()
{
async
function
activateXR
()
{
// Add a canvas element and initialize a WebGL context that is compatible with WebXR.
// Add a canvas element and initialize a WebGL context that is compatible with WebXR.
...
@@ -24,7 +24,7 @@ async function activateXR() {
...
@@ -24,7 +24,7 @@ async function activateXR() {
const
scene
=
new
THREE
.
Scene
();
const
scene
=
new
THREE
.
Scene
();
// Define the vertices
// Define the vertices
var
vertices
=
new
Float32Array
([
const
vertices
=
new
Float32Array
([
-
1.0
,
0.0
,
1.0
,
// P0
-
1.0
,
0.0
,
1.0
,
// P0
1.0
,
0.0
,
1.0
,
// P1
1.0
,
0.0
,
1.0
,
// P1
1.0
,
0.0
,
-
1.0
,
// P2
1.0
,
0.0
,
-
1.0
,
// P2
...
@@ -37,7 +37,7 @@ async function activateXR() {
...
@@ -37,7 +37,7 @@ async function activateXR() {
]);
]);
// Define the indices for the walls
// Define the indices for the walls
var
wallIndices
=
new
Uint16Array
([
const
wallIndices
=
new
Uint16Array
([
0
,
1
,
5
,
0
,
5
,
4
,
// Front face
0
,
1
,
5
,
0
,
5
,
4
,
// Front face
1
,
2
,
6
,
1
,
6
,
5
,
// Right face
1
,
2
,
6
,
1
,
6
,
5
,
// Right face
2
,
3
,
7
,
2
,
7
,
6
,
// Back face
2
,
3
,
7
,
2
,
7
,
6
,
// Back face
...
@@ -46,7 +46,7 @@ async function activateXR() {
...
@@ -46,7 +46,7 @@ async function activateXR() {
]);
]);
// Define the indices for the roof
// Define the indices for the roof
var
roofIndices
=
new
Uint16Array
([
const
roofIndices
=
new
Uint16Array
([
4
,
5
,
8
,
// Front roof face
4
,
5
,
8
,
// Front roof face
5
,
6
,
8
,
// Right roof face
5
,
6
,
8
,
// Right roof face
6
,
7
,
8
,
// Back roof face
6
,
7
,
8
,
// Back roof face
...
@@ -54,22 +54,22 @@ async function activateXR() {
...
@@ -54,22 +54,22 @@ async function activateXR() {
]);
]);
// Create the wall geometry
// Create the wall geometry
var
wallGeometry
=
new
THREE
.
BufferGeometry
();
const
wallGeometry
=
new
THREE
.
BufferGeometry
();
wallGeometry
.
setAttribute
(
'
position
'
,
new
THREE
.
BufferAttribute
(
vertices
,
3
));
wallGeometry
.
setAttribute
(
'
position
'
,
new
THREE
.
BufferAttribute
(
vertices
,
3
));
wallGeometry
.
setIndex
(
new
THREE
.
BufferAttribute
(
wallIndices
,
1
));
wallGeometry
.
setIndex
(
new
THREE
.
BufferAttribute
(
wallIndices
,
1
));
// Create the roof geometry
// Create the roof geometry
var
roofGeometry
=
new
THREE
.
BufferGeometry
();
const
roofGeometry
=
new
THREE
.
BufferGeometry
();
roofGeometry
.
setAttribute
(
'
position
'
,
new
THREE
.
BufferAttribute
(
vertices
,
3
));
roofGeometry
.
setAttribute
(
'
position
'
,
new
THREE
.
BufferAttribute
(
vertices
,
3
));
roofGeometry
.
setIndex
(
new
THREE
.
BufferAttribute
(
roofIndices
,
1
));
roofGeometry
.
setIndex
(
new
THREE
.
BufferAttribute
(
roofIndices
,
1
));
// Create materials for walls and roof
// Create materials for walls and roof
var
wallMaterial
=
new
THREE
.
MeshBasicMaterial
({
color
:
0x8B4513
,
side
:
THREE
.
DoubleSide
});
const
wallMaterial
=
new
THREE
.
MeshBasicMaterial
({
color
:
0x8B4513
,
side
:
THREE
.
DoubleSide
});
var
roofMaterial
=
new
THREE
.
MeshBasicMaterial
({
color
:
0xFF0000
,
side
:
THREE
.
DoubleSide
});
const
roofMaterial
=
new
THREE
.
MeshBasicMaterial
({
color
:
0xFF0000
,
side
:
THREE
.
DoubleSide
});
// Create the wall and roof meshes
// Create the wall and roof meshes
var
wallMesh
=
new
THREE
.
Mesh
(
wallGeometry
,
wallMaterial
);
const
wallMesh
=
new
THREE
.
Mesh
(
wallGeometry
,
wallMaterial
);
var
roofMesh
=
new
THREE
.
Mesh
(
roofGeometry
,
roofMaterial
);
const
roofMesh
=
new
THREE
.
Mesh
(
roofGeometry
,
roofMaterial
);
// Add the meshes to the scene
// Add the meshes to the scene
scene
.
add
(
wallMesh
);
scene
.
add
(
wallMesh
);
...
...
This diff is collapsed.
Click to expand it.
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new 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
Menu
Explore
Projects
Groups
Snippets