第13章 Three.js 与 GSAP

// Three.js 原生方式：手动写缓动
let startTime = null;
function animate(timestamp) {
  if (!startTime) startTime = timestamp;
  const elapsed = timestamp - startTime;
  const t = Math.min(elapsed / 2000, 1);           // 归一化时间
  const eased = 1 - Math.pow(1 - t, 3);            // easeOutCubic
  mesh.position.x = 0 + (5 - 0) * eased;           // 手动插值
  if (t < 1) requestAnimationFrame(animate);
}

// GSAP 方式：一行解决
gsap.to(mesh.position, { x: 5, duration: 2, ease: 'power3.out' });

// Three.js 原生方式：状态机地狱
if (phase === 0) { /* 入场动画 */ }
else if (phase === 1 && elapsed > 2000) { /* 旋转 */ }
else if (phase === 2 && elapsed > 4000) { /* 缩放 */ }

// GSAP Timeline：声明式编排
const tl = gsap.timeline();
tl.to(mesh.position, { x: 5, duration: 1 })    // 入场
  .to(mesh.rotation, { y: Math.PI * 2, duration: 2 })  // 旋转
  .to(mesh.scale, { x: 1.5, y: 1.5, z: 1.5, duration: 1 });  // 缩放

const mesh = new THREE.Mesh(geometry, material);

// 水平移动
gsap.to(mesh.position, { x: 5, duration: 2, ease: 'power2.inOut' });

// 三维移动
gsap.to(mesh.position, {
  x: 3, y: 2, z: -5,
  duration: 3,
  ease: 'power2.out'
});

// 路径动画（分段Timeline）
const pathTL = gsap.timeline();
pathTL.to(mesh.position, { x: 3, duration: 1 })
      .to(mesh.position, { y: 2, duration: 1 })
      .to(mesh.position, { z: -5, duration: 1 });

// 绕Y轴旋转一周
gsap.to(mesh.rotation, {
  y: Math.PI * 2,
  duration: 4,
  ease: 'none',         // 匀速旋转
  repeat: -1            // 无限循环
});

// 弹性旋转到目标角度
gsap.to(mesh.rotation, {
  x: Math.PI / 4,
  y: Math.PI / 2,
  duration: 1.5,
  ease: 'elastic.out(1, 0.5)'
});

// 弹入
gsap.from(mesh.scale, {
  x: 0, y: 0, z: 0,
  duration: 1,
  ease: 'back.out(2)'
});

// 脉动循环
gsap.to(mesh.scale, {
  x: 1.2, y: 1.2, z: 1.2,
  duration: 0.8,
  yoyo: true,
  repeat: -1,
  ease: 'sine.inOut'
});

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);

// 光源强度变化（模拟日出效果）
gsap.to(light, {
  intensity: 3,
  duration: 2,
  ease: 'power2.inOut'
});

// 光源位置移动（改变阴影方向）
gsap.to(light.position, {
  x: -5,
  y: 10,
  z: 2,
  duration: 4,
  ease: 'sine.inOut',
  yoyo: true,
  repeat: -1
});

// 光源颜色过渡
gsap.to(light.color, {
  r: 1,           // 红色分量 0→1
  g: 0.6,         // 绿色分量
  b: 0.2,         // 蓝色分量
  duration: 3,
  ease: 'power2.out'
});

const camera = new THREE.PerspectiveCamera(75, w/h, 0.1, 1000);
camera.position.set(0, 2, 8);

// 推近
gsap.to(camera.position, {
  z: 3,
  duration: 2,
  ease: 'power3.inOut'
});

// 环绕（相机始终看向原点）
gsap.to(camera.position, {
  x: 8,
  z: 0,
  duration: 3,
  ease: 'sine.inOut',
  onUpdate: () => camera.lookAt(0, 0, 0)    // 保持看向中心
});

const flyTL = gsap.timeline({ defaults: { duration: 2, ease: 'power2.inOut' } });

// 阶段1：从远到近
flyTL.to(camera.position, { z: 3, duration: 1.5 }, 'enter')
    // 阶段2：环绕到侧面，同时lookAt
    .to(camera.position, { x: 6, z: 0, duration: 2 }, 'orbit')
    // 阶段3：上升到俯视
    .to(camera.position, { y: 8, x: 0, z: 0.1, duration: 2 }, 'top')
    // 阶段4：拉远退场
    .to(camera.position, { z: 12, duration: 1.5 }, 'exit');

// 创建场景元素
const cube = new THREE.Mesh(geometry, material);
const sphere = new THREE.Mesh(sphereGeo, sphereMat);
const torus = new THREE.Mesh(torusGeo, torusMat);
const light = new THREE.DirectionalLight(0xffffff, 0.5);
const pointLight = new THREE.PointLight(0xff6b6b, 0, 10);

const sceneTL = gsap.timeline({
  defaults: { ease: 'power3.out' },
  repeat: -1,
  repeatDelay: 2
});

// === 阶段1：立方体入场（弹入 + 旋转）===
sceneTL.from(cube.scale, { x: 0, y: 0, z: 0, duration: 1, ease: 'back.out(2)' }, 'enter')
       .from(cube.rotation, { y: Math.PI, duration: 1, ease: 'power2.out' }, 'enter');

// === 阶段2：球体+圆环入场（跟随在立方体之后）===
sceneTL.from(sphere.scale, { x: 0, y: 0, z: 0, duration: 0.8, ease: 'back.out(2)' }, '-=0.3')
       .from(torus.scale, { x: 0, y: 0, z: 0, duration: 0.8, ease: 'back.out(2)' }, '-=0.5');

// === 阶段3：同步旋转 ===
sceneTL.to(cube.rotation, { y: cube.rotation.y + Math.PI * 2, duration: 3, ease: 'none' }, 'spin')
       .to(sphere.rotation, { y: sphere.rotation.y + Math.PI * 3, duration: 3, ease: 'none' }, 'spin')
       .to(torus.rotation, { x: torus.rotation.x + Math.PI * 2, duration: 3, ease: 'none' }, 'spin');

// === 阶段4：灯光渐亮 ===
sceneTL.to(light, { intensity: 1.5, duration: 1.5 }, 'spin+=0.5')
       .to(pointLight, { intensity: 2, duration: 1 }, 'spin+=1');

// === 阶段5：退场 ===
sceneTL.to([cube.scale, sphere.scale, torus.scale], {
  x: 0, y: 0, z: 0,
  duration: 0.6,
  stagger: 0.1,
  ease: 'power2.in'
}, 'exit');

const scroll3D = gsap.timeline({
  scrollTrigger: {
    trigger: '.threejs-section',
    start: 'top top',
    end: 'bottom bottom',
    scrub: 1,
    pin: true,
    markers: false
  }
});

// 滚动 = 相机推近
scroll3D.to(camera.position, { z: 2, duration: 1 }, 0);

// 滚动 = 立方体旋转
scroll3D.to(cube.rotation, {
  x: Math.PI * 2,
  y: Math.PI * 4,
  duration: 1
}, 0);

// 滚动 = 光源强度变化
scroll3D.to(light, { intensity: 2, duration: 0.5 }, 0.3);

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>从补间到叙事：GSAP 动画实战 - 第13章：Three.js 与 GSAP</title>
<style>
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC',
               'Microsoft YaHei', sans-serif;
  background: #000;
  color: #fff;
  overflow-x: hidden;
}

/* === Hero 3D区域 === */
.hero-3d {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.hero-3d canvas {
  display: block;
}

.hero-overlay {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
  pointer-events: none;
}

.hero-overlay h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  text-shadow: 0 4px 30px rgba(0,0,0,0.5);
}

.hero-overlay p {
  font-size: 1rem;
  color: rgba(255,255,255,0.7);
  margin-top: 0.5rem;
}

/* === 滚动驱动区域 === */
.scroll-3d {
  position: relative;
  width: 100%;
  height: 200vh;          /* 需要足够的滚动距离 */
}

.scroll-3d .sticky-view {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.scroll-indicator {
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.scroll-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  cursor: pointer;
  transition: background 0.3s;
}

.scroll-dot.active {
  background: #6C63FF;
}

/* === 控制面板 === */
.controls-panel {
  position: absolute;
  top: 2rem;
  right: 2rem;
  z-index: 2;
  display: flex;
  gap: 0.5rem;
}

.ctrl-btn {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all 0.3s;
}

.ctrl-btn:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.4);
}

.ctrl-btn.active {
  background: #6C63FF;
  border-color: #6C63FF;
}

/* === 信息提示 === */
.tooltip {
  position: absolute;
  top: 2rem;
  left: 2rem;
  z-index: 2;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
}
</style>
</head>
<body>

<!-- ===== 3D Hero ===== -->
<section class="hero-3d" id="hero3D">
  <div class="hero-overlay">
    <h1>3D 遇见 GSAP</h1>
    <p>滚动鼠标探索三维世界</p>
  </div>
  <div class="controls-panel">
    <button class="ctrl-btn active" data-mode="cube">立方体</button>
    <button class="ctrl-btn" data-mode="sphere">球体</button>
    <button class="ctrl-btn" data-mode="torus">圆环</button>
  </div>
  <div class="tooltip">拖拽鼠标旋转视角</div>
</section>

<!-- ===== 滚动驱动区域 ===== -->
<section class="scroll-3d">
  <div class="sticky-view" id="sticky3D"></div>
  <div class="scroll-indicator" id="scrollDots">
    <div class="scroll-dot active"></div>
    <div class="scroll-dot"></div>
    <div class="scroll-dot"></div>
    <div class="scroll-dot"></div>
  </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
  }
}
</script>

<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// ============================================
// GSAP 插件注册
// ============================================
gsap.registerPlugin(ScrollTrigger);

// ============================================
// 工具函数：创建渲染器
// ============================================
function createRenderer(container, alpha = false) {
  const renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: alpha
  });
  renderer.setSize(container.clientWidth, container.clientHeight);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  container.appendChild(renderer.domElement);
  return renderer;
}

// ============================================
// 场景1：Hero 3D 场景（带OrbitControls）
// ============================================
const heroContainer = document.getElementById('hero3D');
const heroRenderer = createRenderer(heroContainer, true);
const heroScene = new THREE.Scene();

// 相机
const heroCamera = new THREE.PerspectiveCamera(
  60,
  heroContainer.clientWidth / heroContainer.clientHeight,
  0.1,
  100
);
heroCamera.position.set(0, 1.5, 6);
heroCamera.lookAt(0, 0, 0);

const heroControls = new OrbitControls(heroCamera, heroRenderer.domElement);
heroControls.enableDamping = true;
heroControls.dampingFactor = 0.08;
heroControls.minDistance = 3;
heroControls.maxDistance = 12;
heroControls.maxPolarAngle = Math.PI / 1.8;   // 限制俯视角

// 光照
const heroAmbient = new THREE.AmbientLight(0x404080, 0.5);
heroScene.add(heroAmbient);

const heroDirLight = new THREE.DirectionalLight(0xffffff, 2);
heroDirLight.position.set(5, 8, 5);
heroDirLight.castShadow = true;
heroDirLight.shadow.mapSize.set(1024, 1024);
heroScene.add(heroDirLight);

const heroPointLight = new THREE.PointLight(0x6C63FF, 15, 10);
heroPointLight.position.set(2, 2, 2);
heroScene.add(heroPointLight);

// 地面
const groundGeo = new THREE.PlaneGeometry(20, 20);
const groundMat = new THREE.MeshStandardMaterial({
  color: 0x111122,
  roughness: 0.8,
  metalness: 0.2
});
const ground = new THREE.Mesh(groundGeo, groundMat);
ground.rotation.x = -Math.PI / 2;
ground.position.y = -2.5;
ground.receiveShadow = true;
heroScene.add(ground);

// 网格粒子背景
const particlesGeo = new THREE.BufferGeometry();
const particlesCount = 500;
const posArray = new Float32Array(particlesCount * 3);
for (let i = 0; i < particlesCount * 3; i++) {
  posArray[i] = (Math.random() - 0.5) * 15;
}
particlesGeo.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
const particlesMat = new THREE.PointsMaterial({
  size: 0.02,
  color: 0x6C63FF,
  transparent: true,
  opacity: 0.6,
  blending: THREE.AdditiveBlending
});
const particles = new THREE.Points(particlesGeo, particlesMat);
heroScene.add(particles);

// 主体对象组
const heroGroup = new THREE.Group();
heroScene.add(heroGroup);

// 创建立方体
const cubeGeo = new THREE.BoxGeometry(1.2, 1.2, 1.2, 8, 8, 8);
const cubeMat = new THREE.MeshStandardMaterial({
  color: 0x6C63FF,
  roughness: 0.2,
  metalness: 0.8,
  emissive: 0x1a1050,
  emissiveIntensity: 0.3
});
const cube = new THREE.Mesh(cubeGeo, cubeMat);
cube.castShadow = true;
cube.receiveShadow = true;
heroGroup.add(cube);

// 创建球体
const sphereGeo = new THREE.SphereGeometry(0.7, 64, 64);
const sphereMat = new THREE.MeshStandardMaterial({
  color: 0xFF6B6B,
  roughness: 0.1,
  metalness: 0.9,
  emissive: 0x500010,
  emissiveIntensity: 0.3
});
const sphere = new THREE.Mesh(sphereGeo, sphereMat);
sphere.position.x = 2;
sphere.castShadow = true;
sphere.receiveShadow = true;
heroGroup.add(sphere);

// 创建圆环
const torusGeo = new THREE.TorusGeometry(0.6, 0.2, 32, 64);
const torusMat = new THREE.MeshStandardMaterial({
  color: 0x4ECDC4,
  roughness: 0.15,
  metalness: 0.85,
  emissive: 0x001a18,
  emissiveIntensity: 0.3
});
const torus = new THREE.Mesh(torusGeo, torusMat);
torus.position.x = -2;
torus.castShadow = true;
torus.receiveShadow = true;
heroGroup.add(torus);

// ============================================
// Hero 入场动画（Timeline编排）
// ============================================
const heroTL = gsap.timeline({ defaults: { ease: 'power3.out' } });

// 元素依次弹入
heroTL.from(cube.scale, {
  x: 0, y: 0, z: 0,
  duration: 1,
  ease: 'elastic.out(1, 0.5)'
});
heroTL.from(sphere.scale, {
  x: 0, y: 0, z: 0,
  duration: 0.8,
  ease: 'elastic.out(1, 0.4)'
}, '-=0.5');
heroTL.from(torus.scale, {
  x: 0, y: 0, z: 0,
  duration: 0.8,
  ease: 'elastic.out(1, 0.4)'
}, '-=0.5');

// 光源渐亮
heroTL.from(heroPointLight, {
  intensity: 0,
  duration: 1.5
}, '-=0.8');
heroTL.from(heroDirLight, {
  intensity: 0,
  duration: 1.5
}, '-=1.2');

// 持续旋转动画（独立于Timeline）
gsap.to(heroGroup.rotation, {
  y: Math.PI * 2,
  duration: 20,
  repeat: -1,
  ease: 'none'
});

// 粒子缓慢飘动
gsap.to(particles.position, {
  y: 2,
  duration: 8,
  repeat: -1,
  yoyo: true,
  ease: 'sine.inOut'
});

// ============================================
// 形状切换交互
// ============================================
const modeButtons = document.querySelectorAll('.ctrl-btn');
modeButtons.forEach(btn => {
  btn.addEventListener('click', () => {
    modeButtons.forEach(b => b.classList.remove('active'));
    btn.classList.add('active');

    const mode = btn.dataset.mode;

    // 切换激活的几何体：改变缩放
    const targetScale = (mesh, target) => {
      gsap.to(mesh.scale, {
        x: target ? 1.3 : 0.7,
        y: target ? 1.3 : 0.7,
        z: target ? 1.3 : 0.7,
        duration: 0.6,
        ease: 'elastic.out(1, 0.5)'
      });
    };

    targetScale(cube, mode === 'cube');
    targetScale(sphere, mode === 'sphere');
    targetScale(torus, mode === 'torus');
  });
});

// ============================================
// Hero 渲染循环
// ============================================
function animateHero() {
  requestAnimationFrame(animateHero);

  heroControls.update();

  // 灯光随鼠标微动
  const time = Date.now() * 0.001;
  heroPointLight.intensity = 15 + Math.sin(time * 2) * 3;

  heroRenderer.render(heroScene, heroCamera);
}
animateHero();

// Hero Resize
window.addEventListener('resize', () => {
  heroCamera.aspect = heroContainer.clientWidth / heroContainer.clientHeight;
  heroCamera.updateProjectionMatrix();
  heroRenderer.setSize(heroContainer.clientWidth, heroContainer.clientHeight);
});

// ============================================
// 场景2：滚动驱动的3D场景
// ============================================
const stickyContainer = document.getElementById('sticky3D');
const scrollRenderer = createRenderer(stickyContainer);
scrollRenderer.domElement.style.position = 'absolute';
scrollRenderer.domElement.style.top = '0';

const scrollScene = new THREE.Scene();
scrollScene.background = new THREE.Color(0x0a0a1a);

// 相机
const scrollSection = document.querySelector('.scroll-3d');
const scrollCamera = new THREE.PerspectiveCamera(
  50,
  stickyContainer.clientWidth / stickyContainer.clientHeight,
  0.1,
  100
);
scrollCamera.position.set(0, 2, 10);
scrollCamera.lookAt(0, 0, 0);

// 光照
const scrollAmbient = new THREE.AmbientLight(0x404080, 0.3);
scrollScene.add(scrollAmbient);
const scrollDirLight = new THREE.DirectionalLight(0xffffff, 1.5);
scrollDirLight.position.set(5, 8, 5);
scrollScene.add(scrollDirLight);
const scrollPointLight = new THREE.PointLight(0xFF6B6B, 10, 15);
scrollPointLight.position.set(-3, 1, 3);
scrollScene.add(scrollPointLight);

// 旋转的环
const ringGroup = new THREE.Group();
scrollScene.add(ringGroup);

// 外环
const outerRing = new THREE.Mesh(
  new THREE.TorusGeometry(2.5, 0.08, 32, 128),
  new THREE.MeshStandardMaterial({
    color: 0x6C63FF,
    roughness: 0.1,
    metalness: 0.9,
    emissive: 0x1a1050,
    emissiveIntensity: 0.5
  })
);
ringGroup.add(outerRing);

// 中环
const midRing = new THREE.Mesh(
  new THREE.TorusGeometry(1.8, 0.06, 32, 100),
  new THREE.MeshStandardMaterial({
    color: 0x4ECDC4,
    roughness: 0.1,
    metalness: 0.9,
    emissive: 0x001a18,
    emissiveIntensity: 0.4
  })
);
midRing.rotation.x = Math.PI / 3;
ringGroup.add(midRing);

// 内环
const innerRing = new THREE.Mesh(
  new THREE.TorusGeometry(1.1, 0.04, 32, 80),
  new THREE.MeshStandardMaterial({
    color: 0xFF6B6B,
    roughness: 0.1,
    metalness: 0.9,
    emissive: 0x500010,
    emissiveIntensity: 0.4
  })
);
innerRing.rotation.x = -Math.PI / 4;
ringGroup.add(innerRing);

// 中心球体
const centerSphere = new THREE.Mesh(
  new THREE.SphereGeometry(0.5, 64, 64),
  new THREE.MeshStandardMaterial({
    color: 0xFFFFFF,
    roughness: 0.05,
    metalness: 0.95,
    emissive: 0x333333,
    emissiveIntensity: 0.3
  })
);
ringGroup.add(centerSphere);

// ============================================
// ScrollTrigger 驱动 3D 动画
// ============================================
const scrollTL = gsap.timeline({
  scrollTrigger: {
    trigger: '.scroll-3d',
    start: 'top top',
    end: 'bottom bottom',
    scrub: 1,
    markers: false
  }
});

// Phase 0-0.25: 相机推近
scrollTL.to(scrollCamera.position, {
  z: 4,
  duration: 0.25
}, 0);

// Phase 0-0.25: 环组加速旋转
scrollTL.to(ringGroup.rotation, {
  y: Math.PI * 2,
  duration: 0.25
}, 0);

// Phase 0.25-0.5: 相机提升
scrollTL.to(scrollCamera.position, {
  y: 6,
  z: 5,
  duration: 0.25
}, 0.25);

// Phase 0.25-0.5: 环倾斜反转
scrollTL.to(ringGroup.rotation, {
  x: -Math.PI / 6,
  duration: 0.25
}, 0.25);

// Phase 0.5-0.75: 光源强度变化
scrollTL.to(scrollPointLight, {
  intensity: 0,
  duration: 0.25
}, 0.5);

scrollTL.to(scrollDirLight, {
  intensity: 3,
  duration: 0.25
}, 0.5);

// Phase 0.5-0.75: 球体放大
scrollTL.to(centerSphere.scale, {
  x: 2, y: 2, z: 2,
  duration: 0.25
}, 0.5);

// Phase 0.75-1.0: 相机拉远，环散开
scrollTL.to(scrollCamera.position, {
  z: 12,
  y: 3,
  duration: 0.25
}, 0.75);

scrollTL.to(outerRing.scale, {
  x: 2, y: 2, z: 2,
  duration: 0.25
}, 0.75);

scrollTL.to(ringGroup.rotation, {
  x: 0,
  y: ringGroup.rotation.y + Math.PI * 2,
  duration: 0.25
}, 0.75);

// 实时更新进度点
const dots = document.querySelectorAll('.scroll-dot');
ScrollTrigger.create({
  trigger: '.scroll-3d',
  start: 'top top',
  end: 'bottom bottom',
  onUpdate: (self) => {
    const activeIndex = Math.min(
      Math.floor(self.progress * dots.length),
      dots.length - 1
    );
    dots.forEach((dot, i) => {
      dot.classList.toggle('active', i === activeIndex);
    });
  }
});

// ============================================
// 滚动场景渲染循环
// ============================================
function animateScroll() {
  requestAnimationFrame(animateScroll);

  // 连续轻轻旋转（与ScrollTrigger不冲突——ScrollTrigger只控制y旋转）
  outerRing.rotation.z += 0.002;
  midRing.rotation.z -= 0.003;
  innerRing.rotation.z += 0.004;

  scrollRenderer.render(scrollScene, scrollCamera);
}
animateScroll();

// 滚动场景 Resize
const scrollResize = () => {
  scrollCamera.aspect = stickyContainer.clientWidth / stickyContainer.clientHeight;
  scrollCamera.updateProjectionMatrix();
  scrollRenderer.setSize(stickyContainer.clientWidth, stickyContainer.clientHeight);
};
window.addEventListener('resize', () => {
  scrollResize();
  ScrollTrigger.refresh();
});
</script>
</body>
</html>

// 这行代码的本质：
gsap.to(mesh.position, { x: 5, duration: 2 });

// 等价于：
// t=0:    mesh.position.x = 0
// t=0.5:  mesh.position.x = 0.9 (power3.out 插值)
// t=1:    mesh.position.x = 2.9
// t=1.5:  mesh.position.x = 4.3
// t=2:    mesh.position.x = 5

// OrbitControls 自动设置 lookAt 位置
// GSAP 动画 camera.position 时，OrbitControls 会"对抗"GSAP

// 解决：在GSAP动画相机的期间，暂停OrbitControls
heroControls.enabled = false;
gsap.to(heroCamera.position, { z: 3, duration: 2, onComplete: () => {
  heroControls.enabled = true;
}});

// ✅ 持续渲染（简单但有GPU开销）
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

// ✅ 按需渲染：GSAP动画期间渲染，静止时停止
let needsRender = true;

function render() {
  if (!needsRender) {
    requestAnimationFrame(render);
    return;
  }
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}
render();

// 动画期间设置标志
const tl = gsap.timeline({
  onUpdate: () => { needsRender = true; },
  onComplete: () => { needsRender = false; }
});

// ❌ 直接动画 BufferGeometry——Three.js不会重绘
gsap.to(mesh.geometry.attributes.position, { /* ... */ });

// ✅ 使用 onUpdate 手动标记
gsap.to({ val: 0 }, {
  val: 1,
  duration: 2,
  onUpdate: function() {
    // 手动修改顶点位置
    const positions = mesh.geometry.attributes.position.array;
    for (let i = 0; i < positions.length; i++) {
      // ...修改顶点
    }
    mesh.geometry.attributes.position.needsUpdate = true;
  }
});

// 统一渲染入口；GSAP 更新值，渲染器读取值。
function render() {
  controls.update();
  renderer.render(scene, camera);
}
gsap.ticker.add(render);
// 卸载：
gsap.ticker.remove(render);