修改更新
This commit is contained in:
parent
16fac2ab19
commit
26f1c60a43
@ -167,10 +167,15 @@ export class MaterialEditor
|
||||
private Material: PhysicalMaterialRecord;
|
||||
setMaterial(mat: PhysicalMaterialRecord)
|
||||
{
|
||||
console.log("set", mat.Material);
|
||||
this.Material = mat;
|
||||
this._MeshMaterial.copy(mat.Material);
|
||||
|
||||
let mtl = this._MeshMaterial;
|
||||
console.log("set2", this._MeshMaterial)
|
||||
|
||||
this.ShowMesh.material = mtl;
|
||||
|
||||
if (mtl.metalness > 0.8)
|
||||
this.LoadMetalEnv().then(env =>
|
||||
{
|
||||
@ -183,7 +188,7 @@ export class MaterialEditor
|
||||
mtl.envMap = exr;
|
||||
mtl.needsUpdate = true;
|
||||
});
|
||||
|
||||
this.ShowMesh.updateWorldMatrix(true,true)
|
||||
this.Update();
|
||||
}
|
||||
|
||||
|
@ -38,26 +38,26 @@
|
||||
|
||||
<label>金属度</label>
|
||||
<CfFlex gap="1em">
|
||||
<input v-model="model.metallic" type="range" min="0" max="1" step="0.01" />
|
||||
<span>{{ model.metallic }}</span>
|
||||
<input v-model="Material.matalness" @change="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
|
||||
<span>{{ Material.matalness }}</span>
|
||||
</CfFlex>
|
||||
|
||||
<label>粗糙度</label>
|
||||
<CfFlex gap="1em">
|
||||
<input v-model="model.roughness" type="range" min="0" max="1" step="0.01" />
|
||||
<span>{{ model.roughness }}</span>
|
||||
<input v-model="Material.roughness" @change="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
|
||||
<span>{{ Material.roughness }}</span>
|
||||
</CfFlex>
|
||||
|
||||
<label>法线强度</label>
|
||||
<CfFlex gap="1em">
|
||||
<input v-model="model.normalScale" type="range" min="0" max="1" step="0.01" />
|
||||
<span>{{ model.normalScale }}</span>
|
||||
<input v-model="Material.bumpScale" @change="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
|
||||
<span>{{ Material.bumpScale }}</span>
|
||||
</CfFlex>
|
||||
|
||||
<label>高光</label>
|
||||
<CfFlex gap="1em">
|
||||
<input v-model="model.emissiveIntensity" type="range" min="0" max="1" step="0.01" />
|
||||
<span>{{ model.emissiveIntensity }}</span>
|
||||
<input v-model="Material.specular" @change="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
|
||||
<span>{{ Material.specular }}</span>
|
||||
</CfFlex>
|
||||
</div>
|
||||
|
||||
@ -66,7 +66,7 @@
|
||||
<label>启用纹理</label>
|
||||
<input type="checkbox" v-model="enableTexture" />
|
||||
|
||||
<label>平铺U</label>
|
||||
<!-- <label>平铺U</label>
|
||||
<select v-model="textureAdjustment.wrapS">
|
||||
<option value="0">镜像平铺</option>
|
||||
<option value="1">平铺</option>
|
||||
@ -78,7 +78,7 @@
|
||||
<option value="0">镜像平铺</option>
|
||||
<option value="1">平铺</option>
|
||||
<option value="2">展开</option>
|
||||
</select>
|
||||
</select> -->
|
||||
|
||||
<label>旋转</label>
|
||||
<input v-model="textureAdjustment.rotation" type="number" step="0.01" min="0" max="359" />
|
||||
@ -115,7 +115,6 @@ import CfFlex from "./CfFlex.vue";
|
||||
import { DirectoryId } from "../api/Request";
|
||||
import { IsNullOrWhitespace } from "../helpers/helper.string";
|
||||
import { FromDeflateBase64, ToDeflatedBase64 } from "../helpers/helper.material";
|
||||
import { MaterialIn } from "../common/MaterialSerializer";
|
||||
|
||||
export interface MaterialRequest {
|
||||
/** 材质名 */
|
||||
@ -150,12 +149,12 @@ const textureAdjustment = ref<TextureAdjustment>({
|
||||
moveY: 0
|
||||
});
|
||||
const uploading = ref(false);
|
||||
const model = reactive({
|
||||
metallic: Material.value.matalness,
|
||||
roughness: Material.value.roughness,
|
||||
normalScale: Material.value.bumpScale,
|
||||
emissiveIntensity: Material.value.specular
|
||||
});
|
||||
// const model = reactive({
|
||||
// metallic: Material.value.matalness,
|
||||
// roughness: Material.value.roughness,
|
||||
// normalScale: Material.value.bumpScale,
|
||||
// emissiveIntensity: Material.value.specular
|
||||
// });
|
||||
const materialInfo = reactive({
|
||||
dirId: DirectoryId.MaterialDir, // 正常来说是2
|
||||
materialName: '材质1',
|
||||
@ -171,9 +170,6 @@ watch(() => props.textureSrc, async (val) => {
|
||||
await scene.ChangeTextureFromUrlAsync(_textureSrc.value);
|
||||
});
|
||||
|
||||
watch(model, async (val) => {
|
||||
await UpdateMaterial();
|
||||
});
|
||||
|
||||
watch(enableTexture, async (val) => {
|
||||
await EnableTexture(val);
|
||||
@ -185,6 +181,7 @@ watch(textureAdjustment, async (val) => {
|
||||
|
||||
// 监听纹理更新
|
||||
watch(() => scene.CurrTexture, (val) => {
|
||||
console.log('watch-CurrTexture')
|
||||
textureAdjustment.value = {
|
||||
wrapS: val.wrapS,
|
||||
wrapT: val.wrapT,
|
||||
@ -197,15 +194,17 @@ watch(() => scene.CurrTexture, (val) => {
|
||||
})
|
||||
|
||||
async function UpdateMaterial() {
|
||||
Material.value.matalness = model.metallic;
|
||||
Material.value.roughness = model.roughness;
|
||||
Material.value.bumpScale = model.normalScale;
|
||||
Material.value.specular = model.emissiveIntensity;
|
||||
console.log(scene.CurrentShowObject)
|
||||
// Material.value.matalness = model.metallic;
|
||||
// Material.value.roughness = model.roughness;
|
||||
// Material.value.bumpScale = model.normalScale;
|
||||
// Material.value.specular = model.emissiveIntensity;
|
||||
// Material.value.side = DoubleSide;
|
||||
await scene.UpdateMaterialAsync();
|
||||
}
|
||||
|
||||
function UpdateTexture() {
|
||||
console.log('UpdateTexture')
|
||||
const texture = scene.CurrTexture;
|
||||
const val = textureAdjustment.value;
|
||||
texture.wrapS = val.wrapS;
|
||||
@ -228,8 +227,7 @@ async function loadData() {
|
||||
if(!materialInfo.inputText) return;
|
||||
const json = JSON.parse(materialInfo.inputText);
|
||||
const cadFile = FromDeflateBase64(json.file);
|
||||
MaterialIn(JSON.parse(cadFile));
|
||||
|
||||
scene.ImportMaterialAsync(cadFile)
|
||||
}
|
||||
|
||||
async function HandleUpload() {
|
||||
|
@ -2,6 +2,7 @@ import type { DeepReadonly } from "vue"
|
||||
import type { MaterialRequest } from "../components/MaterialAdjuster.vue"
|
||||
|
||||
let _libOutputConfig = {
|
||||
host:'https://tapi.cfcad.cn:7779',
|
||||
textureSrc: "",
|
||||
file: undefined,
|
||||
submitCallback: undefined,
|
||||
@ -18,6 +19,10 @@ export function ConfigureLibOutput(config: Partial<LibOutputConfig>) {
|
||||
}
|
||||
|
||||
export type LibOutputConfig = {
|
||||
/**
|
||||
* 材质文件域名
|
||||
*/
|
||||
host: string,
|
||||
/** 材质贴图链接 */
|
||||
textureSrc: string,
|
||||
/** 材质预设数据,base64编码 */
|
||||
|
@ -6,6 +6,7 @@ import { LoadImageFromUrl } from "../helpers/helper.imageLoader";
|
||||
import { Texture } from "three";
|
||||
import { materialRenderer } from "../common/MaterialRenderer";
|
||||
import { MaterialIn, MaterialOut } from "../common/MaterialSerializer";
|
||||
import { GetConfig } from "../lib/libOutputConfig";
|
||||
|
||||
const sceneSetup = () => {
|
||||
let _editor: MaterialEditor | undefined;
|
||||
@ -19,6 +20,7 @@ const sceneSetup = () => {
|
||||
const CurrTexture = computed<Texture>(() => _currTexture.value);
|
||||
const Geometries = ref<string[]>([]);
|
||||
const Material = ref<PhysicalMaterialRecord>(new PhysicalMaterialRecord());
|
||||
const CurrentShowObject = computed(() => _editor.ShowObject);
|
||||
|
||||
function Initial(canvas: HTMLElement) {
|
||||
if (_editor) {
|
||||
@ -31,7 +33,7 @@ const sceneSetup = () => {
|
||||
_database.hm.Enable = false; // 关闭历史记录功能
|
||||
Material.value.Name = _database.MaterialTable.AllocateName(); // 使用Database为材质分配材质名
|
||||
_database.MaterialTable.Add(Material.value as PhysicalMaterialRecord);
|
||||
|
||||
|
||||
// 为Material配置一个ObjectId,否则其无法被序列化
|
||||
// Material.value.objectId = new ObjectId(undefined, undefined);
|
||||
|
||||
@ -72,28 +74,44 @@ const sceneSetup = () => {
|
||||
}
|
||||
|
||||
async function UpdateMaterialAsync() {
|
||||
console.log('UpdateMaterialAsync')
|
||||
await Material.value.Update();
|
||||
await _editor.Update();
|
||||
Update();
|
||||
}
|
||||
|
||||
async function ChangeTextureFromUrlAsync(url: string) {
|
||||
const img = await LoadImageFromUrl(url);
|
||||
|
||||
async function ChangeTextureFromUrlAsync(url?: string) {
|
||||
|
||||
console.log('ChangeTextureFromUrlAsync')
|
||||
// 关联贴图
|
||||
const db = Material.value.Db;
|
||||
const record = new TextureTableRecord();
|
||||
if (!db) return; // 材质未初始化
|
||||
let record = Material.value.map?.Object as TextureTableRecord;
|
||||
if (!record) {
|
||||
// record = db.TextureTable.Symbols.values().next().value;
|
||||
// if(!record){
|
||||
record = new TextureTableRecord();
|
||||
record.Name = db.TextureTable.AllocateName();
|
||||
db.TextureTable.Add(record);
|
||||
// 替换map
|
||||
Material.value.map = record.Id;
|
||||
// Material.value.map = img ? record.Id : undefined;
|
||||
// }
|
||||
}
|
||||
|
||||
// record.objectId = new ObjectId(undefined, record);
|
||||
record.Name = db.TextureTable.AllocateName();
|
||||
db.TextureTable.Add(record);
|
||||
_currTexture.value = record['texture'] as Texture;
|
||||
if (url) {
|
||||
record.imageUrl = url;
|
||||
_currTexture.value.image = undefined;
|
||||
}
|
||||
|
||||
// 设置Store
|
||||
_currTexture.value = record['texture'] as Texture;
|
||||
_currTexture.value.image = img;
|
||||
|
||||
// 替换map
|
||||
Material.value.map = img ? record.Id : undefined;
|
||||
_currTexture.value.needsUpdate = true;
|
||||
if (!_currTexture.value.image) {
|
||||
const img = await LoadImageFromUrl(GetConfig().host + '/' + record.imageUrl);
|
||||
_currTexture.value.image = img;
|
||||
_currTexture.value.needsUpdate = true;
|
||||
}
|
||||
await UpdateMaterialAsync();
|
||||
}
|
||||
|
||||
@ -103,30 +121,11 @@ const sceneSetup = () => {
|
||||
return matJson;
|
||||
}
|
||||
|
||||
async function ApplyTextureAsync(textureRecord: TextureTableRecord)
|
||||
{
|
||||
if (!textureRecord.imageUrl) {
|
||||
alert("该纹理无效");
|
||||
return;
|
||||
}
|
||||
|
||||
// 绑定纹理
|
||||
let newTexture = textureRecord.Clone() as TextureTableRecord;
|
||||
newTexture.Owner = undefined;
|
||||
newTexture.Name = _database.TextureTable.AllocateName();
|
||||
_database.TextureTable.Add(newTexture);
|
||||
|
||||
// 替换map
|
||||
Material.value.map = newTexture.Id;
|
||||
|
||||
await UpdateMaterialAsync();
|
||||
}
|
||||
|
||||
async function ImportMaterialAsync(materialJson: string) {
|
||||
const material = MaterialIn(JSON.parse(materialJson));
|
||||
Material.value = material;
|
||||
_editor.setMaterial(material);
|
||||
await UpdateMaterialAsync();
|
||||
await ChangeTextureFromUrlAsync();
|
||||
}
|
||||
|
||||
async function GenerateMaterialLogoAsync() {
|
||||
@ -158,7 +157,8 @@ const sceneSetup = () => {
|
||||
SerializeMaterialAsync,
|
||||
ImportMaterialAsync,
|
||||
GenerateMaterialLogoAsync,
|
||||
Dispose
|
||||
Dispose,
|
||||
CurrentShowObject
|
||||
};
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user