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
1deb0b28
Commit
1deb0b28
authored
Jun 09, 2024
by
Esguerra Montana
Browse files
Update index.html
parent
14bf0fb1
Pipeline
#9353
passed with stage
in 7 seconds
Changes
1
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
public/index.html
View file @
1deb0b28
...
@@ -4,16 +4,18 @@
...
@@ -4,16 +4,18 @@
<meta
charset=
"UTF-8"
>
<meta
charset=
"UTF-8"
>
<meta
name=
"viewport"
<meta
name=
"viewport"
content=
"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
>
content=
"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
>
<title>
Cub
e Demo
</title>
<title>
Hit to Plac
e Demo
</title>
<!-- three.js -->
<!-- three.js -->
<script
src=
"https://unpkg.com/three@0.126.0/build/three.js"
></script>
<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>
</head>
<body>
<body>
<!-- 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
Cub
e Demo
</button>
<button
onclick=
"activateXR()"
>
Start
Hit to Plac
e Demo
</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.
...
@@ -23,20 +25,9 @@ async function activateXR() {
...
@@ -23,20 +25,9 @@ async function activateXR() {
const
scene
=
new
THREE
.
Scene
();
const
scene
=
new
THREE
.
Scene
();
// The cube will have a different color on each side.
const
directionalLight
=
new
THREE
.
DirectionalLight
(
0xffffff
,
1.0
);
const
materials
=
[
directionalLight
.
position
.
set
(
10
,
15
,
10
);
new
THREE
.
MeshBasicMaterial
({
color
:
0xff0000
}),
scene
.
add
(
directionalLight
);
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.
// Set up the WebGLRenderer, which handles rendering to the session's base layer.
const
renderer
=
new
THREE
.
WebGLRenderer
({
const
renderer
=
new
THREE
.
WebGLRenderer
({
...
@@ -54,7 +45,7 @@ const camera = new THREE.PerspectiveCamera();
...
@@ -54,7 +45,7 @@ const camera = new THREE.PerspectiveCamera();
camera
.
matrixAutoUpdate
=
false
;
camera
.
matrixAutoUpdate
=
false
;
// Initialize a WebXR session using "immersive-ar".
// Initialize a WebXR session using "immersive-ar".
const
session
=
await
navigator
.
xr
.
requestSession
(
"
immersive-ar
"
);
const
session
=
await
navigator
.
xr
.
requestSession
(
"
immersive-ar
"
,
{
requiredFeatures
:
[
'
hit-test
'
]}
);
session
.
updateRenderState
({
session
.
updateRenderState
({
baseLayer
:
new
XRWebGLLayer
(
session
,
gl
)
baseLayer
:
new
XRWebGLLayer
(
session
,
gl
)
});
});
...
@@ -63,6 +54,35 @@ session.updateRenderState({
...
@@ -63,6 +54,35 @@ session.updateRenderState({
// near the viewer's position at the time the session was created.
// near the viewer's position at the time the session was created.
const
referenceSpace
=
await
session
.
requestReferenceSpace
(
'
local
'
);
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.
// Create a render loop that allows us to draw on the AR view.
const
onXRFrame
=
(
time
,
frame
)
=>
{
const
onXRFrame
=
(
time
,
frame
)
=>
{
// Queue up the next draw request.
// Queue up the next draw request.
...
@@ -86,12 +106,23 @@ const onXRFrame = (time, frame) => {
...
@@ -86,12 +106,23 @@ const onXRFrame = (time, frame) => {
camera
.
projectionMatrix
.
fromArray
(
view
.
projectionMatrix
);
camera
.
projectionMatrix
.
fromArray
(
view
.
projectionMatrix
);
camera
.
updateMatrixWorld
(
true
);
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.
// Render the scene with THREE.WebGLRenderer.
renderer
.
render
(
scene
,
camera
)
renderer
.
render
(
scene
,
camera
)
}
}
}
}
session
.
requestAnimationFrame
(
onXRFrame
);
session
.
requestAnimationFrame
(
onXRFrame
);
}
}
</script>
</script>
</body>
</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