/**
 * 标准渲染循环：每帧调用一次 renderer.render(scene, camera)
 * —— 这是 3D 世界的心跳，任何 3D 应用的骨架
 */
function startLoop(scene: THREE.Scene, camera: THREE.PerspectiveCamera, renderer: THREE.WebGLRenderer): () => void {
  let rafId = 0;

  const tick = () => {
    renderer.render(scene, camera);   // 核心一行：每帧画一次
    rafId = requestAnimationFrame(tick);   // 注册下一帧（自循环）
  };

  rafId = requestAnimationFrame(tick);

  // 返回停止函数（成对纪律：启动必给停止，供组件卸载时调用）
  return () => cancelAnimationFrame(rafId);
}

const tick = () => {
  // 1. 更新：改状态（物体位置/旋转、相机、控制器）
  update(delta);                    // delta = 距上一帧的真实秒数（见第三节）

  // 2. 渲染：把新状态画出来
  renderer.render(scene, camera);

  // 3. 排队：注册下一帧
  rafId = requestAnimationFrame(tick);
};

// ❌ 反例：每帧转 0.01 弧度
// 60fps 时每秒转 0.6 弧度；120fps 时每秒转 1.2 弧度——速度随帧率变
cube.rotation.y += 0.01;

import * as THREE from "three";

// 时钟：一次性创建，循环内每帧取 delta
const clock = new THREE.Clock();

const tick = () => {
  // delta = 距上一帧的真实秒数（通常 1/60 ≈ 0.0167）
  const delta = clock.getDelta();

  // ✅ 正确：旋转速度 × 时间 = 与帧率无关的恒定角速度
  // 0.8 = 每秒转 0.8 弧度（约 46°/s）
  cube.rotation.y += 0.8 * delta;

  renderer.render(scene, camera);
  rafId = requestAnimationFrame(tick);
};

// 呼吸灯：elapsed 秒随时间增长，sin 产生往复 → 亮度 0.6~1.0 波动
const t = clock.getElapsedTime();
material.emissiveIntensity = 0.8 + 0.2 * Math.sin(t * 2);

// ① 浏览器工具：Performance 面板记录帧率（最权威，交付验收用）
// ② 简易计数器：每 1 秒数一次 rAF 回调次数
let frames = 0;
setInterval(() => {
  console.log(`FPS: ${frames}`);
  frames = 0;
}, 1000);
// tick 里 frames++
// ③ three/stats：官方 FPS 面板（开发时可视化）

// src/core/three/animated-scene.ts（Day 99 mini-scene 的循环升级版）
import * as THREE from "three";

/**
 * 会自转的 3D 场景工厂
 * 返回值：start 启动循环（返回停止函数）；也可直接改 cube 属性做更多动画
 */
export function createAnimatedScene(canvas: HTMLCanvasElement): {
  scene: THREE.Scene;
  camera: THREE.PerspectiveCamera;
  renderer: THREE.WebGLRenderer;
  /** 启动渲染循环，返回停止函数（成对纪律） */
  start(): () => void;
} {
  // —— 场景搭建（Day 99 原样复用）——
  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0x0d1421);

  const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);
  camera.position.set(3, 2, 5);
  camera.lookAt(0, 0, 0);

  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
  renderer.setSize(canvas.clientWidth, canvas.clientHeight);

  // 立方体：几何 + 材质（Standard 需要光照）
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshStandardMaterial({ color: 0x00c6ff });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  // 光照：环境光兜底 + 方向光给立体感（Day 101 深入）
  scene.add(new THREE.AmbientLight(0xffffff, 0.6));
  scene.add(new THREE.DirectionalLight(0xffffff, 0.8));

  // —— 渲染循环 ——
  const clock = new THREE.Clock();   // 时间源：一帧一个 delta
  let rafId = 0;

  const tick = () => {
    // 更新段：按真实时间旋转（与帧率解耦）
    const delta = clock.getDelta();
    cube.rotation.y += 0.8 * delta;   // 绕 Y 轴自转

    // 渲染段
    renderer.render(scene, camera);

    // 排队段
    rafId = requestAnimationFrame(tick);
  };

  return {
    scene,
    camera,
    renderer,
    start() {
      rafId = requestAnimationFrame(tick);
      return () => cancelAnimationFrame(rafId);   // 停止函数
    },
  };
}

<!-- src/components/ThreeViewport.vue（Day 99 升级版：循环版） -->
<script setup lang="ts">
/**
 * 3D 视口组件：管理渲染循环的生命周期
 *   onMounted    —— 创建场景 + 启动循环
 *   onUnmounted  —— 停止循环 + dispose 渲染器（成对纪律）
 */
import { onMounted, onUnmounted, ref } from "vue";
import { createAnimatedScene } from "../core/three/animated-scene";

const canvas = ref<HTMLCanvasElement>();
let dispose: (() => void) | null = null;   // 清理函数：停止循环 + 释放 GPU

onMounted(() => {
  const anim = createAnimatedScene(canvas.value!);

  // 启动循环，拿到停止函数
  const stopLoop = anim.start();

  // 清理协议（成对纪律：start ↔ stop，mounted ↔ unmounted）
  dispose = () => {
    stopLoop();                 // 1. 停止 rAF 循环（否则卸载后还在画）
    anim.renderer.dispose();    // 2. 释放 GPU 上下文
  };
});

onUnmounted(() => dispose?.());
</script>

<template>
  <canvas ref="canvas" class="three-viewport" />
</template>

<style scoped>
.three-viewport { width: 100%; height: 100%; display: block; }
</style>