fix: 1

src/layout/show/index.vue

@@ -17,7 +17,7 @@
       </router-view>
       <GlobalSearch />
     </div>
-    <ViewSetting class="show-setting" />
+    <ViewSetting class="show-setting-layout" />
   </template>
 </template>
 
@@ -107,7 +107,7 @@ watchEffect((onCleanup) => {
 </style>
 
 <style lang="scss" scoped>
-.show-setting {
+.show-setting-layout {
   position: absolute;
   bottom: 20px;
   z-index: 99;

src/sdk/association/animation.ts

@@ -18,12 +18,13 @@ import { computed, nextTick, reactive, ref, toRaw, watch, watchEffect } from "vu
 import { ams } from "@/store/animation";
 import { mergeFuns, uuid } from "@/components/drawing/hook";
 import { getPathNode } from "./path";
-import { debounce, diffArrayChange, mount } from "@/utils";
+import { debounce, diffArrayChange, mount, round } from "@/utils";
 import { Pos } from "@/utils/event";
 import Subtitle from "@/components/subtitle/index.vue";
 import { Size } from "@/components/drawing/dec";
 import router, { RoutesName } from "@/router";
 import { paths } from "@/store";
+import { Color } from "three";
 
 export let animationGroup: AnimationGroup;
 export const getAMKey = (am: AnimationModel) => am.key || am.id;
@@ -328,7 +329,14 @@ export const addSubtitle = (data: AnimationModelSubtitle) => {
               height: layer.offsetHeight,
             };
           }),
-          watchEffect(() => (layer.style.background = data.background)),
+          watchEffect(() => {
+            const theme = new Color();
+            theme.setHex(parseInt(data.background.substring(1), 16))
+            const rgb = {r: 0, g: 0, b: 0}
+            theme.getRGB(rgb)
+
+            layer.style.backgroundColor = `rgba(${round(rgb.r * 255, 2)},${round(rgb.g* 255, 2)},${round(rgb.b* 255, 2)},0.5)`
+          }),
           watchEffect(() => {
             layer.style.visibility =
               pixel.value && show.value ? "visible" : "hidden";
@@ -501,8 +509,9 @@ export const associationAnimation = (sdk: SDK, el: HTMLDivElement) => {
   let cleanupMap: Record<string, () => void> = {};
   watch(
     () => {
+      // !am.frames.length && 
       const gAms = ams.value.filter(
-        (am) => !am.frames.length && amMap[getAMKey(am)]?.am
+        (am) => amMap[getAMKey(am)]?.am
       );
       return gAms;
     },
@@ -511,20 +520,32 @@ export const associationAnimation = (sdk: SDK, el: HTMLDivElement) => {
       for (const am of added) {
         const am3d = amMap[getAMKey(am)];
         if (!am3d || !am3d.am) continue;
-        const frame = am3d.am!.addFrame({
-          id: uuid(),
-          mat: am.mat || am3d.am.getModelPose(),
-          name: "global-frame",
-          time: 0,
-        });
-        am3d.globalFrame = frame;
+        // const frame = am3d.am!.addFrame({
+        //   id: uuid(),
+        //   mat: am.mat || am3d.am.getModelPose(),
+        //   name: "global-frame",
+        //   time: 0,
+        // });
+        // am3d.globalFrame = frame;
+        const mat = am.mat || am3d.am.getModelPose()
+        am3d.am.changePosition(mat.position!)
+        am3d.am.changeRotation(mat.rotation!)
+        am3d.am.changeScale(mat.scale!)
+
         cleanupMap[getAMKey(am)] = mergeFuns(
           watchEffect(() => {
-            am.mat && frame.setMat(am.mat);
+            // am.mat && frame.setMat(am.mat);
+            if  (am.mat && am3d.am) {
+              console.log(am.mat)
+              am3d.am.changePosition(mat.position!)
+              am3d.am.changeRotation(mat.rotation!)
+              am3d.am.changeScale(mat.scale!)
+            }
             console.log("set-global-frame", am.mat);
           }),
           () => {
-            frame.destroy();
+            // frame.destroy();
+            am3d.am?.addFrame
             am3d.globalFrame = undefined;
             delete cleanupMap[getAMKey(am)];
           }

src/sdk/sdk.ts

@@ -388,6 +388,9 @@ export type AnimationGroup = {
 
 export type AnimationModel3D = {
   getSupportActions: () => {name: string, duration: number}[]
+  changePosition: (pos: Pos) => void
+  changeScale: (num: number) => void
+  changeRotation: (pos: SceneLocalPos) => void
 
   // 销毁动画模型
   destroy: () => void;

src/style.scss

@@ -171,7 +171,7 @@ input::-ms-clear,input::-ms-reveal {
   top: 0;
   text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
   pointer-events: none;
-  max-width: 280px;
+  max-width: 240px;
   border-radius: 4px;
   font-size: 14px;
   padding: 10px 20px;