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
74e48dbc
Commit
74e48dbc
authored
Jun 16, 2024
by
Esguerra Montana
Browse files
Update index.html
parent
0b9d5be5
Pipeline
#9423
passed with stage
in 8 seconds
Changes
1
Pipelines
1
Show whitespace changes
Inline
Side-by-side
public/index.html
View file @
74e48dbc
...
@@ -4,7 +4,7 @@
...
@@ -4,7 +4,7 @@
<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>
T
orus
Demo
</title>
<title>
T
etrahedron
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>
...
@@ -13,7 +13,7 @@
...
@@ -13,7 +13,7 @@
<!-- 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 T
orus
</button>
<button
onclick=
"activateXR()"
>
Start T
etrahedron
</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,48 +23,58 @@ async function activateXR() {
...
@@ -23,48 +23,58 @@ async function activateXR() {
const
scene
=
new
THREE
.
Scene
();
const
scene
=
new
THREE
.
Scene
();
// Color of the torus geometry.
// Add lighting to the scene
const
material
=
new
THREE
.
MeshPhysicalMaterial
({
color
:
0xff0000
,
roughness
:
0.5
,
metalness
:
0.5
,
clearcoat
:
1.0
,
clearcoatRoughness
:
0.1
});
const
light
=
new
THREE
.
DirectionalLight
(
0xffffff
,
1
);
light
.
position
.
set
(
1
,
1
,
1
).
normalize
();
scene
.
add
(
light
);
// Create the torus and add it to the demo scene.
const
ambientLight
=
new
THREE
.
AmbientLight
(
0x404040
);
// soft white light
const
torus
=
new
THREE
.
Mesh
(
new
THREE
.
TetrahedronGeometry
(
1
),
material
);
scene
.
add
(
ambientLight
);
//position the next geometry (sphere)
torus
.
position
.
set
(
0
,
0
,
-
1
);
// Add the mesh to the scene
scene
.
add
(
torus
);
// Set up the WebGLRenderer, which handles rendering to the session's base layer.
// Color of the tetrahedron geometry.
const
renderer
=
new
THREE
.
WebGLRenderer
({
const
material
=
new
THREE
.
MeshPhysicalMaterial
({
color
:
0xff0000
,
roughness
:
0.5
,
metalness
:
0.5
,
clearcoat
:
1.0
,
clearcoatRoughness
:
0.1
});
// Create the tetrahedron and add it to the demo scene.
const
tetrahedron
=
new
THREE
.
Mesh
(
new
THREE
.
TetrahedronGeometry
(
1
),
material
);
// Position the tetrahedron
tetrahedron
.
position
.
set
(
0
,
0
,
-
1
);
// Add the mesh to the scene
scene
.
add
(
tetrahedron
);
// Set up the WebGLRenderer, which handles rendering to the session's base layer.
const
renderer
=
new
THREE
.
WebGLRenderer
({
alpha
:
true
,
alpha
:
true
,
preserveDrawingBuffer
:
true
,
preserveDrawingBuffer
:
true
,
canvas
:
canvas
,
canvas
:
canvas
,
context
:
gl
context
:
gl
});
});
renderer
.
autoClear
=
false
;
renderer
.
autoClear
=
false
;
// The API directly updates the camera matrices.
// The API directly updates the camera matrices.
// Disable matrix auto updates so three.js doesn't attempt
// Disable matrix auto updates so three.js doesn't attempt
// to handle the matrices independently.
// to handle the matrices independently.
const
camera
=
new
THREE
.
PerspectiveCamera
();
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
"
);
session
.
updateRenderState
({
session
.
updateRenderState
({
baseLayer
:
new
XRWebGLLayer
(
session
,
gl
)
baseLayer
:
new
XRWebGLLayer
(
session
,
gl
)
});
});
// A 'local' reference space has a native origin that is located
// A 'local' reference space has a native origin that is located
// 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 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.
session
.
requestAnimationFrame
(
onXRFrame
);
session
.
requestAnimationFrame
(
onXRFrame
);
// Bind the graphics framebuffer to the baseLayer's framebuffer
// Bind the graphics framebuffer to the baseLayer's framebuffer
gl
.
bindFramebuffer
(
gl
.
FRAMEBUFFER
,
session
.
renderState
.
baseLayer
.
framebuffer
)
gl
.
bindFramebuffer
(
gl
.
FRAMEBUFFER
,
session
.
renderState
.
baseLayer
.
framebuffer
)
;
// Retrieve the pose of the device.
// Retrieve the pose of the device.
// XRFrame.getViewerPose can return null while the session attempts to establish tracking.
// XRFrame.getViewerPose can return null while the session attempts to establish tracking.
...
@@ -74,19 +84,18 @@ const onXRFrame = (time, frame) => {
...
@@ -74,19 +84,18 @@ const onXRFrame = (time, frame) => {
const
view
=
pose
.
views
[
0
];
const
view
=
pose
.
views
[
0
];
const
viewport
=
session
.
renderState
.
baseLayer
.
getViewport
(
view
);
const
viewport
=
session
.
renderState
.
baseLayer
.
getViewport
(
view
);
renderer
.
setSize
(
viewport
.
width
,
viewport
.
height
)
renderer
.
setSize
(
viewport
.
width
,
viewport
.
height
)
;
// Use the view's transform matrix and projection matrix to configure the THREE.camera.
// Use the view's transform matrix and projection matrix to configure the THREE.camera.
camera
.
matrix
.
fromArray
(
view
.
transform
.
matrix
)
camera
.
matrix
.
fromArray
(
view
.
transform
.
matrix
)
;
camera
.
projectionMatrix
.
fromArray
(
view
.
projectionMatrix
);
camera
.
projectionMatrix
.
fromArray
(
view
.
projectionMatrix
);
camera
.
updateMatrixWorld
(
true
);
camera
.
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