Update Buttons in model viewer
This commit is contained in:
@@ -10,6 +10,9 @@
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.model{
|
||||
height: calc(100%-84px)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -61,13 +64,23 @@
|
||||
|
||||
|
||||
function onResetView() {
|
||||
// cameraOrbit = '0deg 0deg 50m';
|
||||
// cameraTarget ="0m 0m 0m"
|
||||
cameraOrbit = '0deg 0deg 0m';
|
||||
cameraTarget ="0m 0m 0m"
|
||||
|
||||
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'))
|
||||
|
||||
// modelViewer.cameraOrbit = cameraOrbit;
|
||||
// modelViewer.cameraTarget = cameraTarget;
|
||||
modelViewer.cameraOrbit = cameraOrbit;
|
||||
modelViewer.cameraTarget = cameraTarget;
|
||||
xRotation = yRotation = zRotation = 0;
|
||||
cameraOrbit = '0deg 0deg 0%';
|
||||
cameraTarget ="0m 0m 0m";
|
||||
fieldOfView = '0deg';
|
||||
|
||||
cameraAzimuth = 0;
|
||||
cameraPolar = 0;
|
||||
cameraZoom = 0;
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -107,96 +120,8 @@
|
||||
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="bg-redx-500 p-4 flex">
|
||||
<div class="flex flex-col">
|
||||
<!--3 Buttons-->
|
||||
<div>
|
||||
<Button
|
||||
on:click={()=>{updateCameraOrbit('0deg 180deg 100%')}}
|
||||
type="button"
|
||||
variant="white"
|
||||
|
||||
align="left"
|
||||
class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
|
||||
>
|
||||
Draufsicht
|
||||
</Button>
|
||||
<Button
|
||||
on:click={()=>{onResetView()}}
|
||||
type="button"
|
||||
variant="white"
|
||||
|
||||
align="left"
|
||||
class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
|
||||
>
|
||||
Camera-Orbit Attribute
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
|
||||
on:click={()=>{updateCameraOrbit('0deg 90deg 0%')}}
|
||||
|
||||
type="button"
|
||||
variant="white"
|
||||
|
||||
align="left"
|
||||
class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
|
||||
>
|
||||
Frontansicht
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
|
||||
<!--Horizontal-->
|
||||
<div>
|
||||
<!-- svelte-ignore a11y_label_has_associated_control -->
|
||||
<label>Horizontal drehen (Azimut):</label>
|
||||
<input
|
||||
type="range"
|
||||
min="0" max="360"
|
||||
bind:value={cameraAzimuth}
|
||||
/>
|
||||
<!-- on:input={slideCameraOrbit} -->
|
||||
</div>
|
||||
<!--Vertikal-->
|
||||
<div class="">
|
||||
<label class=" mb-2" for="polarSlider">Vertikal drehen (Polar):</label>
|
||||
<input id="polarSlider" type="range" min=0 max=90 bind:value={cameraPolar} />
|
||||
<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
|
||||
</div>
|
||||
<!--Zoom/Distanz-->
|
||||
<div>
|
||||
<label for="cZoom">Zoomen</label>
|
||||
<input id="cZoom" type="range"
|
||||
min="0"
|
||||
max="120"
|
||||
|
||||
bind:value={cameraZoom}
|
||||
on:input={slideCameraOrbit}/>
|
||||
</div>
|
||||
</div>
|
||||
<!--Rotationen-->
|
||||
<div class="flex mt-2 ml-2">
|
||||
|
||||
<div class="">
|
||||
<label class="" for="polarSlider">Rotation X:</label>
|
||||
<input id="polarSlider" type="range" min=0 max=360 bind:value={xRotation} />
|
||||
<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
|
||||
</div>
|
||||
<div class="">
|
||||
<label class="" for="polarSlider">Rotation Y:</label>
|
||||
<input id="polarSlider" type="range" min=0 max=360 bind:value={yRotation} />
|
||||
<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
|
||||
</div>
|
||||
<div class="">
|
||||
<label class="" for="polarSlider">Rotation Z:</label>
|
||||
<input id="polarSlider" type="range" min=0 max=360 bind:value={zRotation} />
|
||||
<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="h-full model w-full bg-neutral-200 p-4">
|
||||
|
||||
<!-- field-of-view="auto" -->
|
||||
<!--
|
||||
camera-controls
|
||||
@@ -210,14 +135,104 @@
|
||||
<model-viewer
|
||||
src={data.url}
|
||||
bind:this={modelViewer}
|
||||
shadow-intensity="50"
|
||||
touch-action="pan-x"
|
||||
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">
|
||||
<!--3 Buttons-->
|
||||
<div>
|
||||
<Button
|
||||
on:click={()=>{updateCameraOrbit('0deg 0deg 0%')}}
|
||||
type="button"
|
||||
variant="white"
|
||||
|
||||
align="left"
|
||||
class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
|
||||
>
|
||||
Draufsicht
|
||||
</Button>
|
||||
<Button
|
||||
on:click={()=>{onResetView()}}
|
||||
type="button"
|
||||
variant="white"
|
||||
|
||||
align="left"
|
||||
class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
|
||||
>
|
||||
Werte zurücksetzen
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
|
||||
on:click={()=>{updateCameraOrbit('0deg 90deg 0%')}}
|
||||
|
||||
type="button"
|
||||
variant="white"
|
||||
|
||||
align="left"
|
||||
class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
|
||||
>
|
||||
Frontansicht
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
|
||||
<!--Horizontal-->
|
||||
<div>
|
||||
<!-- svelte-ignore a11y_label_has_associated_control -->
|
||||
<label>Horizontal drehen (Azimut):</label>
|
||||
<input
|
||||
type="range"
|
||||
min="0" max="360"
|
||||
bind:value={cameraAzimuth}
|
||||
/>
|
||||
<!-- on:input={slideCameraOrbit} -->
|
||||
</div>
|
||||
<!--Vertikal-->
|
||||
<div class="">
|
||||
<label class=" mb-2" for="polarSlider">Vertikal drehen (Polar):</label>
|
||||
<input id="polarSlider" type="range" min=0 max=90 bind:value={cameraPolar} />
|
||||
<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
|
||||
</div>
|
||||
<!--Zoom/Distanz-->
|
||||
<div>
|
||||
<label for="cZoom">Zoomen</label>
|
||||
<input id="cZoom" type="range"
|
||||
min="0"
|
||||
max="120"
|
||||
|
||||
bind:value={cameraZoom}
|
||||
on:input={slideCameraOrbit}/>
|
||||
</div>
|
||||
</div>
|
||||
<!--Rotationen-->
|
||||
<div class="flex mt-2 ml-2">
|
||||
|
||||
<div class="">
|
||||
<label class="" for="polarSlider">Rotation X:</label>
|
||||
<input id="polarSlider" type="range" min=0 max=360 bind:value={xRotation} />
|
||||
<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
|
||||
</div>
|
||||
<div class="">
|
||||
<label class="" for="polarSlider">Rotation Y:</label>
|
||||
<input id="polarSlider" type="range" min=0 max=360 bind:value={yRotation} />
|
||||
<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
|
||||
</div>
|
||||
<div class="">
|
||||
<label class="" for="polarSlider">Rotation Z:</label>
|
||||
<input id="polarSlider" type="range" min=0 max=360 bind:value={zRotation} />
|
||||
<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Loading-->
|
||||
<div
|
||||
slot="progress-bar"
|
||||
|
||||
Reference in New Issue
Block a user