76 lines
2.7 KiB
HTML
76 lines
2.7 KiB
HTML
<div class="w-full h-full relative">
|
||
<model-viewer
|
||
#modelViewer
|
||
class="absolute inset-0 w-full h-full"
|
||
src="models/untitled.glb"
|
||
ar
|
||
ar-modes="webxr"
|
||
ar-placement="ceiling"
|
||
reveal="manual"
|
||
[scale]="scale + ' ' + scale + ' ' + scale"
|
||
camera-orbit="0deg 75deg 2m">
|
||
|
||
<button
|
||
id="ar-button-position"
|
||
slot="ar-button"
|
||
(click)="logInteraction($event)"
|
||
class="absolute top-4 left-1/2 -translate-x-1/2 bg-blue-500 text-white py-2 px-4 rounded-lg z-10">
|
||
WebXR Umgebung laden
|
||
</button>
|
||
|
||
<div
|
||
class="ar-controls absolute bottom-24 left-1/2 -translate-x-1/2 bg-black bg-opacity-60 p-5 rounded-xl flex flex-col items-center space-y-4 text-white z-10"
|
||
[class.opacity-50]="!isModelPlaced">
|
||
|
||
<!-- Slider 1: Scale -->
|
||
<div class="flex flex-col items-start w-64">
|
||
<label for="scale-slider" class="text-sm font-medium mb-1">Skalierung</label>
|
||
<input
|
||
id="scale-slider"
|
||
type="range"
|
||
min="0.5"
|
||
max="2.5"
|
||
step="0.01"
|
||
[(ngModel)]="scale"
|
||
(input)="onSliderInput(); logInteraction($event)"
|
||
[disabled]="!isModelPlaced"
|
||
class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />
|
||
<span class="text-xs mt-1">{{ scale.toFixed(2) }}×</span>
|
||
</div>
|
||
|
||
<!-- Slider 2: Height -->
|
||
<div class="flex flex-col items-start w-64">
|
||
<label for="offset-slider" class="text-sm font-medium mb-1">Höhe verschieben</label>
|
||
<input
|
||
id="offset-slider"
|
||
type="range"
|
||
min="-1.5"
|
||
max="3.5"
|
||
step="0.01"
|
||
[(ngModel)]="verticalOffset"
|
||
(input)="onSliderInput(); logInteraction($event)"
|
||
[disabled]="!isModelPlaced"
|
||
class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />
|
||
<span class="text-xs mt-1">{{ verticalOffset >= 0 ? '+' : '' }}{{ verticalOffset.toFixed(2) }}m</span>
|
||
</div>
|
||
|
||
<!-- Buttons Row -->
|
||
<div class="flex space-x-4 justify-center">
|
||
<button
|
||
id="reset-position-btn"
|
||
(click)="resetPosition(); logInteraction($event)"
|
||
[disabled]="!isModelPlaced"
|
||
class="bg-gray-600 text-white py-2 px-4 rounded-lg disabled:opacity-50">
|
||
Reset
|
||
</button>
|
||
<button
|
||
id="confirm-placement-btn"
|
||
(click)="confirmPlacement(); logInteraction($event)"
|
||
[disabled]="!isModelPlaced"
|
||
class="bg-green-600 text-white py-2 px-4 rounded-lg disabled:opacity-50">
|
||
Position bestätigen
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</model-viewer>
|
||
</div> |