diff --git a/package.json b/package.json
index 68e0bce..7096a68 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "material-editor",
"private": true,
- "version": "1.0.25",
+ "version": "1.0.26",
"type": "module",
"scripts": {
"dev": "vite",
diff --git a/src/components/MaterialAdjuster.vue b/src/components/MaterialAdjuster.vue
index 17b667c..13a6931 100644
--- a/src/components/MaterialAdjuster.vue
+++ b/src/components/MaterialAdjuster.vue
@@ -70,16 +70,16 @@
@@ -119,6 +119,7 @@ import { FromDeflateBase64, ToDeflatedBase64 } from "../helpers/helper.material"
import { storeToRefs } from "pinia";
import { DownloadFile } from "../helpers/helper.web";
import MathHelper from "../helpers/MathHelper";
+import { ClampToEdgeWrapping, MirroredRepeatWrapping, RepeatWrapping, Wrapping } from "three";
export interface MaterialRequest {
/** 材质名 */
@@ -144,11 +145,11 @@ const emits = defineEmits<{
}>();
const debugMode = ref(false);
-const _textureSrc = ref(props.textureSrcList);
+const textureSrc = computed(() => props.textureSrcList || []);
const debugTextureSrc = ref("");
const textureAdjustment = ref({
- wrapS: 0,
- wrapT: 0,
+ wrapS: MirroredRepeatWrapping,
+ wrapT: MirroredRepeatWrapping,
rotation: 0,
repeatX: 1,
repeatY: 1,
@@ -201,9 +202,9 @@ const materialInfo = reactive({
inputText: '',
});
-watch(() => props.textureSrcList, async (val) => {
- _textureSrc.value = val;
- await scene.ChangeTextureFromUrlAsync(_textureSrc.value[0]);
+watch(textureSrc, async (val) => {
+ if (val.length == 0) return;
+ await scene.ChangeTextureFromUrlAsync(val[0]);
});
watch(() => props.name, () => {
@@ -211,19 +212,19 @@ watch(() => props.name, () => {
});
watch(textureAdjustment, async (val) => {
- UpdateTexture();
+ scene.UpdateTexture();
}, { deep: true });
// 监听纹理更新
watch(() => scene.CurrTexture, (val) => {
textureAdjustment.value = {
- wrapS: val.wrapS,
- wrapT: val.wrapT,
+ wrapS: val.WrapS,
+ wrapT: val.WrapT,
rotation: val.rotation,
- repeatX: val.repeat.x,
- repeatY: val.repeat.y,
- moveX: val.offset.x,
- moveY: val.offset.y
+ repeatX: val.repeatX,
+ repeatY: val.repeatY,
+ moveX: val.moveX,
+ moveY: val.moveY
}
})
@@ -242,20 +243,6 @@ async function UpdateMaterial() {
await scene.UpdateMaterialAsync();
}
-function UpdateTexture() {
- const texture = scene.CurrTexture;
- const val = textureAdjustment.value;
- texture.wrapS = val.wrapS;
- texture.wrapT = val.wrapT;
- texture.anisotropy = 16;
- texture.rotation = val.rotation;
- texture.repeat.set(val.repeatX, val.repeatY);
- texture.offset.set(val.moveX, val.moveY);
- texture.needsUpdate = true;
-
- scene.Update();
-}
-
async function loadData() {
if (!materialInfo.inputText) return;
const json = JSON.parse(materialInfo.inputText);
@@ -286,10 +273,10 @@ async function HandleUpload() {
else {
// 遍历纹理链接列表，更改纹理后将材质序列化，然后还原场景
let idx = 0;
- for (const src of _textureSrc.value) {
+ for (const src of textureSrc.value) {
await scene.ChangeTextureFromUrlAsync(src);
const mat = {
- name: materialInfo.materialName + ++idx,
+ name: textureSrc.value.length > 1 ? materialInfo.materialName + ++idx : materialInfo.materialName,
logo: await scene.GenerateMaterialLogoAsync(),
// jsonString -> Deflate -> BinaryString -> Base64
file: ToDeflatedBase64(await scene.SerializeMaterialAsync())
@@ -298,7 +285,7 @@ async function HandleUpload() {
}
}
- await scene.ChangeTextureFromUrlAsync(_textureSrc.value[0]);
+ await scene.ChangeTextureFromUrlAsync(textureSrc.value[0]);
emits('submit', result);
return result;
} finally {
diff --git a/src/components/MaterialView.vue b/src/components/MaterialView.vue
index 7cee791..735e436 100644
--- a/src/components/MaterialView.vue
+++ b/src/components/MaterialView.vue
@@ -58,7 +58,7 @@ async function HandleUpdateConfig() {
else { editMode.value = false; }
if (config.textureSrc) {
textureSrc.value = Array.from(config.textureSrc);
- await scene.ChangeTextureFromUrlAsync(textureSrc.value[0]);
+ await scene.ChangeTextureFromUrlAsync(textureSrc.value[0]); // 这一行是保证首次Mount组件时纹理能够立刻刷新
}
}
diff --git a/src/stores/sceneStore.ts b/src/stores/sceneStore.ts
index ecc75ac..803ea93 100644
--- a/src/stores/sceneStore.ts
+++ b/src/stores/sceneStore.ts
@@ -3,7 +3,7 @@ import { computed, ref } from "vue";
import { MaterialEditor } from "../common/MaterialEditor";
import { Database, PhysicalMaterialRecord, TextureTableRecord } from "webcad_ue4_api";
import { LoadImageFromUrl } from "../helpers/helper.imageLoader";
-import { Texture } from "three";
+import { ClampToEdgeWrapping, MirroredRepeatWrapping, RepeatWrapping, Texture } from "three";
import { materialRenderer } from "../common/MaterialRenderer";
import { MaterialIn, MaterialOut } from "../common/MaterialSerializer";
import { GetConfig } from "../lib/libOutputConfig";
@@ -13,12 +13,12 @@ const sceneSetup = () => {
let _database: Database | undefined;
const _material = ref(new PhysicalMaterialRecord());
const _currGeometry = ref('球');
- const _currTexture = ref();
+ const _currTexture = ref();
const CurrGeometry = computed({
get: () => _currGeometry.value,
set: (val: string) => ChangeGeometry(val)
})
- const CurrTexture = computed(() => _currTexture.value);
+ const CurrTexture = computed(() => _currTexture.value);
const Geometries = ref([]);
const Material = computed(() => _material.value);
const CurrentShowObject = computed(() => _editor.ShowObject);
@@ -82,10 +82,30 @@ const sceneSetup = () => {
Update();
}
+
+ /** 这是自定义材质更新方法，WebCAD库中的TextureTableRecord.TextureUpdate方法在导出的时候被删除了，所以需要自己实现 */
+ function UpdateTexture() {
+ const record = _currTexture.value;
+ const texture = record['texture'] as Texture;
+ texture.wrapS = record.WrapS;
+ texture.wrapT = record.WrapT;
+ texture.anisotropy = 16;
+ texture.rotation = record.rotation;
+ texture.repeat.set(record.repeatX, record.repeatY);
+ texture.offset.set(record.moveX, record.moveY);
+ texture.needsUpdate = true;
+ Update();
+ }
+
async function ChangeTextureFromUrlAsync(url?: string) {
+ console.warn("Update texture from url:", url);
// 关联贴图
const db = Material.value.Db;
- if (!db) return; // 材质未初始化
+ // 材质未初始化
+ if (!db) {
+ console.warn("Material has not been initialized");
+ return;
+ }
let record = Material.value.map?.Object as TextureTableRecord;
if (!record) {
// record = db.TextureTable.Symbols.values().next().value;
@@ -99,19 +119,21 @@ const sceneSetup = () => {
// }
}
- // record.objectId = new ObjectId(undefined, record);
- _currTexture.value = record['texture'] as Texture;
+ // 设置Store
+ _currTexture.value = record;
+ const texture = record['texture'] as Texture;
if (url) {
record.imageUrl = url;
- _currTexture.value.image = undefined;
+ texture.image = undefined;
}
- // 设置Store
- if (!_currTexture.value.image) {
+ if (!texture.image) {
const img = await LoadImageFromUrl(GetConfig().host + '/' + record.imageUrl);
- _currTexture.value.image = img;
- _currTexture.value.needsUpdate = true;
+ texture.image = img;
}
+
+ texture.needsUpdate = true;
+ UpdateTexture();
await UpdateMaterialAsync();
}
@@ -153,6 +175,7 @@ const sceneSetup = () => {
Material,
Initial,
Update,
+ UpdateTexture,
UpdateMaterialAsync,
ChangeTextureFromUrlAsync,
SerializeMaterialAsync,