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
WebarTTP
Commits
638e2a06
Commit
638e2a06
authored
11 months ago
by
Esguerra Montana
Browse files
Options
Download
Email Patches
Plain Diff
Update index.html
parent
46167b55
master
Pipeline
#9639
passed with stage
in 7 seconds
Changes
1
Pipelines
1
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
public/index.html
+15
-11
public/index.html
with
15 additions
and
11 deletions
+15
-11
public/index.html
+
15
-
11
View file @
638e2a06
<!doctype html>
<html>
<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"
>
<title>
Hit to Place Demo
</title>
<!-- three.js -->
<script
src=
"https://unpkg.com/three@0.126.0/build/three.js"
></script>
<script
src=
"https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js"
></script>
</head>
<body>
<!-- Starting an immersive WebXR session requires user interaction.
We start this one with a simple button. -->
<button
onclick=
"activateXR()"
>
Start Hit to Place Demo
</button>
<script>
async
function
activateXR
()
{
// Add a canvas element and initialize a WebGL context that is compatible with WebXR.
...
...
@@ -59,6 +56,9 @@ const viewerSpace = await session.requestReferenceSpace('viewer');
// Perform hit testing using the viewer as origin.
const
hitTestSource
=
await
session
.
requestHitTestSource
({
space
:
viewerSpace
});
const
loader
=
new
THREE
.
GLTFLoader
();
let
reticle
;
loader
.
load
(
"
https://immersive-web.github.io/webxr-samples/media/gltf/reticle/reticle.gltf
"
,
function
(
gltf
)
{
...
...
@@ -67,17 +67,16 @@ loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/reticle/re
scene
.
add
(
reticle
);
})
let
fox
;
loader
.
load
(
"
./
fox/Fox
.gltf
"
,
function
(
gltf
)
{
fox
=
gltf
.
scene
;
fox
.
scale
.
set
(
0.
0
5
,
0.
0
5
,
0.
0
5
);
// Adjust the scale as needed
let
chair
;
loader
.
load
(
"
./
mario/scene
.gltf
"
,
function
(
gltf
)
{
chair
=
gltf
.
scene
;
chair
.
scale
.
set
(
0.5
,
0.5
,
0.5
);
// Adjust the scale as needed
});
session
.
addEventListener
(
"
select
"
,
(
event
)
=>
{
if
(
fox
)
{
const
clone
=
fox
.
clone
();
if
(
chair
)
{
const
clone
=
chair
.
clone
();
clone
.
position
.
copy
(
reticle
.
position
);
clone
.
scale
.
set
(
0.05
,
0.05
,
0.05
);
// Ensure the clone is also scaled down
scene
.
add
(
clone
);
}
});
...
...
@@ -113,12 +112,17 @@ const onXRFrame = (time, frame) => {
reticle
.
updateMatrixWorld
(
true
);
}
// Render the scene with THREE.WebGLRenderer.
renderer
.
render
(
scene
,
camera
)
}
}
session
.
requestAnimationFrame
(
onXRFrame
);
}
</script>
</body>
...
...
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