three .animations

### Three.js 动画实现示例

#### 使用 GSAP 实现复杂动画效果

为了创建复杂的动画效果，可以利用 GSAP 这一强大工具来操作 Three.js 中的对象属性。下面展示了一个通过 GSAP 对立方体对象 `cube` 的旋转属性进行动画处理的例子[^1]。

import * as THREE from 'three';
import { gsap } from 'gsap';

// 初始化场景、相机和渲染器...
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建几何体和材质并组合成网格模型
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

// 利用 GSAP 设置动画
gsap.to(cube.rotation, {
    duration: 2,
    x: Math.PI * 2,
    repeat: -1,
    yoyo: true
});

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

此代码片段展示了如何导入必要的库，并设置基本的 Three.js 场景结构之后，使用 GSAP 来定义一个持续时间两秒、无限循环且来回播放 (`yoyo`) 的旋转动画给指定物体（本例中的立方体）。这不仅限于旋转，还可以应用于其他任何可变参数如位置、缩放等。

#### Vue + Three.js 结合开发实例

对于希望在基于 Vue 的前端应用中集成 Three.js 并制作动画的情况，则可以通过如下方式构建项目框架[^2]：

<template>
  <div id="app">
    <!-- 容纳Three.js 渲染内容 -->
    <canvas ref="renderCanvas"></canvas>
  </div>
</template>

<script>
import * as THREE from 'three';

export default {
  name: "App",
  mounted() {
    const canvasElm = this.$refs['renderCanvas'];
    
    // 构建 Three.js 环境...

    function initScene() {
      let scene = new THREE.Scene();
      
      // ...其余初始化逻辑
      
      return scene;
    }

    // 开始绘制帧函数
    function renderFrame() {
      requestAnimationFrame(renderFrame);
      renderer.render(scene, camera);
    }
    
    // 执行初始化工作
    var scene = initScene();
    renderFrame();
  },
};
</script>

这段模板化代码提供了一种将 Three.js 整合到 Vue 组件内的基础模式，其中包含了挂载阶段启动 Three.js 环境以及每帧更新画面的核心流程。