此元技能提供了在 Web 应用程序中组合多个 3D 和动画库的架构模式、最佳实践和集成策略。它将 Threejs-webgl、gsap-scrolltrigger、react- Three-Fiber、Motion-framer 和 React-Spring-Physics 技能中的知识综合到有凝聚力的模式中，以构建复杂、高性能的 3D Web 体验。

掌握 Web 和实时引擎的 PBR（基于物理的渲染）纹理创建和导出工作流程。该技能涵盖了 Substance 3D Painter 工作流程，从材质创建到 Web 优化的纹理导出，以及用于批处理的 Python 自动化以及与 WebGL/WebGPU 引擎的集成。

Spline 是一个基于浏览器的 3D 设计和动画平台，使创作者能够构建交互式 3D 体验，而无需代码或专业软件知识。它提供了一个协作可视化编辑器，用于跨多个平台设计、制作动画和导出 3D 场景。

该技能为创建有效技能提供了指导。

此技能涵盖 AOS（滚动动画），这是一个用于滚动触发动画的轻量级 CSS 驱动库。 AOS 擅长在元素进入视口时激活简单的淡入淡出、滑动和缩放效果。

Rive 是一个基于状态机的动画平台，使设计人员能够创建具有复杂逻辑和运行时交互性的交互式矢量动画。与纯时间线动画工具（如 Lottie）不同，Rive 支持状态机、输入处理以及应用程序代码和动画之间的双向数据绑定。

轻量级 WebGL/WebGPU 游戏引擎，具有实体组件架构、可视化编辑器集成和注重性能的设计。

快速、轻量级 2D 渲染引擎，用于使用 WebGL/WebGPU 创建交互式图形、粒子效果和基于画布的应用程序。

Motion（以前称为 Framer Motion）是一个适用于 React 和 JavaScript 的生产就绪动画库，可以使用最少的代码实现声明性、高性能动画。它提供了用动画超能力包装 HTML 元素的运动组件，支持手势识别（悬停、点击、拖动、聚焦），并包括布局动画、退出动画和弹簧物理等高级功能。

2024-2025 年的现代网页设计强调性能、可访问性和有意义的交互。该技能提供有关当前设计趋势、实施模式和最佳实践的全面指导，以创建引人入胜、可访问且高性能的 Web 体验。

使用 Locomotive Scroll 实现平滑滚动、视差效果和滚动驱动动画的综合指南。

该技能结合了三个强大的装饰 3D 元素和微交互库：

GSAP（GreenSock 动画平台）是业界领先的 JavaScript 动画库，用于创建高性能、高品质的动画。 ScrollTrigger 是 GSAP 强大的滚动驱动动画插件。它们共同实现了从简单的 UI 转换到复杂的基于滚动的故事讲述体验的一切。

Blender Web Pipeline 技能提供了将 3D 模型和动画从 Blender 导出为 Web 优化格式（主要是 glTF 2.0）的工作流程。它涵盖了用于批处理的 Python 脚本、Web 性能的优化技术以及与 Three.js 和 Babylon.js 等 Web 3D 库的集成。

现代页面过渡库，用于在网站页面之间创建流畅、平滑的过渡。 Barba.js 通过劫持导航和管理转换而无需重新加载整个页面，使多页面网站感觉像单页面应用程序 (SPA)。

基本设置

轻量级 JavaScript 动画库，具有强大的时间线和网页动画交错功能。

这项技能提供了预构建动画 React 组件库的专业知识，特别是 Magic UI 和 React Bits。这些库提供可立即投入生产的动画组件，可显着加速现代交互式 Web 应用程序的开发。

A-Frame 使用实体组件系统架构，其中：

录制会创建一个新的上下文，但会保留会话中的 cookie/存储。如果未提供 URL，它将自动返回到您当前的页面。为了获得流畅的演示，请先探索，然后开始录制。