Vue.js WebGL 中的动画：让你的 3D 物体动起来

npm install three
npm install gsap

步骤 2：设置场景和摄像机

import * as THREE from "three";
import { PerspectiveCamera } from "three";

const scene = new THREE.Scene();
const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 2;

步骤 3：创建 3D 对象

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

步骤 4：使用 GSAP 动画化

import { TimelineLite, TweenMax } from "gsap";

const timeline = new TimelineLite();
timeline.add(TweenMax.to(cube.rotation, 1, { x: Math.PI * 2, ease: Power0.easeNone }));

创建平移动画

步骤 1：创建 tween

const tween = TweenMax.to(cube.position, 1, { x: 1, ease: Power0.easeNone });

步骤 2：启动动画

tween.play();

管理复杂的动画

步骤 1：使用 TimelineLite

const timeline = new TimelineLite();
timeline.add(TweenMax.to(cube.rotation, 1, { x: Math.PI * 2, ease: Power0.easeNone }));
timeline.add(TweenMax.to(cube.position, 1, { x: 1, ease: Power0.easeNone }), 1);

步骤 2：使用 CustomEase

import { CustomEase } from "gsap";

const customEase = CustomEase.create("custom", "M0,0 C0.297,0.423 0.474,0.811 0.5,1.000");

const tween = TweenMax.to(cube.position, 1, { x: 1, ease: customEase });

最佳实践

• 使用 requestAnimationFrame 更新场景
• 保持你的代码简洁且可读
• 利用 GSAP 的强大的 api
• 考虑性能优化