diff --git a/src/Add-on/ExportData.tsx b/src/Add-on/ExportData.tsx index b36f9bced..056e882ae 100644 --- a/src/Add-on/ExportData.tsx +++ b/src/Add-on/ExportData.tsx @@ -310,22 +310,26 @@ export function ConverMaterialData(material: PhysicalMaterialRecord) d.baseColorDarkColor = material.baseColorDarkColor.toArray(); d.baseColorSaturability = material.baseColorSaturability; - //透明度附加 - d.opacityContrast = material.opacityContrast; - d.opacityBorder = material.opacityBorder; - d.opacityMaximum = material.opacityMaximum; - d.opacityMinimum = material.opacityMinimum; + if (material.type === "玻璃")//透明度附加 + { + d.opacityContrast = (1 - material.opacity) * 3; + d.opacityBorder = material.opacityBorder; + d.opacityMaximum = material.opacityMaximum; + d.opacityMinimum = material.opacityMinimum; + } //高光 d.specular = material.specular; d.selfLuminous = material.selfLuminous;//自发光 - //菲涅尔 - d.fresnelPO = material.fresnelPO; - d.fresnelST = material.fresnelST; - d.fresnelLuminance = material.fresnelLuminance; - d.fresnelLightColor = material.fresnelLightColor.toArray(); - d.fresnelDarkColor = material.fresnelDarkColor.toArray(); + if (material.type === "布料" || material.type === "皮革")//菲涅尔 + { + d.fresnelPO = material.fresnelPO; + d.fresnelST = material.fresnelST; + d.fresnelLuminance = material.fresnelLuminance; + d.fresnelLightColor = material.fresnelLightColor.toArray(); + d.fresnelDarkColor = material.fresnelDarkColor.toArray(); + } //锐化 d.sharpen = material.sharpen; diff --git a/src/DatabaseServices/IMaterialDefaultParam.ts b/src/DatabaseServices/IMaterialDefaultParam.ts index 7aa120851..e3fcae9b2 100644 --- a/src/DatabaseServices/IMaterialDefaultParam.ts +++ b/src/DatabaseServices/IMaterialDefaultParam.ts @@ -236,6 +236,7 @@ export const DefaultParamMap = Object.freeze({ selfLuminous: 0,//自发光强度 范围0-200 //#region 透明度附加 默认折叠 + opacity: 0.6, opacityContrast: 1, //不透明度对比 默认1 opacityBorder: 1, //不透明度边界 默认1 opacityMaximum: 1, //不透明度最大值 默认1 @@ -310,21 +311,24 @@ export const DefaultParamMap = Object.freeze({ selfLuminous: 0,//自发光强度 范围0-200 })) as MaterialParam, + + // 自定义: Object.freeze(Object.assign({ ...DefaultParam }, { + // })) as MaterialParam, }); export type MaterialType = keyof (typeof DefaultParamMap); export function SetMaterialParams(mtl: PhysicalMaterialRecord, param: MaterialParam): void { - for (let key in DefaultParamMap.木纹) + for (let key in param) { - let v = DefaultParamMap.木纹[key];; + let v = param[key]; if (v instanceof Color) { let c = mtl[key] as Color; c.copy(v); } else - mtl[key] = DefaultParamMap.木纹[key]; + mtl[key] = param[key]; } } diff --git a/src/DatabaseServices/PhysicalMaterialRecord.ts b/src/DatabaseServices/PhysicalMaterialRecord.ts index f63d6263a..24ca4e290 100644 --- a/src/DatabaseServices/PhysicalMaterialRecord.ts +++ b/src/DatabaseServices/PhysicalMaterialRecord.ts @@ -95,8 +95,12 @@ export class PhysicalMaterialRecord extends MaterialTableRecord this.material.color.set(this.color); this.material.transparent = this.transparent; - this.material.metalness = this.matalness; - this.material.opacity = this.opacity; + + if (this.type === "玻璃") + this.material.metalness = 0.2; + else + this.material.metalness = Math.min(0.8, this.matalness); + this.material.opacity = Math.max(0.1, this.opacity); this.material.depthTest = this.depthTest; this.material.bumpScale = this.bumpScale; this.material.roughness = this.roughness; @@ -110,6 +114,9 @@ export class PhysicalMaterialRecord extends MaterialTableRecord this.material.map = texture; this.material.needsUpdate = true; } + else + this.material.map = undefined; + if (this.useBumpMap && this.bumpMap && !this.bumpMap.IsErase) { let map = this.bumpMap.Object as TextureTableRecord; @@ -118,6 +125,9 @@ export class PhysicalMaterialRecord extends MaterialTableRecord this.material.bumpMap = texture; this.material.needsUpdate = true; } + else + this.material.bumpMap = undefined; + if (this.roughnessMap && this.roughnessMap && !this.roughnessMap.IsErase) { let map = this.roughnessMap.Object as TextureTableRecord; @@ -126,6 +136,9 @@ export class PhysicalMaterialRecord extends MaterialTableRecord this.material.roughnessMap = texture; this.material.needsUpdate = true; } + else + this.material.roughnessMap = undefined; + this.material.needsUpdate = true; this.AsyncUpdated(); diff --git a/src/DatabaseServices/Texture.ts b/src/DatabaseServices/Texture.ts index 0e1f6b282..8b825866d 100644 --- a/src/DatabaseServices/Texture.ts +++ b/src/DatabaseServices/Texture.ts @@ -22,6 +22,8 @@ export class TextureTableRecord extends SymbolTableRecord @AutoRecord moveX = 0;//材质位移 @AutoRecord moveY = 0; + @AutoRecord imgUrl: string = ""; + set WrapS(wrap: Wrapping) { if (wrap !== this.wrapS) @@ -46,23 +48,23 @@ export class TextureTableRecord extends SymbolTableRecord private texture: Texture = new Texture(); async Update() { - let imgUrl: string; if (this.imageUrl.endsWith("Default.png") || !this.imageUrl) { - imgUrl = ResourcesCDN_HOST + "Default.webp"; + this.imgUrl = ResourcesCDN_HOST + "Default.webp"; this.imageUrl = ""; } else - imgUrl = CURRENT_HOST + "/" + this.imageUrl; + this.imgUrl = CURRENT_HOST + "/" + this.imageUrl; - if (!this.texture.image || (this.texture.image && this.texture.image.src !== imgUrl)) - this.texture.image = await LoadImageFromUrl(imgUrl); + if (!this.texture.image || (this.texture.image && this.texture.image.src !== this.imgUrl)) + this.texture.image = await LoadImageFromUrl(this.imgUrl); this.texture.wrapS = this.wrapS; this.texture.wrapT = this.wrapT; this.texture.anisotropy = 16; this.texture.rotation = this.rotation; this.texture.repeat.set(this.repeatX, this.repeatY); + this.texture.offset.set(this.moveX, this.moveY); this.texture.needsUpdate = true; for (let f of this.waits) diff --git a/src/Editor/MaterialEditor.ts b/src/Editor/MaterialEditor.ts index e6f2a1f15..499c10985 100644 --- a/src/Editor/MaterialEditor.ts +++ b/src/Editor/MaterialEditor.ts @@ -15,7 +15,7 @@ export class MaterialEditor extends Singleton { Geometrys: Map; - m_CurGeometryName = observable.box("球"); + CurGeometryName = observable.box("球"); Canvas: HTMLElement; ShowObject: Object3D; ShowMesh: Mesh; @@ -36,8 +36,8 @@ export class MaterialEditor extends Singleton ["立方体", new BoxBufferGeometry(1e3, 1e3, 1e3, 1, 1, 1)], ["环面纽结", new TorusKnotBufferGeometry(0.7 * 1e3, 0.3 * 1e3, 128, 64)], ["圆锥体", new ConeBufferGeometry(1 * 1e3, 2 * 1e3, 32)], - ["球(多面)", new SphereBufferGeometry(1 * 1e3, 64, 64)], - ["立方体(多面)", new BoxBufferGeometry(1 * 1e3, 1 * 1e3, 1 * 1e3, 128, 128, 128)] + // ["球(多面)", new SphereBufferGeometry(1 * 1e3, 64, 64)], + // ["立方体(多面)", new BoxBufferGeometry(1 * 1e3, 1 * 1e3, 1 * 1e3, 128, 128, 128)] ] ); } @@ -49,6 +49,7 @@ export class MaterialEditor extends Singleton this.Viewer.PreViewer.Cursor.CursorObject.visible = false; this.Viewer.CameraCtrl.CameraType = CameraType.PerspectiveCamera; this.Viewer.UsePass = false; + this.Viewer.Renderer.setClearColor(0xE0E0E0, 1); this.initScene(); new MaterialEditorCamerControl(this.Viewer); } @@ -62,13 +63,13 @@ export class MaterialEditor extends Singleton { this.Canvas = canvas; this.initViewer(); - this.m_CurGeometryName.set("球"); + this.CurGeometryName.set("球"); } initScene() { let scene = this.Viewer.Scene; this.ShowObject = new Object3D(); - let geo = this.Geometrys.get(this.m_CurGeometryName.get()); + let geo = this.Geometrys.get(this.CurGeometryName.get()); this.ShowMesh = new Mesh(geo); this.ShowMesh.scale.set(1000, 1000, 1000); @@ -76,7 +77,7 @@ export class MaterialEditor extends Singleton scene.add(this.ShowObject); let remove = autorun(() => { - let geo = this.Geometrys.get(this.m_CurGeometryName.get()); + let geo = this.Geometrys.get(this.CurGeometryName.get()); if (geo) { this.ShowMesh.geometry = geo; @@ -111,7 +112,7 @@ export class MaterialEditor extends Singleton async Update() { let mat = this.ShowMesh.material as MeshPhysicalMaterial; - if (this.Material.map && this.Material.map.Object) + if (this.Material.map && this.Material.map.Object && this.Material.useMap) { let texture = this.Material.map.Object as TextureTableRecord; await texture.Update(); diff --git a/src/UI/Components/MaterialContainer.tsx b/src/UI/Components/MaterialContainer.tsx index 444f0b7bf..18b23fed6 100644 --- a/src/UI/Components/MaterialContainer.tsx +++ b/src/UI/Components/MaterialContainer.tsx @@ -202,7 +202,7 @@ export class MaterialContainer extends React.Component diff --git a/src/UI/Layout/MaterialEditorLayout.tsx b/src/UI/Layout/MaterialEditorLayout.tsx index 602f11d60..62a8899a7 100644 --- a/src/UI/Layout/MaterialEditorLayout.tsx +++ b/src/UI/Layout/MaterialEditorLayout.tsx @@ -5,7 +5,7 @@ import ResizeObserver from 'resize-observer-polyfill'; import { PhysicalMaterialRecord } from '../../DatabaseServices/PhysicalMaterialRecord'; import { MaterialEditor } from '../../Editor/MaterialEditor'; import { MATCONTENTID } from '../Components/MaterialContainer'; -import { Select } from '../MaterialEditor/MaterialCommon'; +import { Objects } from '../MaterialEditor/MaterialCommon'; import { PropertiesPane } from '../MaterialEditor/PropertiesPane'; import { MaterialStore } from '../Store/MaterialStore'; @@ -24,6 +24,7 @@ export class MaterialEditorLayout private initViewer() { let canvas = document.getElementById("MaterialCanvas"); + canvas.style.position = "relative"; this.editor = MaterialEditor.GetInstance() as MaterialEditor; this.editor.SetViewer(canvas); this.editor.setMaterial(this.material); @@ -54,6 +55,10 @@ export class MaterialEditorLayout this.htmlEl.appendChild(canvasContainer); + let object = document.createElement("div"); + object.id = "object"; + canvasContainer.appendChild(object); + let rightContainer = document.createElement("div"); this.htmlEl.appendChild(rightContainer); @@ -68,24 +73,28 @@ export class MaterialEditorLayout rightContainer.appendChild(obejctContainer); } - getSceneConfigEl() - { - return document.getElementById("SceneConfig"); - } getAttributePanelEl() { return document.getElementById("MaterialAttribute"); } + + getobject() + { + return document.getElementById("object"); + } renderSceneConfig() { ReactDOM.render( - this.selectEl = e} + onChange={action(e => + { + let PhysicalMaterial = new PhysicalMaterialRecord(); + for (let op of this.props.selects) + { + if (op === e.target.value) + { + this.props.value.set(op); + SetMaterialParams(PhysicalMaterial, DefaultParamMap[op]); + PhysicalMaterial.type = op; + if (op === "玻璃") + PhysicalMaterial.transparent = true; + else + PhysicalMaterial.transparent = false; + + this.setMaterial(PhysicalMaterial); + return; + } + } + })} + > + { + this.props.selects.map((op, i) => ) + } + + + ); + } +} + export const WrapSelects = [ { label: "镜像平铺", value: MirroredRepeatWrapping }, diff --git a/src/UI/MaterialEditor/PropertiesPane.tsx b/src/UI/MaterialEditor/PropertiesPane.tsx index 3f25f949e..2b2014c06 100644 --- a/src/UI/MaterialEditor/PropertiesPane.tsx +++ b/src/UI/MaterialEditor/PropertiesPane.tsx @@ -1,37 +1,113 @@ -import { Divider, Checkbox } from "@blueprintjs/core"; +import { Button, Checkbox, Collapse, Divider, Radio, RadioGroup } from "@blueprintjs/core"; import { inject, observer } from "mobx-react"; import * as React from "react"; +import { DefaultParamMap } from "../../DatabaseServices/IMaterialDefaultParam"; import { MaterialStore } from "../Store/MaterialStore"; -import { Check, ColorSelect, Lable, LableInput, Slider, Input } from "./MaterialCommon"; +import { Check, ColorSelect, Lable, LableInput, LightDarkColor, Slider, TypeSelect } from "./MaterialCommon"; import { MaterialLinkShopId } from "./MaterialLinkShop"; import { Texture } from "./TextureItem"; import { TextureList } from "./TextureList"; +const ButtonStyle: React.CSSProperties = { + fontSize: 14, outline: "none", justifyContent: "left" +}; + //材质的属性面板 @inject('store') @observer export class PropertiesPane extends React.Component<{ store?: MaterialStore; }, {}>{ + + public state = { + materialExtension: true, + colorExtension: false, + texturaExtension: true, + fresnelExtension: true, + OpacityExtension: true, + }; render() { let store = this.props.store; + let ParamMap = []; + for (const key in DefaultParamMap) + { + ParamMap.push(key); + } return ( <>
- - + +
+ { + this.state.colorExtension && +
+ + {/* + + */} + + + + +
+ } + +