Skip to content
GitLab
Explore
Projects
Groups
Snippets
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
GeoVistoogsi
AR
Commits
bdf93ff9
Commit
bdf93ff9
authored
4 months ago
by
Percen
Browse files
Options
Download
Email Patches
Plain Diff
Update public/index.html
parent
d5ed3caa
master
21caog1bif-master-patch-76399
21caog1bif-master-patch-83779
21caog1bif-master-patch-96693
1 merge request
!51
Update public/index.html
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
public/index.html
+113
-69
public/index.html
with
113 additions
and
69 deletions
+113
-69
public/index.html
+
113
-
69
View file @
bdf93ff9
...
...
@@ -4,7 +4,7 @@
<meta
charset=
"UTF-8"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<title>
GeoVis AR Projekt
</title>
<style>
<style>
body
{
margin
:
0
;
font-family
:
Arial
,
sans-serif
;
...
...
@@ -28,7 +28,7 @@
max-width
:
80%
;
box-shadow
:
0px
0px
15px
rgba
(
0
,
0
,
0
,
0.5
);
}
//
teste
h1
{
font-size
:
3em
;
margin-bottom
:
20px
;
...
...
@@ -79,19 +79,15 @@
background-color
:
#1E88E5
;
}
</style>
<!-- Include Three.js and Three-Mesh-UI -->
<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>
<script
src=
"https://cdn.jsdelivr.net/npm/three-mesh-ui@3.4.0/dist/three-mesh-ui.min.js"
></script>
</head>
<body>
<script>
let
selectedModel
=
'
car
'
;
// Standardauswahl
let
models
=
{};
let
reticle
;
let
u
i
;
let
men
u
;
async
function
activateXR
()
{
const
canvas
=
document
.
createElement
(
'
canvas
'
);
...
...
@@ -117,6 +113,27 @@
scene
.
add
(
reticle
);
});
const
container
=
new
ThreeMeshUI
.
Block
({
width
:
1.2
,
height
:
0.7
,
padding
:
0.2
,
fontFamily
:
'
./assets/Roboto-msdf.json
'
,
fontTexture
:
'
./assets/Roboto-msdf.png
'
,
});
//
const
text
=
new
ThreeMeshUI
.
Text
({
content
:
"
Some text to be displayed
"
});
container
.
add
(
text
);
// scene is a THREE.Scene (see three.js)
scene
.
add
(
container
);
// This is typically done in the render loop :
ThreeMeshUI
.
update
();
// Modelle laden
loader
.
load
(
"
https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb
"
,
(
gltf
)
=>
{
models
.
car
=
gltf
.
scene
;
...
...
@@ -125,75 +142,102 @@
models
.
lamp
=
gltf
.
scene
;
});
// 3D UI mit three-mesh-ui erstellen
ui
=
new
ThreeMeshUI
.
Block
({
width
:
0.4
,
height
:
0.3
,
padding
:
0.05
,
fontSize
:
0.05
,
backgroundColor
:
new
THREE
.
Color
(
0x333333
),
justifyContent
:
'
center
'
,
alignItems
:
'
center
'
,
borderRadius
:
0.05
});
ui
.
position
.
set
(
0
,
-
0.5
,
-
1
);
// Vor der Kamera positionieren
scene
.
add
(
ui
);
// 3D-Menü erstellen
const
menuGeometry
=
new
THREE
.
PlaneGeometry
(
0.5
,
0.2
);
// Menügröße
const
menuMaterial
=
new
THREE
.
MeshBasicMaterial
({
color
:
0x333333
,
opacity
:
0.8
,
transparent
:
true
});
menu
=
new
THREE
.
Mesh
(
menuGeometry
,
menuMaterial
);
menu
.
position
.
set
(
0
,
-
0.5
,
-
1
);
// Unten im Kamerasichtfeld
scene
.
add
(
menu
);
// Menü-Buttons als Flächen
const
buttonGeometry
=
new
THREE
.
PlaneGeometry
(
0.15
,
0.1
);
const
buttonMaterial1
=
new
THREE
.
MeshBasicMaterial
({
color
:
0x2196F3
});
const
buttonMaterial2
=
new
THREE
.
MeshBasicMaterial
({
color
:
0xFF9800
});
const
carButton
=
new
THREE
.
Mesh
(
buttonGeometry
,
buttonMaterial1
);
carButton
.
position
.
set
(
-
0.2
,
-
0.5
,
-
0.99
);
// Links unten
scene
.
add
(
carButton
);
const
lampButton
=
new
THREE
.
Mesh
(
buttonGeometry
,
buttonMaterial2
);
lampButton
.
position
.
set
(
0.2
,
-
0.5
,
-
0.99
);
// Rechts unten
scene
.
add
(
lampButton
);
// Raycaster für Button-Interaktion
const
raycaster
=
new
THREE
.
Raycaster
();
const
pointer
=
new
THREE
.
Vector2
();
// AR-Session starten
try
{
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
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
});
session
.
requestAnimationFrame
(
onXRFrame
);
session
.
requestAnimationFrame
(
onXRFrame
);
session
.
addEventListener
(
"
select
"
,
(
event
)
=>
{
if
(
!
reticle
)
return
;
session
.
addEventListener
(
"
select
"
,
(
event
)
=>
{
if
(
!
reticle
)
return
;
// Raycaster von der Kameraposition (Mitte des Bildschirms)
raycaster
.
setFromCamera
(
pointer
,
camera
);
const
intersects
=
raycaster
.
intersectObjects
([
carButton
,
lampButton
]);
// Modell platzieren, wenn kein Button angeklickt wurde
if
(
models
[
selectedModel
])
{
const
clone
=
models
[
selectedModel
].
clone
();
clone
.
position
.
copy
(
reticle
.
position
);
clone
.
scale
.
set
(
0.5
,
0.5
,
0.5
);
// Größe anpassen
scene
.
add
(
clone
);
console
.
log
(
`
${
selectedModel
}
platziert`
);
// Prüfen, ob ein Button getroffen wurde
if
(
intersects
.
length
>
0
)
{
const
clickedButton
=
intersects
[
0
].
object
;
if
(
clickedButton
===
carButton
)
{
selectedModel
=
'
car
'
;
console
.
log
(
'
Auto ausgewählt
'
);
}
else
if
(
clickedButton
===
lampButton
)
{
selectedModel
=
'
lamp
'
;
console
.
log
(
'
Laterne ausgewählt
'
);
}
});
function
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
);
// UI bleibt fixiert vor der Kamera
ui
.
position
.
set
(
0
,
-
0.5
,
-
1
);
ui
.
lookAt
(
camera
.
position
);
const
hitTestResults
=
frame
.
getHitTestResults
(
hitTestSource
);
if
(
hitTestResults
.
length
>
0
)
{
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
);
}
renderer
.
render
(
scene
,
camera
);
}
// Kein Button getroffen -> Modell platzieren
else
if
(
models
[
selectedModel
])
{
const
clone
=
models
[
selectedModel
].
clone
();
clone
.
position
.
copy
(
reticle
.
position
);
clone
.
scale
.
set
(
0.5
,
0.5
,
0.5
);
// Größe anpassen
scene
.
add
(
clone
);
console
.
log
(
`
${
selectedModel
}
platziert`
);
}
});
// AR-Rendering
function
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
);
// Menü bleibt fixiert vor der Kamera
menu
.
position
.
set
(
0
,
-
0.5
,
-
1
);
menu
.
lookAt
(
camera
.
position
);
carButton
.
position
.
set
(
-
0.2
,
-
0.5
,
-
0.99
);
lampButton
.
position
.
set
(
0.2
,
-
0.5
,
-
0.99
);
const
hitTestResults
=
frame
.
getHitTestResults
(
hitTestSource
);
if
(
hitTestResults
.
length
>
0
)
{
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
);
}
renderer
.
render
(
scene
,
camera
);
}
}
catch
(
e
)
{
console
.
error
(
"
AR-Session konnte nicht gestartet werden:
"
,
e
);
alert
(
"
AR konnte nicht gestartet werden. Bitte sicherstellen, dass WebXR und AR auf deinem Gerät unterstützt werden.
"
);
}
}
...
...
@@ -208,7 +252,7 @@
activateXR
();
};
}
else
{
alert
(
'
WebXR wird
von diesem Browser
nicht unterstützt.
'
);
alert
(
'
WebXR wird nicht unterstützt.
'
);
}
</script>
</body>
...
...
This diff is collapsed.
Click to expand it.
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new 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
Menu
Explore
Projects
Groups
Snippets