diff --git a/package.json b/package.json
index dc2907c..f63651a 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
"fflate": "^0.8.2",
"flatbush": "^3.3.0",
"js-angusj-clipper": "^1.2.1",
+ "pako": "^2.1.0",
"pinia": "^3.0.2",
"polylabel": "^1.1.0",
"three": "npm:three-cf@^0.122.9",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 798658a..2670194 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,9 @@ importers:
js-angusj-clipper:
specifier: ^1.2.1
version: 1.3.1
+ pako:
+ specifier: ^2.1.0
+ version: 2.1.0
pinia:
specifier: ^3.0.2
version: 3.0.2(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))
@@ -703,6 +706,9 @@ packages:
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
hasBin: true
+ pako@2.1.0:
+ resolution: {integrity: sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==}
+
path-browserify@1.0.1:
resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
@@ -1620,6 +1626,8 @@ snapshots:
nanoid@3.3.11: {}
+ pako@2.1.0: {}
+
path-browserify@1.0.1: {}
path-parse@1.0.7: {}
diff --git a/src/components/MaterialAdjuster.vue b/src/components/MaterialAdjuster.vue
index a6e137d..8be4fe9 100644
--- a/src/components/MaterialAdjuster.vue
+++ b/src/components/MaterialAdjuster.vue
@@ -27,7 +27,7 @@
纹理选择(DEBUG)
-
@@ -112,6 +112,7 @@ import CfFlex from "./CfFlex.vue";
import { DirectoryId } from "../api/Request";
import { IsNullOrWhitespace } from "../helpers/helper.string";
import { DeflateAsync } from "../helpers/helper.compression";
+import { ToDeflatedBase64 } from "../helpers/helper.material";
export interface MaterialRequest {
/** 材质名 */
@@ -136,7 +137,7 @@ const debugMode = ref(false);
const { CurrGeometry, Geometries, Material } = storeToRefs(scene);
const enableTexture = ref(Material.value.useMap);
const _textureSrc = ref(props.textureSrc);
-const textureAdjustment = reactive({
+const textureAdjustment = ref({
wrapS: 0,
wrapT: 0,
rotation: 0,
@@ -158,12 +159,12 @@ const materialInfo = reactive({
});
onMounted(() => {
- scene.ChangeTextureAsync(_textureSrc.value);
+ scene.ChangeTextureFromUrlAsync(_textureSrc.value);
})
watch(() => props.textureSrc, async (val) => {
_textureSrc.value = val;
- await scene.ChangeTextureAsync(_textureSrc.value);
+ await scene.ChangeTextureFromUrlAsync(_textureSrc.value);
});
watch(model, async (val) => {
@@ -178,6 +179,19 @@ watch(textureAdjustment, async (val) => {
UpdateTexture();
});
+// 监听纹理更新
+watch(() => scene.CurrTexture, (val) => {
+ textureAdjustment.value = {
+ 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
+ }
+})
+
async function UpdateMaterial() {
Material.value.matalness = model.metallic;
Material.value.roughness = model.roughness;
@@ -188,7 +202,17 @@ async function UpdateMaterial() {
}
function UpdateTexture() {
- scene.UpdateTexture(textureAdjustment);
+ 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 EnableTexture(enable: boolean) {
@@ -208,7 +232,7 @@ async function HandleUpload() {
name: materialInfo.materialName,
logo: await scene.GenerateMaterialLogoAsync(),
// jsonString -> Deflate -> BinaryString -> Base64
- file: btoa(String.fromCharCode(...await DeflateAsync(await scene.SerializeMaterialAsync())))
+ file: ToDeflatedBase64(await scene.SerializeMaterialAsync())
};
emits('submit', data);
return data;
diff --git a/src/components/MaterialView.vue b/src/components/MaterialView.vue
index 3053c03..f127c61 100644
--- a/src/components/MaterialView.vue
+++ b/src/components/MaterialView.vue
@@ -11,6 +11,7 @@ import { useScene } from '../stores/sceneStore';
import CfFlex from './CfFlex.vue';
import { GetConfig } from '../lib/libOutputConfig';
import { useEvent } from '../stores/eventStore';
+import { FromDeflateBase64 } from '../helpers/helper.material';
const scene = useScene();
const eventbus = useEvent();
@@ -21,10 +22,13 @@ const textureSrc = ref(config.textureSrc);
// 禁用右键菜单
document.addEventListener('contextmenu', (e) => e.preventDefault());
-onMounted(() => {
+onMounted(async () => {
scene.Initial(container.value);
+ await HandleUpdateConfig();
+
eventbus.Subscribe('submit', HandleUpload);
eventbus.Subscribe('update-texture', HandleChangeTexture);
+ eventbus.Subscribe('update-config', HandleUpdateConfig)
});
onBeforeUnmount(() => {
@@ -41,6 +45,15 @@ function HandleChangeTexture() {
textureSrc.value = config.textureSrc;
}
+async function HandleUpdateConfig() {
+ if (config.file && config.file.length > 0) {
+ console.log("base64", config.file);
+ const json = FromDeflateBase64(config.file);
+ await scene.ImportMaterialAsync(json);
+ }
+ textureSrc.value = config.textureSrc;
+}
+