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
cf340097
Commit
cf340097
authored
Jun 09, 2024
by
Esguerra Montana
Browse files
Update index.html
parent
7453305d
Pipeline
#9356
passed with stage
in 6 seconds
Changes
1
Pipelines
1
Show whitespace changes
Inline
Side-by-side
public/index.html
View file @
cf340097
...
...
@@ -4,18 +4,16 @@
<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 Plac
e Demo
</title>
<title>
Cub
e 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 Plac
e Demo
</button>
<button
onclick=
"activateXR()"
>
Start
Cub
e Demo
</button>
<script>
async
function
activateXR
()
{
// Add a canvas element and initialize a WebGL context that is compatible with WebXR.
...
...
@@ -25,9 +23,20 @@ async function activateXR() {
const
scene
=
new
THREE
.
Scene
();
const
directionalLight
=
new
THREE
.
DirectionalLight
(
0xffffff
,
1.0
);
directionalLight
.
position
.
set
(
10
,
15
,
10
);
scene
.
add
(
directionalLight
);
// The cube will have a different color on each side.
const
materials
=
[
new
THREE
.
MeshBasicMaterial
({
color
:
0xff0000
}),
new
THREE
.
MeshBasicMaterial
({
color
:
0x0000ff
}),
new
THREE
.
MeshBasicMaterial
({
color
:
0x00ff00
}),
new
THREE
.
MeshBasicMaterial
({
color
:
0xff00ff
}),
new
THREE
.
MeshBasicMaterial
({
color
:
0x00ffff
}),
new
THREE
.
MeshBasicMaterial
({
color
:
0xffff00
})
];
// Create the cube and add it to the demo scene.
const
cube
=
new
THREE
.
Mesh
(
new
THREE
.
BoxBufferGeometry
(
0.5
,
0.5
,
0.5
),
materials
);
cube
.
position
.
set
(
0
,
0
,
-
1
);
scene
.
add
(
cube
);
// Set up the WebGLRenderer, which handles rendering to the session's base layer.
const
renderer
=
new
THREE
.
WebGLRenderer
({
...
...
@@ -45,7 +54,7 @@ const camera = new THREE.PerspectiveCamera();
camera
.
matrixAutoUpdate
=
false
;
// Initialize a WebXR session using "immersive-ar".
const
session
=
await
navigator
.
xr
.
requestSession
(
"
immersive-ar
"
,
{
requiredFeatures
:
[
'
hit-test
'
]}
);
const
session
=
await
navigator
.
xr
.
requestSession
(
"
immersive-ar
"
);
session
.
updateRenderState
({
baseLayer
:
new
XRWebGLLayer
(
session
,
gl
)
});
...
...
@@ -54,35 +63,6 @@ session.updateRenderState({
// 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
;
});
session
.
addEventListener
(
"
select
"
,
(
event
)
=>
{
if
(
flower
)
{
const
clone
=
flower
.
clone
();
clone
.
position
.
copy
(
reticle
.
position
);
scene
.
add
(
clone
);
}
});
// Create a render loop that allows us to draw on the AR view.
const
onXRFrame
=
(
time
,
frame
)
=>
{
// Queue up the next draw request.
...
...
@@ -106,23 +86,12 @@ const onXRFrame = (time, frame) => {
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
)
}
}
session
.
requestAnimationFrame
(
onXRFrame
);
}
</script>
</body>
...
...
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