h3n3/yet-another-cad-viewer
1
0
Fork 0
mirror of https://github.com/yeicor-3d/yet-another-cad-viewer.git synced 2025-12-19 22:24:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

optimized build size again (icons & camera)

Browse Source
This commit is contained in:
Yeicor
2024-02-17 12:05:33 +01:00
parent 92c917b230
commit 52f6349c34
8 changed files with 54 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/tools/Tools.vue
View File

@@ -3,16 +3,19 @@ import {VBtn, VIcon} from "vuetify/lib/components";
import {ref} from "vue";
import OrientationGizmo from "./OrientationGizmo.vue";
import type {ModelScene} from "@google/model-viewer/lib/three-components/ModelScene";
import {OrthographicCamera} from "three";
import {OrthographicCamera} from "three/src/cameras/OrthographicCamera";
import {mdiCrosshairsGps, mdiProjector} from '@mdi/js'
import SvgIcon from '@jamescoyle/vue-icon';
const props = defineProps({
modelViewerInfo: Object
});
const props = defineProps<{
modelViewerInfo: { scene: ModelScene } | null
}>();
function syncOrthoCamera(force: boolean) {
if (!props.modelViewerInfo) return;
let scene: ModelScene = props.modelViewerInfo.scene
let scene = props.modelViewerInfo.scene
let perspectiveCam = (scene as any).__perspectiveCamera;
if (force || perspectiveCam && scene.camera != perspectiveCam) {
// Get zoom level from perspective camera
@@ -29,7 +32,7 @@ function syncOrthoCamera(force: boolean) {
let toggleProjectionText = ref('PERSP'); // Default to perspective camera
function toggleProjection() {
if (!props.modelViewerInfo) return;
let scene: ModelScene = props.modelViewerInfo.scene
let scene = props.modelViewerInfo.scene
let prevCam = scene.camera;
let wasPerspectiveCamera = prevCam.isPerspectiveCamera;
if (wasPerspectiveCamera) {
@@ -47,11 +50,15 @@ function toggleProjection() {
<template>
<orientation-gizmo v-if="props.modelViewerInfo" :scene="props.modelViewerInfo.scene"/>
<v-btn icon="mdi-projector" @click="toggleProjection"><span class="icon-detail">{{ toggleProjectionText }}</span>
<v-icon icon="mdi-projector"></v-icon>
<v-btn icon="" @click="toggleProjection"><span class="icon-detail">{{ toggleProjectionText }}</span>
<svg-icon type="mdi" :path="mdiProjector"></svg-icon>
</v-btn>
<v-btn icon="" @click=""> <!-- TODO: Center camera -->
<svg-icon type="mdi" :path="mdiCrosshairsGps"/>
</v-btn>
</template>
<!--suppress CssUnusedSymbol -->
<style>
.icon-detail {
position: absolute;
@@ -62,7 +69,7 @@ function toggleProjection() {
margin: auto;
}
.icon-detail + .v-icon {
.icon-detail + svg {
position: relative;
top: 5px;
}