Three.js + React 实战系列 - 项目展示区开发详解 Projects 组件（3D 模型 + 动效 + 状态切换）✨

最新推荐文章于 2025-05-06 21:11:43 发布

sunbyte

最新推荐文章于 2025-05-06 21:11:43 发布

阅读量954

点赞数 23

分类专栏： Three.js奇幻之旅：从零打造3D世界文章标签： javascript react.js 3d

本文链接：https://blog.csdn.net/qq_44808710/article/details/147712117

版权

Three.js奇幻之旅：从零打造3D世界专栏收录该内容

9 篇文章

订阅专栏

对个人主页设计和实现感兴趣的朋友可以订阅我的专栏哦！！谢谢大家！！！

在这一篇博客中，我们将搭建项目主页中极具互动性的 Projects 区域。

该组件承担着展示个人项目展示的功能，融合 GSAP 动画、@react-three/fiber 3D 展示与交互式切换等高级特性，用户体验上极具冲击力。

React + ThreeJS 个人主页小项目：🎥 05 · 项目展示区开发详解 Projects 组件（3D 模型 + 动效 + 状态切换）

✨ 组件亮点概览

结合 GSAP 实现文字动画过渡效果；
通过 <Canvas> 实现 3D 电脑模型展示；
支持左右翻页浏览多个项目；
响应式设计与美观的卡片式信息布局。

## 📁 项目结构建议

组件路径：

src/
├— components/
│   └— DemoComputer.jsx
├— sections/
│   └— Projects.jsx
└— constants/
    ├— index.js

🔄 状态切换逻辑

我们定义了 selectedProjectIndex 来记录当前浏览的项目，通过 handleNavigation 来控制前后切换逻辑，形成一个循环浏览：

const handleNavigation = (direction) => {
  setSelectedProjectIndex((prevIndex) => {
    if (direction === 'previous') {
      return prevIndex === 0 ? projectCount - 1 : prevIndex - 1;
    } else {
      return prevIndex === projectCount - 1 ? 0 : prevIndex + 1;
    }
  });
};

🌟 动画效果（GSAP）

通过 useGSAP，我们对每次切换项目时的 .animatedText 类名文字应用淡入动画，增强用户体验：

useGSAP(() => {
  gsap.fromTo('.animatedText', { opacity: 0 }, {
    opacity: 1,
    duration: 1,
    stagger: 0.2,
    ease: 'power2.inOut'
  });
}, [selectedProjectIndex]);

fromTo 方法：初始状态将文字透明度设为 0，然后在 1 秒内逐个淡入（通过 stagger 实现），动画曲线为 power2.inOut，使文字的出现显得柔和流畅，极大提升了用户在浏览项目时的沉浸感和专业感。

🖼️ 左侧：项目信息面板

包括：项目封面图、logo、标题描述、标签、跳转链接，以及左右切换按钮。

<img src={currentProject.spotlight} alt="spotlight" className="..." />
<p className="text-white text-2xl font-semibold animatedText">{currentProject.title}</p>

所有数据来源于 myProjects 常量数组，并支持动态渲染每个项目对应的内容。

🖥️ 右侧：3D 电脑展示区域

采用 @react-three/fiber 和 <Canvas> 实现沉浸式项目封面展示。

<Canvas>
  <ambientLight intensity={Math.PI} />
  <directionalLight position={[10, 10, 5]} />
  <Center>
    <Suspense fallback={<CanvasLoader />}>
      <group scale={2} position={[0, -3, 0]} rotation={[0, -0.1, 0]}>
        <DemoComputer texture={currentProject.texture} />
      </group>
    </Suspense>
  </Center>
  <OrbitControls maxPolarAngle={Math.PI / 2} enableZoom={false} />
</Canvas>