mirror of
https://github.com/yeicor-3d/yet-another-cad-viewer.git
synced 2025-12-19 22:24:17 +01:00
modularize selection and support edge selection
This commit is contained in:
Yeicor
100
src/tools/Selection.vue
Normal file
100
src/tools/Selection.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<script setup lang="ts">
|
||||
import {defineModel, ref} from "vue";
|
||||
import {VBtn} from "vuetify/lib/components";
|
||||
import SvgIcon from '@jamescoyle/vue-icon';
|
||||
import type {ModelViewerElement} from '@google/model-viewer';
|
||||
import {mdiCursorDefaultClick} from '@mdi/js';
|
||||
import {$scene} from "@google/model-viewer/lib/model-viewer-base";
|
||||
import type {Intersection} from "three";
|
||||
|
||||
let props = defineProps<{ viewer: ModelViewerElement }>();
|
||||
let selectionEnabled = ref(false);
|
||||
let selectedMaterials = defineModel<Array<Intersection>>({default: []});
|
||||
let hasListener = false;
|
||||
let mouseDownAt: [number, number] | null = null;
|
||||
|
||||
let selectionMoveListener = (event: MouseEvent) => {
|
||||
if (!selectionEnabled.value) return;
|
||||
mouseDownAt = [event.clientX, event.clientY];
|
||||
};
|
||||
|
||||
let selectionListener = (event: MouseEvent) => {
|
||||
if (!selectionEnabled.value) {
|
||||
mouseDownAt = undefined;
|
||||
return;
|
||||
}
|
||||
if (mouseDownAt) {
|
||||
let [x, y] = mouseDownAt;
|
||||
if (Math.abs(event.clientX - x) > 5 || Math.abs(event.clientY - y) > 5) {
|
||||
mouseDownAt = undefined;
|
||||
return;
|
||||
}
|
||||
mouseDownAt = undefined;
|
||||
}
|
||||
let viewer: ModelViewerElement = props.viewer;
|
||||
// FIXME: Clicking near edges does not work...
|
||||
// FIXME: Clicking with ORTHO camera does not work...
|
||||
//const material = viewer.materialFromPoint(event.clientX, event.clientY);
|
||||
// NOTE: Need to access internal as the API has issues with small faces surrounded by edges
|
||||
let scene = viewer[$scene]
|
||||
const ndcCoords = scene.getNDC(event.clientX, event.clientY);
|
||||
const hit = scene.hitFromPoint(ndcCoords);
|
||||
console.log(hit)
|
||||
// TODO: Multiple hits to differenciate edges and faces
|
||||
if (!hit) return;
|
||||
const wasSelected = selectedMaterials.value.find((m) => m.object.name === hit.object.name) !== undefined;
|
||||
if (wasSelected) {
|
||||
deselect(hit)
|
||||
} else {
|
||||
select(hit)
|
||||
}
|
||||
};
|
||||
|
||||
function select(hit: Intersection) {
|
||||
if (selectedMaterials.value.find((m) => m.object.name === hit.object.name) === undefined) {
|
||||
selectedMaterials.value.push(hit);
|
||||
}
|
||||
(hit.object.material as any).__prevBaseColorFactor = [
|
||||
hit.object.material.color.r,
|
||||
hit.object.material.color.g,
|
||||
hit.object.material.color.b,
|
||||
];
|
||||
hit.object.material.color.r = 1;
|
||||
hit.object.material.color.g = 0;
|
||||
hit.object.material.color.b = 0;
|
||||
}
|
||||
|
||||
function deselect(hit: Intersection, alsoRemove = true) {
|
||||
if (alsoRemove) selectedMaterials.value = selectedMaterials.value.filter((m) => m.object.name !== hit.object.name);
|
||||
hit.object.material.color.r = (hit.object.material as any).__prevBaseColorFactor[0]
|
||||
hit.object.material.color.g = (hit.object.material as any).__prevBaseColorFactor[1]
|
||||
hit.object.material.color.b = (hit.object.material as any).__prevBaseColorFactor[2]
|
||||
delete (hit.object.material as any).__prevBaseColorFactor;
|
||||
}
|
||||
|
||||
function toggleSelection() {
|
||||
let viewer: ModelViewerElement = props.viewer;
|
||||
if (!viewer) return;
|
||||
selectionEnabled.value = !selectionEnabled.value;
|
||||
if (selectionEnabled.value) {
|
||||
if (!hasListener) {
|
||||
viewer.addEventListener('mouseup', selectionListener);
|
||||
viewer.addEventListener('mousedown', selectionMoveListener); // Avoid clicking when dragging
|
||||
hasListener = true;
|
||||
}
|
||||
for (let material of selectedMaterials.value) {
|
||||
select(material);
|
||||
}
|
||||
} else {
|
||||
for (let material of selectedMaterials.value) {
|
||||
deselect(material, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-btn icon="" @click="toggleSelection" :variant="selectionEnabled ? 'tonal' : 'elevated'">
|
||||
<svg-icon type="mdi" :path="mdiCursorDefaultClick"/>
|
||||
</v-btn>
|
||||
</template>
|
||||
@@ -3,11 +3,11 @@ import {VBtn} from "vuetify/lib/components";
|
||||
import {ref} from "vue";
|
||||
import OrientationGizmo from "./OrientationGizmo.vue";
|
||||
import {OrthographicCamera} from "three/src/cameras/OrthographicCamera";
|
||||
import {mdiCrosshairsGps, mdiCursorDefaultClick, mdiDownload, mdiProjector} from '@mdi/js'
|
||||
import {mdiCrosshairsGps, mdiDownload, mdiProjector} from '@mdi/js'
|
||||
import SvgIcon from '@jamescoyle/vue-icon';
|
||||
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";
|
||||
import type {ModelViewerElement} from '@google/model-viewer';
|
||||
import Selection from "./Selection.vue";
|
||||
|
||||
let props = defineProps<{ refSData: SceneMgrRefData }>();
|
||||
|
||||
@@ -50,73 +50,6 @@ function centerCamera() {
|
||||
viewer.updateFraming();
|
||||
}
|
||||
|
||||
let selectionEnabled = ref(false);
|
||||
let selectedMaterials: Array<Material> = []
|
||||
let hasListener = false;
|
||||
let ignoreClickFrom: [number, number] | null = null;
|
||||
let selectionMoveListener = (event: MouseEvent) => {
|
||||
if (!selectionEnabled.value) return;
|
||||
ignoreClickFrom = [event.clientX, event.clientY];
|
||||
};
|
||||
|
||||
let selectionListener = (event: MouseEvent) => {
|
||||
if (!selectionEnabled.value) {
|
||||
ignoreClickFrom = undefined;
|
||||
return;
|
||||
}
|
||||
if (ignoreClickFrom) {
|
||||
let [x, y] = ignoreClickFrom;
|
||||
if (Math.abs(event.clientX - x) > 5 || Math.abs(event.clientY - y) > 5) {
|
||||
ignoreClickFrom = undefined;
|
||||
return;
|
||||
}
|
||||
ignoreClickFrom = undefined;
|
||||
}
|
||||
let viewer: ModelViewerElement = props.refSData.viewer;
|
||||
// FIXME: Clicking near edges does not work...
|
||||
// FIXME: Clicking with ORTHO camera does not work...
|
||||
const material = viewer.materialFromPoint(event.clientX, event.clientY);
|
||||
console.log(material)
|
||||
if (material === null) return;
|
||||
const wasSelected = selectedMaterials.find((m) => m === material) !== undefined;
|
||||
if (wasSelected) {
|
||||
deselect(material)
|
||||
} else {
|
||||
select(material)
|
||||
}
|
||||
};
|
||||
|
||||
function select(material: Material) {
|
||||
if(selectedMaterials.find((m) => m === material) === undefined) selectedMaterials.push(material);
|
||||
(material as any).__prevBaseColorFactor = [...material.pbrMetallicRoughness.baseColorFactor];
|
||||
material.pbrMetallicRoughness.setBaseColorFactor([1, 0, 0, 1] as RGBA);
|
||||
}
|
||||
|
||||
function deselect(material: Material, alsoRemove = true) {
|
||||
if (alsoRemove) selectedMaterials = selectedMaterials.filter((m) => m !== material);
|
||||
material.pbrMetallicRoughness.setBaseColorFactor(
|
||||
(material as any).__prevBaseColorFactor);
|
||||
}
|
||||
|
||||
function toggleSelection() {
|
||||
let viewer: ModelViewerElement = props.refSData.viewer;
|
||||
if (!viewer) return;
|
||||
selectionEnabled.value = !selectionEnabled.value;
|
||||
if (selectionEnabled.value) {
|
||||
if (!hasListener) {
|
||||
viewer.addEventListener('mouseup', selectionListener);
|
||||
viewer.addEventListener('mousedown', selectionMoveListener); // Avoid clicking when dragging
|
||||
hasListener = true;
|
||||
}
|
||||
for (let material of selectedMaterials) {
|
||||
select(material);
|
||||
}
|
||||
} else {
|
||||
for (let material of selectedMaterials) {
|
||||
deselect(material, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function downloadSceneGlb() {
|
||||
let viewer = props.refSData.viewer;
|
||||
@@ -139,9 +72,7 @@ async function downloadSceneGlb() {
|
||||
<v-btn icon="" @click="centerCamera">
|
||||
<svg-icon type="mdi" :path="mdiCrosshairsGps"/>
|
||||
</v-btn>
|
||||
<v-btn icon="" @click="toggleSelection" :variant="selectionEnabled ? 'tonal' : 'elevated'">
|
||||
<svg-icon type="mdi" :path="mdiCursorDefaultClick"/>
|
||||
</v-btn>
|
||||
<selection :viewer="props.refSData.viewer"/>
|
||||
<v-btn icon="" @click="downloadSceneGlb">
|
||||
<svg-icon type="mdi" :path="mdiDownload"/>
|
||||
</v-btn>
|
||||
|
||||
@@ -34,7 +34,7 @@ onMounted(() => {
|
||||
<template>
|
||||
<model-viewer ref="viewer"
|
||||
style="width: 100%; height: 100%" :src="props.src" alt="The 3D model(s)" camera-controls camera-orbit="30deg 75deg auto"
|
||||
max-camera-orbit="Infinity 180deg auto" min-camera-orbit="-Infinity 0deg 1%" disable-tap
|
||||
max-camera-orbit="Infinity 180deg auto" min-camera-orbit="-Infinity 0deg 5%" disable-tap
|
||||
:exposure="settings.exposure" :shadow-intensity="settings.shadowIntensity" interaction-prompt="none"
|
||||
:autoplay="settings.autoplay" :ar="settings.arModes.length > 0" :ar-modes="settings.arModes"
|
||||
:skybox-image="settings.background" :environment-image="settings.background">
|
||||
|
||||
Reference in New Issue
Block a user