米塔3D字体网页端实现

1
// 移动端断点：小于此宽度启用移动端限制
2
export const DOLL_WORD_MOBILE_BREAKPOINT = 720;
3

4
// 并发限制：最多同时活跃的短语数和字形数
5
export interface DollWordLimits {
6
  activePhrases: number;
7
  glyphs: number;
8
}

1
import {
2
  Component,
3
  Suspense,
4
  useCallback,
5
  useEffect,
6
  useRef,
7
  useState,
8
  type ComponentType,
9
  type ReactNode,
10
} from 'react';
11

12
import { useRoomStore } from '@/stores/room-store';
13

14
// 物理渲染层 Props：onReady 回调在字体预热完成后触发
15
interface PhysicsLayerProps {
16
  onReady: () => void;
17
}
18

19
// 模块级缓存：避免重复动态导入
20
let physicsModule: Promise<{ default: ComponentType<PhysicsLayerProps> }> | null = null;
21

22
/** 懒加载 physics 模块，仅在首次调用时执行实际 import */
23
function loadPhysicsModule() {
24
  physicsModule ??= import('./physics');
25
  return physicsModule;
26
}
27

28
/** 错误边界：捕获字体 / WebGL 加载失败，优雅降级，不阻塞页面 */
29
class DollWordErrorBoundary extends Component<
30
  { children: ReactNode; onFailure: () => void },
31
  { failed: boolean }
32
> {
33
  state = { failed: false };
34

35
  static getDerivedStateFromError() {
36
    return { failed: true };
37
  }
38

39
  componentDidCatch(error: unknown) {
40
    console.warn('3D doll words were disabled because their assets failed to load.', error);
41
    // 通知 store 字形计数归零，清除所有引用
42
    useRoomStore.getState().setDollWordCount(0);
43
    this.props.onFailure();
44
  }
45

46
  render() {
47
    return this.state.failed ? null : this.props.children;
48
  }
49
}
50

51
/** 懒加载门面组件：动态导入 PhysicsLayer，加载失败时静默降级 */
52
export function DollWordLayer({ onReady }: { onReady: () => void }) {
53
  const [PhysicsLayer, setPhysicsLayer] = useState<ComponentType<PhysicsLayerProps> | null>(null);
54
  const readyReported = useRef(false);
55
  const reportReady = useCallback(() => {
56
    if (readyReported.current) return;
57
    readyReported.current = true;
58
    onReady();
59
  }, [onReady]);
60

61
  useEffect(() => {
62
    if (PhysicsLayer !== null) return;
63
    let cancelled = false;
64
    void loadPhysicsModule()
65
      .then((module) => {
66
        if (!cancelled) setPhysicsLayer(() => module.default);
67
      })
68
      .catch((error: unknown) => {
69
        console.warn('3D doll words could not be preloaded.', error);
70
        reportReady();
71
      });
72
    return () => {
73
      cancelled = true; // 组件卸载时取消未完成的加载
74
    };
75
  }, [PhysicsLayer, reportReady]);
76

77
  if (PhysicsLayer === null) return null;
78
  return (
79
    <DollWordErrorBoundary onFailure={reportReady}>
80
      <Suspense fallback={null}>
81
        <PhysicsLayer onReady={reportReady} />
82
      </Suspense>
83
    </DollWordErrorBoundary>
84
  );
85
}

1
import { Text } from '@react-three/drei';
2
import { useFrame, useThree } from '@react-three/fiber';
3
import { CuboidCollider, Physics, RigidBody, type RapierRigidBody } from '@react-three/rapier';
4
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
5
import { Euler, MathUtils, Quaternion, Vector3, type Group } from 'three';
6

7
import { profileConfig } from '@/config';
8
import { useReducedMotion } from '@/hooks/use-reduced-motion';