🐞 fix: Fix the bug where the MeshNode material cannot be changed

packages/chili-core/src/material.ts

@@ -59,6 +59,9 @@ export class Texture extends HistoryObservable {
     set repeat(value: XY) {
         this.setProperty("repeat", value);
     }
+
+    @Serializer.serialze()
+    center: XY = new XY(0.5, 0.5);
 }
 
 @Serializer.register(["document", "name", "color", "id"])
@@ -111,7 +114,7 @@ export class Material extends HistoryObservable {
     constructor(document: IDocument, name: string, color: number, id: string = Id.generate()) {
         super(document);
         this.id = id;
-        this.setPrivateValue("name", name);
+        this.setPrivateValue("name", name ? name : "unnamed");
         this.setPrivateValue("color", color);
     }
 
@@ -126,9 +129,9 @@ export class Material extends HistoryObservable {
 @Serializer.register(["document", "name", "color", "id"])
 export class PhongMaterial extends Material {
     @Serializer.serialze()
-    @Property.define("material.specular")
+    @Property.define("material.specular", {type: "color"})
     get specular(): number {
-        return this.getPrivateValue("specular", 0xffff);
+        return this.getPrivateValue("specular", 0x111111);
     }
     set specular(value: number) {
         this.setProperty("specular", value);
@@ -137,14 +140,14 @@ export class PhongMaterial extends Material {
     @Serializer.serialze()
     @Property.define("material.shininess")
     get shininess(): number {
-        return this.getPrivateValue("shininess", 100);
+        return this.getPrivateValue("shininess", 30);
     }
     set shininess(value: number) {
         this.setProperty("shininess", value);
     }
 
     @Serializer.serialze()
-    @Property.define("material.emissive")
+    @Property.define("material.emissive", {type: "color"})
     get emissive(): number {
         return this.getPrivateValue("emissive", 0x000000);
     }
@@ -155,7 +158,7 @@ export class PhongMaterial extends Material {
     @Serializer.serialze()
     @Property.define("material.specularMap")
     get specularMap(): Texture {
-        return this.getPrivateValue("specularMap");
+        return this.getPrivateValue("specularMap", new Texture(this.document));
     }
     set specularMap(value: Texture) {
         this.setProperty("specularMap", value);
@@ -228,23 +231,14 @@ export class PhysicalMaterial extends Material {
     }
 
     @Serializer.serialze()
-    @Property.define("material.emissive")
+    @Property.define("material.emissive", {type: "color"})
     get emissive(): number {
         return this.getPrivateValue("emissive", 0x000000);
     }
     set emissive(value: number) {
         this.setProperty("emissive", value);
     }
 
-    @Serializer.serialze()
-    @Property.define("material.specularMap")
-    get specularMap(): Texture {
-        return this.getPrivateValue("specularMap", new Texture(this.document));
-    }
-    set specularMap(value: Texture) {
-        this.setProperty("specularMap", value);
-    }
-
     @Serializer.serialze()
     @Property.define("material.bumpMap")
     get bumpMap(): Texture {

packages/chili-three/src/threeHelper.ts

@@ -117,7 +117,7 @@ export class ThreeHelper {
                 ...params,
                 specularMap: this.loadTexture(material.specularMap),
                 shininess: material.shininess,
-                emissive: material.emissive,
+                emissive: ThreeHelper.fromColor(material.emissive),
                 emissiveMap: this.loadTexture(material.emissiveMap),
             });
         }

packages/chili-three/src/threeVisualObject.ts

@@ -61,7 +61,7 @@ export class ThreeMeshObject extends ThreeVisualObject {
     get mesh() {
         return this._mesh;
     }
-    private readonly material: LineMaterial | MeshLambertMaterial;
+    private material: LineMaterial | MeshLambertMaterial;
 
     constructor(
         readonly context: ThreeVisualContext,
@@ -102,15 +102,15 @@ export class ThreeMeshObject extends ThreeVisualObject {
         throw new Error("Unknown mesh type");
     }
 
-    private readonly handleGeometryPropertyChanged = (property: keyof MeshNode) => {
+    private readonly handleGeometryPropertyChanged = (property: keyof MeshNode, s: any, o: any) => {
         if (property === "mesh") {
             this.disposeMesh();
             this._mesh = this.createMesh();
             this.add(this._mesh);
         } else if (property === "materialId") {
             if (this._mesh instanceof Mesh) {
-                let material = this.context.getMaterial(this.meshNode.materialId);
-                this._mesh.material = material;
+                this.material = this.context.getMaterial(this.meshNode.materialId) as MeshLambertMaterial;
+                this._mesh.material = this.material;
             }
         }
     };
@@ -128,7 +128,10 @@ export class ThreeMeshObject extends ThreeVisualObject {
             buff.setIndex(this.meshNode.mesh.index);
         }
         buff.computeBoundingBox();
-        return new Mesh(buff, this.context.materialMap.values().next().value);
+        let material =this.meshNode.materialId 
+            ? this.context.getMaterial(this.meshNode.materialId)
+            : this.context.materialMap.values().next().value;
+        return new Mesh(buff, material);
     }
 
     private newLine() {

packages/chili-ui/src/property/material/materialEditor.module.css

@@ -8,11 +8,15 @@
     top: 16px;
     left: 16px;
     padding: 16px;
+    max-width: 480px;
+    max-height: 65%;
+    overflow: hidden;
 }
 
 .title {
     margin: 0px 6px;
     display: flex;
+    flex: 0;
     flex-direction: row;
     align-items: center;
 
@@ -42,7 +46,9 @@
     border: 1px solid var(--border-color);
     margin: 8px 0px;
     padding: 4px;
-    height: 120px;
+    height: 60px;
+    max-height: 120px;
+    flex: 0;
 }
 
 .material {
@@ -57,20 +63,17 @@
     border: 5px solid var(--primary-color);
 }
 
-.editing {
+.properties {
     display: flex;
-    flex-direction: row;
+    flex: 1;
+    flex-direction: column;
     border-radius: 8px;
     background-color: var(--panel-background-color);
     border: 1px solid var(--border-color);
     padding: 16px;
     --delete-visiblity: hidden;
-
-    .properties {
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-    }
+    overflow: hidden;
+    overflow-y: auto;
 }
 
 .bottom {

packages/chili-ui/src/property/material/materialEditor.ts

@@ -1,6 +1,6 @@
 // Copyright 2022-2023 the Chili authors. All rights reserved. AGPL-3.0 license.
 
-import { Binding, IConverter, Material, PathBinding, Property, PubSub, Result } from "chili-core";
+import { Binding, IConverter, Material, PathBinding, Property, PubSub, Result, Texture } from "chili-core";
 import { button, collection, div, localize, span, svg } from "../../components";
 import { ColorConverter } from "../../converters";
 import { findPropertyControl } from "../utils";
@@ -22,7 +22,7 @@ export class MaterialEditor extends HTMLElement {
 
     constructor(readonly dataContent: MaterialDataContent) {
         super();
-        this.editingControl = div();
+        this.editingControl = div({className: style.properties});
         this.initEditingControl(dataContent.editingMaterial);
         this.append(
             div(
@@ -126,20 +126,20 @@ export class MaterialEditor extends HTMLElement {
     };
 
     private initEditingControl(material: Material) {
-        this.editingControl.appendChild(
-            div(
-                {
-                    className: style.editing,
-                },
-                div(
-                    {
-                        className: style.properties,
-                    },
-                    ...Property.getProperties(material).map((x) =>
-                        findPropertyControl(this.dataContent.document, [material], x),
-                    ),
-                ),
+        this.editingControl.innerHTML = "";
+
+        const isTexture = (p: Property) => {
+            return (material as any)[p.name] instanceof Texture;
+        }
+
+        let properties = Property.getProperties(material);
+        this.editingControl.append(
+            ...properties.filter(x => !isTexture(x)).map((x) =>
+                findPropertyControl(this.dataContent.document, [material], x),
             ),
+            ...properties.filter(isTexture).map((x) =>
+                findPropertyControl(this.dataContent.document, [material], x),
+            )
         );
     }
 }