如何使用GSAP构建电影感3D滚动体验

Free course recommendation: Master JavaScript animation with GSAP through 34 free video lessons, step-by-step projects, and hands-on demos. Enroll now →

In this tutorial, we’ll explore two examples on how GSAP can act as a cinematic director for 3D environments. By connecting scroll motion to camera paths, lighting, and shader-driven effects, we’ll transform static scenes into fluid, story-like sequences.

在本教程中，我们将探索两个示例，展示 GSAP 如何作为 3D 环境的电影导演。通过将滚动运动连接到相机路径、光照和基于着色器的效果，我们将静态场景转变为流畅的、故事般的序列。

The first demo focuses on shader-based depth — a rotating WebGL cylinder surrounded by reactive particles — while the second turns a 3D scene into a scroll-controlled showcase with moving cameras and animated typography.

第一个演示专注于基于着色器的深度——一个旋转的 WebGL 圆柱体被反应粒子包围——而第二个则将 3D 场景转变为一个滚动控制的展示，配有移动相机和动画排版。

By the end, you’ll learn how to orchestrate 3D composition, easing, and timing to create immersive, film-inspired interactions that respond naturally to user input.

到最后，你将学习如何编排3D合成、缓动和时机，以创建沉浸式、受电影启发的交互，能够自然响应用户输入。

We’ll import and register ScrollTrigger, ScrollSmoother, and CustomEase.

我们将导入并注册 ScrollTrigger、ScrollSmoother 和 CustomEase。

Custom easing curves are essential for controlling how the scroll feels — small variations in acceleration dramatically affect the visual rhythm. You can create and visually edit easing curves in the GSAP docs using the ease visualizer.

自定义缓动曲线对于控制滚动的感觉至关重要——加速度的小变化会显著影响视觉节奏。您可以在GSAP文档中使用 ease visualizer 创建和可视化编辑缓动曲线。

import gsap from "gsap"
import { ScrollTrigger } from "gsap/ScrollTrigger"
import { ScrollSmoother } from "gsap/ScrollSmoother"
import { CustomEase } from "gsap/CustomEase" if (typeof window !== "undefined") { gsap.registerPlugin(ScrollTrigger, ScrollSmoother, CustomEase) CustomEase.create("cinematicSilk", "0.45,0.05,0.55,0.95") CustomEase.create("cinematicSmooth", "0.25,0.1,0.25,1") CustomEase.create("cinematicFlow", "0.33,0,0.2,1") CustomEase.create("cinematicLinear", "0.4,0,0.6,1")
}

ScrollSmoother works with a wrapper...