diff --git a/packages/chili-core/src/material.ts b/packages/chili-core/src/material.ts index 0cffe2e8..c9ecc017 100644 --- a/packages/chili-core/src/material.ts +++ b/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,7 +231,7 @@ 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); } @@ -236,15 +239,6 @@ export class PhysicalMaterial extends Material { 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 { diff --git a/packages/chili-three/src/threeHelper.ts b/packages/chili-three/src/threeHelper.ts index 88dac006..fbdb68f2 100644 --- a/packages/chili-three/src/threeHelper.ts +++ b/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), }); } diff --git a/packages/chili-three/src/threeVisualObject.ts b/packages/chili-three/src/threeVisualObject.ts index 70ba2d75..afd9cfe8 100644 --- a/packages/chili-three/src/threeVisualObject.ts +++ b/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() { diff --git a/packages/chili-ui/src/property/material/materialEditor.module.css b/packages/chili-ui/src/property/material/materialEditor.module.css index e5ce469d..b3bc56a6 100644 --- a/packages/chili-ui/src/property/material/materialEditor.module.css +++ b/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 { diff --git a/packages/chili-ui/src/property/material/materialEditor.ts b/packages/chili-ui/src/property/material/materialEditor.ts index 9d1a2207..f630296c 100644 --- a/packages/chili-ui/src/property/material/materialEditor.ts +++ b/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), + ) ); } }