Click material (#2879)

* added material picking

* fix quick switching

Author: elalish

packages/space-opera/src/components/materials_panel/materials_panel.ts

@@ -43,6 +43,7 @@ import {CheckboxElement} from '../shared/checkbox/checkbox.js';
 import {ColorPicker} from '../shared/color_picker/color_picker.js';
 import {Dropdown} from '../shared/dropdown/dropdown.js';
 import {SliderWithInputElement} from '../shared/slider_with_input/slider_with_input.js';
+import {TabbedPanel} from '../shared/tabs/tabs.js';
 import {FileDetails, TexturePicker} from '../shared/texture_picker/texture_picker.js';
 import {ALPHA_BLEND_MODES} from '../utils/gltf_constants.js';
 import {checkFinite} from '../utils/reducer_utils.js';
@@ -172,6 +173,8 @@ export class MaterialPanel extends ConnectedLitElement {
     let start = -1;
     const DURATION = 1600;  // in milliseconds
 
+    const material = this.getMaterial();
+
     const interpolateStep = (timestamp: number) => {
       // New model is loaded mid interpolation
       if (start === -1) {
@@ -180,11 +183,10 @@ export class MaterialPanel extends ConnectedLitElement {
 
       const baseColorFactor = this.getInterpolatedColor(
           originalBaseColor, timestamp - start, DURATION);
-      this.getMaterial().pbrMetallicRoughness.setBaseColorFactor(
-          baseColorFactor);
+      material.pbrMetallicRoughness.setBaseColorFactor(baseColorFactor);
       const emissiveFactor = this.getInterpolatedEmissive(
           originalEmissiveFactor, timestamp - start, DURATION);
-      this.getMaterial().setEmissiveFactor(emissiveFactor);
+      material.setEmissiveFactor(emissiveFactor);
 
       if (timestamp - start <= DURATION) {
         requestAnimationFrame(interpolateStep);
@@ -272,6 +274,28 @@ export class MaterialPanel extends ConnectedLitElement {
     this.onSelectMaterial();
   }
 
+  firstUpdated() {
+    getModelViewer().addEventListener('click', this.onClick);
+  }
+
+  onClick = (event) => {
+    if (!(this.parentElement as TabbedPanel).selected) {
+      return;
+    }
+    const modelviewer = getModelViewer();
+    const pickedMaterial =
+        modelviewer.materialFromPoint(event.layerX, event.layerY);
+    if (pickedMaterial == null) {
+      return;
+    }
+    for (const [index, material] of modelviewer.model!.materials!.entries()) {
+      if (material === pickedMaterial) {
+        this.selectedMaterialIndex = index;
+        return;
+      }
+    }
+  };
+
   get selectedBaseColor(): RGBA {
     const alphaFactor =
         this.getMaterial().pbrMetallicRoughness.baseColorFactor[3];