使用Three.js讓貓跑起來！

// 初始化three函數
export const initThree = (
  sceneRef: RefObject<threeRef>,
  mountRef: RefObject<HTMLDivElement | null>
) => {
  if (!sceneRef.current) return; // 若 sceneRef 不存在則退出

  // 初始化場景、相機與渲染器
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
  camera.position.z = 5; // 設置相機的初始位置

  const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
  renderer.setPixelRatio(window.devicePixelRatio || 1); // 設置像素比以優化畫質

  // 設置軌道控制器
  const controls = new OrbitControls(camera, renderer.domElement);
  Object.assign(controls, {
    enableDamping: true, // 啟用阻尼效果，使操作更平滑
    dampingFactor: 0.05, // 設定阻尼系數
    enableZoom: false, // 禁用縮放功能
    maxPolarAngle: Math.PI / 2, // 限制垂直視角的最大角度
    minPolarAngle: Math.PI / 2, // 限制垂直視角的最小角度
    autoRotate: true, // 啟用自動旋轉
    autoRotateSpeed: 0.5, // 設定自動旋轉速度
  });

  // 將渲染器的 DOM 元素添加到指定的掛載容器中
  mountRef.current?.appendChild(renderer.domElement);

  // 將初始化的對象存入 sceneRef 供外部使用
  Object.assign(sceneRef.current, {
    scene,
    camera,
    renderer,
    controls,
    clock: new THREE.Clock(), // 添加一個時鐘對象，用於動畫計時
  });

  // 設置渲染器的尺寸以適配容器大小
  setRendererSize(sceneRef);
};

// 加載模型
export const loadModel = (sceneRef: RefObject<threeRef>) => {
  const loader = new GLTFLoader();
  const modelPath = sceneRef.current?.initSetting?.modelPath;

  if (!modelPath) return; // 若未設置模型路徑則退出

  loader.load(
    modelPath, // 模型文件路徑
    (gltf) => {
      // 遍歷模型的所有子節點
      gltf.scene.traverse((child) => {
        if (child instanceof THREE.Mesh) {
          const material = child.material;
          child.material = material; // 設置材質
          child.material.emissive = child.material.color; // 添加自發光顏色
          child.material.emissiveMap = child.material.map; // 添加自發光貼圖
          child.material.color.set(sceneRef.current?.initSetting?.meshColor); // 設置網格顏色
          child.material.wireframe = true; // 啟用線框模式
          sceneRef.current?.meshArray.push(child); // 添加到網格陣列
        }
      });

      const model = gltf.scene;
      model.scale.set(0.08, 0.133, 0.08); // 設置模型縮放比例
      model.position.set(0, -2, 0); // 設置模型位置
      sceneRef.current!.model = model; // 儲存模型到 sceneRef
      sceneRef.current!.scene?.add(model); // 添加模型到場景

      // 若模型包含動畫，初始化動畫混合器並播放
      if (gltf.animations.length > 0) {
        const mixer = new THREE.AnimationMixer(model);
        sceneRef.current!.mixer = mixer;
        gltf.animations.forEach((clip) => mixer.clipAction(clip).play());
      }
    },
    undefined,
    (error) => console.error('模型加載錯誤:', error) // 處理加載失敗
  );
};

// 動畫函數
export const animate = (sceneRef: RefObject<threeRef>) => {
  // 若 sceneRef 不存在或動畫迴圈未啟用則退出
  if (!sceneRef.current || !sceneRef.current.animationLoopRunning) return;

  const render = () => {
    if (!sceneRef.current?.animationLoopRunning) return; // 確保動畫迴圈仍在運行

    const { scene, camera, renderer, controls, mixer, clock } =
      sceneRef.current;

    // 更新動畫與控制器
    const delta = clock.getDelta(); // 計算自上一幀的時間差
    mixer?.update(delta); // 更新動畫混合器
    controls?.update(); // 更新軌道控制器

    // 渲染場景
    if (scene && camera) renderer?.render(scene, camera);

    // 遞迴調用下一幀
    requestAnimationFrame(render);
  };

  render(); // 啟動渲染
};

export const clearThree = (
  sceneRef: RefObject<threeRef>,
  mountRef: RefObject<HTMLDivElement | null>
) => {
  if (!sceneRef.current) return;
  const { renderer, controls, scene } = sceneRef.current;

  if (renderer && renderer.domElement) {
    mountRef.current?.removeChild(renderer.domElement); // 移除渲染器
    renderer.dispose(); // 销毁渲染器
  }

  controls?.dispose(); // 销毁 OrbitControls

  scene?.traverse((object) => {
    if (object instanceof THREE.Mesh) {
      object.geometry.dispose();
      if (object.material instanceof THREE.Material) {
        object.material.dispose();
      }
    }
  });

  // 清空引用
  Object.assign(sceneRef.current, {
    scene: null,
    camera: null,
    renderer: null,
    controls: null,
    mixer: null,
    meshArray: [],
    animationLoopRunning: false,
  });
};

useEffect(() => {
  // 初始化場景與模型
  initThree(sceneRef, mountRef);
  loadModel(sceneRef);

  // 啟動動畫迴圈
  sceneRef.current.animationLoopRunning = true;
  animate(sceneRef);

  // 頁面可見性與視窗大小變化處理
  const handleVisibility = () => handleVisibilityChange(sceneRef);
  const handleResize = () => {
    if (sceneRef.current.camera && sceneRef.current.renderer) {
      setRendererSize(sceneRef);
      setModelSize(sceneRef);
    }
  };

  // 註冊事件監聽器
  document.addEventListener('visibilitychange', handleVisibility);
  window.addEventListener('resize', handleResize);

  // 清理函數
  return () => {
    document.removeEventListener('visibilitychange', handleVisibility);
    window.removeEventListener('resize', handleResize);
    clearThree(sceneRef, mountRef); // 清理資源並重置狀態
  };
}, []);

const Example = () => {
  // 初始化設定
  const initSetting = {
    modelPath: '/cat.glb',
    meshColor: theme === 'dark' ? darkMeshColor : lightMeshColor,
    isAnimation: true,
    isWireframe: true,
    modelScale: { x: 0.08, y: 0.133, z: 0.08 },
    modelPosition: { x: 0, y: -2, z: 0 },
  };
  // 建立引用以操作 MyThree
  const catModelRef = useMyThreeRef();

  return <MyThree ref={catModelRef} initSetting={initSetting} />; // 渲染 MyThree 元件
};
export default Example;