modularize selection and support edge selection

src/tools/Selection.vue

@@ -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>

src/tools/Tools.vue

@@ -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'">
+  <selection :viewer="props.refSData.viewer"/>
-    <svg-icon type="mdi" :path="mdiCursorDefaultClick"/>
-  </v-btn>
   <v-btn icon="" @click="downloadSceneGlb">
     <svg-icon type="mdi" :path="mdiDownload"/>
   </v-btn>

src/viewer/ModelViewerWrapper.vue

@@ -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">