Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Kandia
simplear
Commits
be17b574
Commit
be17b574
authored
May 27, 2024
by
Kandia
Browse files
Upload New File
parent
ce0c5074
Changes
1
Show whitespace changes
Inline
Side-by-side
simplear.html
0 → 100644
View file @
be17b574
<!doctype html>
<html>
<head>
<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>
Simple AR
</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>
<button
onclick=
"activateXR()"
>
Start Hit to Place Demo
</button>
<script>
async
function
activateXR
()
{
const
canvas
=
document
.
createElement
(
"
canvas
"
);
document
.
body
.
appendChild
(
canvas
);
const
gl
=
canvas
.
getContext
(
"
webgl
"
,
{
xrCompatible
:
true
});
const
scene
=
new
THREE
.
Scene
();
const
directionalLight
=
new
THREE
.
DirectionalLight
(
0xffffff
,
1.0
);
directionalLight
.
position
.
set
(
10
,
15
,
10
);
scene
.
add
(
directionalLight
);
const
renderer
=
new
THREE
.
WebGLRenderer
({
alpha
:
true
,
preserveDrawingBuffer
:
true
,
canvas
:
canvas
,
context
:
gl
});
renderer
.
autoClear
=
false
;
const
camera
=
new
THREE
.
PerspectiveCamera
();
camera
.
matrixAutoUpdate
=
false
;
const
session
=
await
navigator
.
xr
.
requestSession
(
"
immersive-ar
"
,
{
requiredFeatures
:
[
'
hit-test
'
]
});
session
.
updateRenderState
({
baseLayer
:
new
XRWebGLLayer
(
session
,
gl
)
});
const
referenceSpace
=
await
session
.
requestReferenceSpace
(
'
local
'
);
const
viewerSpace
=
await
session
.
requestReferenceSpace
(
'
viewer
'
);
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
;
});
let
selectedObject
=
null
;
let
initialHitTestSource
=
null
;
session
.
addEventListener
(
"
selectstart
"
,
(
event
)
=>
{
if
(
reticle
.
visible
)
{
const
hitTestResults
=
event
.
frame
.
getHitTestResults
(
hitTestSource
);
if
(
hitTestResults
.
length
>
0
)
{
const
hitPose
=
hitTestResults
[
0
].
getPose
(
referenceSpace
);
selectedObject
=
flower
.
clone
();
selectedObject
.
position
.
set
(
hitPose
.
transform
.
position
.
x
,
hitPose
.
transform
.
position
.
y
,
hitPose
.
transform
.
position
.
z
);
scene
.
add
(
selectedObject
);
initialHitTestSource
=
hitTestSource
;
}
}
else
{
const
raycaster
=
new
THREE
.
Raycaster
();
const
mouse
=
new
THREE
.
Vector2
();
raycaster
.
setFromCamera
(
mouse
,
camera
);
const
intersects
=
raycaster
.
intersectObjects
(
scene
.
children
,
true
);
if
(
intersects
.
length
>
0
)
{
selectedObject
=
intersects
[
0
].
object
;
initialHitTestSource
=
hitTestSource
;
}
}
});
session
.
addEventListener
(
"
selectend
"
,
()
=>
{
selectedObject
=
null
;
});
const
onXRFrame
=
(
time
,
frame
)
=>
{
session
.
requestAnimationFrame
(
onXRFrame
);
gl
.
bindFramebuffer
(
gl
.
FRAMEBUFFER
,
session
.
renderState
.
baseLayer
.
framebuffer
);
const
pose
=
frame
.
getViewerPose
(
referenceSpace
);
if
(
pose
)
{
const
view
=
pose
.
views
[
0
];
const
viewport
=
session
.
renderState
.
baseLayer
.
getViewport
(
view
);
renderer
.
setSize
(
viewport
.
width
,
viewport
.
height
);
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
);
}
if
(
selectedObject
&&
initialHitTestSource
)
{
const
hitTestResults
=
frame
.
getHitTestResults
(
initialHitTestSource
);
if
(
hitTestResults
.
length
>
0
)
{
const
hitPose
=
hitTestResults
[
0
].
getPose
(
referenceSpace
);
selectedObject
.
position
.
set
(
hitPose
.
transform
.
position
.
x
,
hitPose
.
transform
.
position
.
y
,
hitPose
.
transform
.
position
.
z
);
selectedObject
.
updateMatrixWorld
(
true
);
}
}
renderer
.
render
(
scene
,
camera
);
}
};
session
.
requestAnimationFrame
(
onXRFrame
);
}
</script>
</body>
</html>
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