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
GeoVistoogsi
AR
Commits
adc5f179
Commit
adc5f179
authored
5 months ago
by
Percen
Browse files
Options
Download
Email Patches
Plain Diff
Update public/index.html
parent
abcb1be2
master
21caog1bif-master-patch-76399
21caog1bif-master-patch-83779
21caog1bif-master-patch-96693
1 merge request
!8
Update public/index.html
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
public/index.html
+38
-0
public/index.html
with
38 additions
and
0 deletions
+38
-0
public/index.html
+
38
-
0
View file @
adc5f179
...
...
@@ -8,6 +8,7 @@
<!-- 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>
...
...
@@ -72,6 +73,33 @@ session.updateRenderState({
// near the viewer's position at the time the session was created.
const
referenceSpace
=
await
session
.
requestReferenceSpace
(
'
local
'
);
// 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 another XRReferenceSpace that has the viewer as the origin.
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
)
{
reticle
=
gltf
.
scene
;
reticle
.
visible
=
false
;
scene
.
add
(
reticle
);
})
let
flower
;
loader
.
load
(
"
https://immersive-web.github.io/webxr-samples/media/gltf/sunflower/sunflower.gltf
"
,
function
(
gltf
)
{
flower
=
gltf
.
scene
;
});
// Create a render loop that allows us to draw on the AR view.
const
onXRFrame
=
(
time
,
frame
)
=>
{
// Create a render loop that allows us to draw on the AR view.
const
onXRFrame
=
(
time
,
frame
)
=>
{
// Queue up the next draw request.
...
...
@@ -94,6 +122,16 @@ const onXRFrame = (time, frame) => {
camera
.
matrix
.
fromArray
(
view
.
transform
.
matrix
)
camera
.
projectionMatrix
.
fromArray
(
view
.
projectionMatrix
);
camera
.
updateMatrixWorld
(
true
);
const
hitTestResults
=
frame
.
getHitTestResults
(
hitTestSource
);
if
(
hitTestResults
.
length
>
0
&&
reticle
)
{
const
hitPose
=
hitTestResults
[
0
].
getPose
(
referenceSpace
);
reticle
.
visible
=
true
;
reticle
.
position
.
set
(
hitPose
.
transform
.
position
.
x
,
hitPose
.
transform
.
position
.
y
,
hitPose
.
transform
.
position
.
z
)
reticle
.
updateMatrixWorld
(
true
);
}
// Render the scene with THREE.WebGLRenderer.
renderer
.
render
(
scene
,
camera
)
...
...
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