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
70e580db
Commit
70e580db
authored
Jun 09, 2024
by
Esguerra Montana
Browse files
Update index.html
parent
322822fd
Pipeline
#9344
passed with stage
in 7 seconds
Changes
1
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
public/index.html
View file @
70e580db
...
...
@@ -21,7 +21,77 @@ async function activateXR() {
document
.
body
.
appendChild
(
canvas
);
const
gl
=
canvas
.
getContext
(
"
webgl
"
,
{
xrCompatible
:
true
});
// To be continued in upcoming steps.
const
scene
=
new
THREE
.
Scene
();
// 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
({
alpha
:
true
,
preserveDrawingBuffer
:
true
,
canvas
:
canvas
,
context
:
gl
});
renderer
.
autoClear
=
false
;
// The API directly updates the camera matrices.
// Disable matrix auto updates so three.js doesn't attempt
// to handle the matrices independently.
const
camera
=
new
THREE
.
PerspectiveCamera
();
camera
.
matrixAutoUpdate
=
false
;
// Initialize a WebXR session using "immersive-ar".
const
session
=
await
navigator
.
xr
.
requestSession
(
"
immersive-ar
"
);
session
.
updateRenderState
({
baseLayer
:
new
XRWebGLLayer
(
session
,
gl
)
});
// 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 a render loop that allows us to draw on the AR view.
const
onXRFrame
=
(
time
,
frame
)
=>
{
// Queue up the next draw request.
session
.
requestAnimationFrame
(
onXRFrame
);
// Bind the graphics framebuffer to the baseLayer's framebuffer
gl
.
bindFramebuffer
(
gl
.
FRAMEBUFFER
,
session
.
renderState
.
baseLayer
.
framebuffer
)
// Retrieve the pose of the device.
// XRFrame.getViewerPose can return null while the session attempts to establish tracking.
const
pose
=
frame
.
getViewerPose
(
referenceSpace
);
if
(
pose
)
{
// In mobile AR, we only have one view.
const
view
=
pose
.
views
[
0
];
const
viewport
=
session
.
renderState
.
baseLayer
.
getViewport
(
view
);
renderer
.
setSize
(
viewport
.
width
,
viewport
.
height
)
// Use the view's transform matrix and projection matrix to configure the THREE.camera.
camera
.
matrix
.
fromArray
(
view
.
transform
.
matrix
)
camera
.
projectionMatrix
.
fromArray
(
view
.
projectionMatrix
);
camera
.
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