支持了前后移动

EaseCation · Dec 26, 2024 · d76f93f · d76f93f
1 parent ab7252f
commit d76f93f
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 12 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -65,6 +65,7 @@ const App: React.FC = () => {
                 size: 10,
                 depth: 5,
                 y: 8,
+                z: 0,
                 rotY: 0,
                 materials: materialGradientMediumYellow,
                 outlineWidth: 0.4,
@@ -80,6 +81,7 @@ const App: React.FC = () => {
                 size: 5,
                 depth: 3,
                 y: -4,
+                z: 0,
                 rotY: 0,
                 materials: materialGradientLightBlue,
                 outlineWidth: 0.5,
@@ -127,6 +129,12 @@ const App: React.FC = () => {
         const workspaceStr = localStorage.getItem('workspace');
         if (workspaceStr) {
             const workspace: WorkspaceData = JSON.parse(workspaceStr);
+            // 修复一些缺失的数据（兼容旧版数据）
+            workspace.texts.forEach((text) => {
+                if (!text.opts.z) {
+                    text.opts.z = 0;
+                }
+            });
             setLastWorkshop(workspace);
         }
     }, []);
@@ -243,6 +251,7 @@ const App: React.FC = () => {
                                                 size: 5,
                                                 depth: 3,
                                                 y: texts.length * -6,
+                                                z: 0,
                                                 rotY: 0,
                                                 materials: materialGradientLightBlue,
                                                 outlineWidth: 0.5,

diff --git a/src/components/TextSettingsPanel.tsx b/src/components/TextSettingsPanel.tsx
@@ -38,6 +38,15 @@ const TextSettingsPanel: React.FC<TextSettingsPanelProps> = ({
                     onChange={(val) => onTextOptionsChange({ ...textOptions, y: val })}
                 />
             </Form.Item>
+            <Form.Item label={`${gLang('frontBackPosition')} (${textOptions.z.toFixed(1)})`}>
+                <Slider
+                    min={-20}
+                    max={20}
+                    step={0.1}
+                    value={textOptions.z}
+                    onChange={(val) => onTextOptionsChange({ ...textOptions, z: val })}
+                />
+            </Form.Item>
             <Form.Item label={`${gLang('upDownRotate')} (${textOptions.rotY.toFixed(1)})`}>
                 <Slider
                     min={-90}

diff --git a/src/components/ThreeScene.tsx b/src/components/ThreeScene.tsx
@@ -31,14 +31,9 @@ const ThreeScene = forwardRef<ThreeSceneHandle, ThreeSceneProps>(({ texts, fontU
     }));
 
     const { gLang } = useLanguage();
-
-    const text1Ref = useRef<THREE.Group>(null);
-    const text2Ref = useRef<THREE.Group>(null);
 
     const messageApi = useMessage();
 
-
-    const [, setSelectedObjects] = useState<THREE.Object3D[]>([]);
     const [font, setFont] = useState<Font | null>(null);
 
     useEffect(() => {
@@ -99,12 +94,6 @@ const ThreeScene = forwardRef<ThreeSceneHandle, ThreeSceneProps>(({ texts, fontU
         scene.background = null;
     }, [scene]);
 
-    useEffect(() => {
-        if (text1Ref.current && text2Ref.current) {
-            setSelectedObjects([text1Ref.current, text2Ref.current]);
-        }
-    }, [text1Ref, text2Ref]);
-
     return (
         <>
             {/* 添加光源 */}
@@ -126,7 +115,7 @@ const ThreeScene = forwardRef<ThreeSceneHandle, ThreeSceneProps>(({ texts, fontU
                                 opts={text.opts}
                                 globalTextureYOffset={globalTextureYOffset}
                                 font={font}
-                                position={[0, text.opts.y, 0]}
+                                position={[0, text.opts.y, text.opts.z]}
                                 rotation={[text.opts.rotY * (Math.PI / 180), 0, 0]}
                             />
                         ))}

diff --git a/src/language.tsx b/src/language.tsx
@@ -57,6 +57,7 @@ export const languageConfig: Readonly<LanguageConfig> = {
         fontSize: "字体大小",
         upDownRotate: "上下旋转",
         upDownPosition: "上下位置",
+        frontBackPosition: "前后位置",
         content: "文本内容",
         texture: "纹理",
         fontSuccess: "字体加载完成!",
@@ -123,6 +124,7 @@ export const languageConfig: Readonly<LanguageConfig> = {
         fontSize: "Font Size",
         upDownRotate: "Up Down Rotate",
         upDownPosition: "Up Down Position",
+        frontBackPosition: "Front Back Position",
         content: "Content",
         texture: "Texture",
         fontSuccess: "Font loaded successfully!",
@@ -189,6 +191,7 @@ export const languageConfig: Readonly<LanguageConfig> = {
         fontSize: "フォントサイズ",
         upDownRotate: "上下回転",
         upDownPosition: "上下位置",
+        frontBackPosition: "前後位置",
         content: "テキスト",
         texture: "テクスチャ",
         fontSuccess: "フォントが読み込まれました！",

diff --git a/src/types/text.d.ts b/src/types/text.d.ts
@@ -14,6 +14,7 @@ export interface TextOptions {
     size: number;
     depth: number;
     y: number;
+    z: number;
     rotY: number
     materials: TextMaterials;
     outlineWidth: number;