Update Buttons in model viewer

This commit is contained in:
2025-05-12 16:22:27 +02:00
parent f3850649c7
commit 8d71633f50

View File

@@ -10,6 +10,9 @@
height: 200px; height: 200px;
} }
.model{
height: calc(100%-84px)
}
</style> </style>
@@ -61,13 +64,23 @@
function onResetView() { function onResetView() {
// cameraOrbit = '0deg 0deg 50m'; cameraOrbit = '0deg 0deg 0m';
// cameraTarget ="0m 0m 0m" cameraTarget ="0m 0m 0m"
console.log("show cameraOrbit:", modelViewer.getCameraOrbit(), modelViewer.cameraOrbit, modelViewer.getDimensions()) console.log("show cameraOrbit:", modelViewer.getCameraOrbit(), modelViewer.cameraOrbit, modelViewer.getDimensions())
console.log("Camera-orbit: ",modelViewer.getAttribute('camera-orbit'), "camera-target: ",modelViewer.getAttribute('camera-target'), "object-rotation: ", modelViewer.getAttribute('rotation')) console.log("Camera-orbit: ",modelViewer.getAttribute('camera-orbit'), "camera-target: ",modelViewer.getAttribute('camera-target'), "object-rotation: ", modelViewer.getAttribute('rotation'))
// modelViewer.cameraOrbit = cameraOrbit; modelViewer.cameraOrbit = cameraOrbit;
// modelViewer.cameraTarget = cameraTarget; modelViewer.cameraTarget = cameraTarget;
xRotation = yRotation = zRotation = 0;
cameraOrbit = '0deg 0deg 0%';
cameraTarget ="0m 0m 0m";
fieldOfView = '0deg';
cameraAzimuth = 0;
cameraPolar = 0;
cameraZoom = 0;
} }
@@ -107,13 +120,36 @@
class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left" class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
> --> > -->
<div class="h-full w-full bg-neutral-100 p-4"> <div class="h-full model w-full bg-neutral-200 p-4">
<div class="bg-redx-500 p-4 flex">
<!-- field-of-view="auto" -->
<!--
camera-controls
model-rotation="0rad 0rad 0rad"
camera-target="0m 0m 10m"
field-of-view="auto"
max-field-of-view="10deg"
min-field-of-view="0.1deg"-->
<model-viewer
src={data.url}
bind:this={modelViewer}
touch-action="pan-y"
field-of-view="auto"
camera-controls
orientation={`${xRotation}deg ${yRotation}deg ${zRotation}deg`}
camera-target="0m 0m 0m"
camera-orbit = {`${cameraAzimuth}deg ${cameraPolar}deg ${cameraZoom}`}
on:progress={onProgress}
>
<!--Buttons zum Steuern-->
<div class="bg-redx-500 p-4 flex z-10">
<div class="flex flex-col"> <div class="flex flex-col">
<!--3 Buttons--> <!--3 Buttons-->
<div> <div>
<Button <Button
on:click={()=>{updateCameraOrbit('0deg 180deg 100%')}} on:click={()=>{updateCameraOrbit('0deg 0deg 0%')}}
type="button" type="button"
variant="white" variant="white"
@@ -130,7 +166,7 @@
align="left" align="left"
class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left" class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
> >
Camera-Orbit Attribute Werte zurücksetzen
</Button> </Button>
<Button <Button
@@ -164,7 +200,7 @@
<label class=" mb-2" for="polarSlider">Vertikal drehen (Polar):</label> <label class=" mb-2" for="polarSlider">Vertikal drehen (Polar):</label>
<input id="polarSlider" type="range" min=0 max=90 bind:value={cameraPolar} /> <input id="polarSlider" type="range" min=0 max=90 bind:value={cameraPolar} />
<!-- on:input={slideCameraOrbit} class="vertical-slider"--> <!-- on:input={slideCameraOrbit} class="vertical-slider"-->
</div> </div>
<!--Zoom/Distanz--> <!--Zoom/Distanz-->
<div> <div>
<label for="cZoom">Zoomen</label> <label for="cZoom">Zoomen</label>
@@ -183,41 +219,20 @@
<label class="" for="polarSlider">Rotation X:</label> <label class="" for="polarSlider">Rotation X:</label>
<input id="polarSlider" type="range" min=0 max=360 bind:value={xRotation} /> <input id="polarSlider" type="range" min=0 max=360 bind:value={xRotation} />
<!-- on:input={slideCameraOrbit} class="vertical-slider"--> <!-- on:input={slideCameraOrbit} class="vertical-slider"-->
</div> </div>
<div class=""> <div class="">
<label class="" for="polarSlider">Rotation Y:</label> <label class="" for="polarSlider">Rotation Y:</label>
<input id="polarSlider" type="range" min=0 max=360 bind:value={yRotation} /> <input id="polarSlider" type="range" min=0 max=360 bind:value={yRotation} />
<!-- on:input={slideCameraOrbit} class="vertical-slider"--> <!-- on:input={slideCameraOrbit} class="vertical-slider"-->
</div> </div>
<div class=""> <div class="">
<label class="" for="polarSlider">Rotation Z:</label> <label class="" for="polarSlider">Rotation Z:</label>
<input id="polarSlider" type="range" min=0 max=360 bind:value={zRotation} /> <input id="polarSlider" type="range" min=0 max=360 bind:value={zRotation} />
<!-- on:input={slideCameraOrbit} class="vertical-slider"--> <!-- on:input={slideCameraOrbit} class="vertical-slider"-->
</div> </div>
</div> </div>
</div> </div>
<!-- field-of-view="auto" -->
<!--
camera-controls
model-rotation="0rad 0rad 0rad"
camera-target="0m 0m 10m"
field-of-view="auto"
max-field-of-view="10deg"
min-field-of-view="0.1deg"-->
<model-viewer
src={data.url}
bind:this={modelViewer}
shadow-intensity="50"
touch-action="pan-x"
camera-controls
orientation={`${xRotation}deg ${yRotation}deg ${zRotation}deg`}
camera-target="0m 0m 0m"
camera-orbit = {`${cameraAzimuth}deg ${cameraPolar}deg ${cameraZoom}`}
on:progress={onProgress}
>
<!--Loading--> <!--Loading-->
<div <div
slot="progress-bar" slot="progress-bar"