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

add a couple of useful tools

Browse Source
This commit is contained in:
Yeicor
2024-02-18 19:10:08 +01:00
parent 47f7d09385
commit 0f46d06463
4 changed files with 69 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/tools/Tools.vue
View File

@@ -3,15 +3,16 @@ import {VBtn} from "vuetify/lib/components";
import {ref} from "vue";
import OrientationGizmo from "./OrientationGizmo.vue";
import {OrthographicCamera} from "three/src/cameras/OrthographicCamera";
import {mdiCrosshairsGps, mdiProjector} from '@mdi/js'
import {mdiCrosshairsGps, mdiCursorDefaultClick, mdiDownload, mdiProjector} from '@mdi/js'
import SvgIcon from '@jamescoyle/vue-icon';
import {SceneManagerData} from "../misc/scene";
import type {ModelViewerElement} from '@google/model-viewer';
import type {ModelViewerElement, RGBA} from '@google/model-viewer';
import type {Material} from '@google/model-viewer/lib/features/scene-graph/material.js';
import {SceneMgrRefData} from "../misc/scene";
let props = defineProps<{ sceneMgrData: SceneManagerData }>();
let props = defineProps<{ refSData: SceneMgrRefData }>();
function syncOrthoCamera(force: boolean) {
let scene = props.sceneMgrData.viewerScene;
let scene = props.refSData.viewerScene;
if (!scene) return;
let perspectiveCam = (scene as any).__perspectiveCamera;
if (force || perspectiveCam && scene.camera != perspectiveCam) {
@@ -28,7 +29,7 @@ function syncOrthoCamera(force: boolean) {
let toggleProjectionText = ref('PERSP'); // Default to perspective camera
function toggleProjection() {
let scene = props.sceneMgrData.viewerScene;
let scene = props.refSData.viewerScene;
if (!scene) return;
let prevCam = scene.camera;
let wasPerspectiveCamera = prevCam.isPerspectiveCamera;
@@ -44,32 +45,76 @@ function toggleProjection() {
}
function centerCamera() {
let viewer: ModelViewerElement = props.sceneMgrData.viewer;
let viewer: ModelViewerElement = props.refSData.viewer;
if (!viewer) return;
viewer.updateFraming();
}
let selectionEnabled = ref(false);
let prevHighlightedMaterial: Material | null = null;
let hasListener = false;
let selectionListener = (event: MouseEvent) => {
if (!selectionEnabled.value) return;
let viewer: ModelViewerElement = props.refSData.viewer;
const material = viewer.materialFromPoint(event.clientX, event.clientY);
if (material !== null && prevHighlightedMaterial?.index === material.index) return
if (prevHighlightedMaterial) {
prevHighlightedMaterial.pbrMetallicRoughness.setBaseColorFactor(
(prevHighlightedMaterial as any).__prevBaseColorFactor);
}
if (!material) {
prevHighlightedMaterial = null;
return;
}
(material as any).__prevBaseColorFactor = [...material.pbrMetallicRoughness.baseColorFactor];
material.pbrMetallicRoughness.setBaseColorFactor([1, 0, 0, 1] as RGBA);
prevHighlightedMaterial = material;
};
function toggleSelection() {
let viewer: ModelViewerElement = props.refSData.viewer;
if (!viewer) return;
selectionEnabled.value = !selectionEnabled.value;
if (selectionEnabled.value) {
if (!hasListener) {
viewer.addEventListener('mousemove', selectionListener);
hasListener = true;
}
} else {
if (prevHighlightedMaterial) {
prevHighlightedMaterial.pbrMetallicRoughness.setBaseColorFactor(
(prevHighlightedMaterial as any).__prevBaseColorFactor);
prevHighlightedMaterial = null;
}
}
}
async function downloadSceneGlb() {
let viewer = props.refSData.viewer;
if (!viewer) return;
const glTF = await viewer.exportScene();
const file = new File([glTF], "export.glb");
const link = document.createElement("a");
link.download = file.name;
link.href = URL.createObjectURL(file);
link.click();
}
</script>
<template>
<orientation-gizmo :scene="props.sceneMgrData.viewerScene" v-if="props.sceneMgrData.viewerScene !== null"/>
<orientation-gizmo :scene="props.refSData.viewerScene" v-if="props.refSData.viewerScene !== null"/>
<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="centerCamera">
<svg-icon type="mdi" :path="mdiCrosshairsGps"/>
</v-btn>
<v-btn icon="" @click="centerCamera">
<svg-icon type="mdi" :path="mdiCrosshairsGps"/>
<v-btn icon="" @click="toggleSelection" :variant="selectionEnabled ? 'tonal' : 'elevated'">
<svg-icon type="mdi" :path="mdiCursorDefaultClick"/>
</v-btn>
<v-btn icon="" @click="centerCamera">
<svg-icon type="mdi" :path="mdiCrosshairsGps"/>
</v-btn>
<v-btn icon="" @click="centerCamera">
<svg-icon type="mdi" :path="mdiCrosshairsGps"/>
</v-btn>
<v-btn icon="" @click="centerCamera">
<svg-icon type="mdi" :path="mdiCrosshairsGps"/>
<v-btn icon="" @click="downloadSceneGlb">
<svg-icon type="mdi" :path="mdiDownload"/>
</v-btn>
</template>