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

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

在这一篇博客中,我们将搭建项目主页中极具互动性的 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 来控制前后切换逻辑,形成一个循环浏览:

js 复制代码
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 类名文字应用淡入动画,增强用户体验:

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

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


🖼️ 左侧:项目信息面板

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

js 复制代码
<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> 实现沉浸式项目封面展示。

html 复制代码
<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>

其中 DemoComputer 是一个自定义 3D 模型组件,配合不同 texture 显示不同项目封面。


📌 总结

Projects.jsx 组件是整个主页中前后端交互最强、技术栈最丰富的板块之一,建议优先理清以下要点:

  • 熟练使用 state 管理当前展示内容;
  • 理解如何配合 GSAP 动画提升 UX;
  • 熟悉 Fiber Canvas 与 Drei 工具的用法;
  • 数据抽象与复用能力的提升。

🔠 下一篇预告:客户评价区域

我们将在下一节中:

  • 🌟 构建客户评价区域(Client)
  • ✨ 使用 gsap 为内容添加滑入动效
  • ⛳️ 信息条目数据化驱动,方便扩展

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

我们下一节见!👋

相关推荐
Amy.Wang32 分钟前
前端如何实现电子签名
前端·javascript·html5
海天胜景34 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼35 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
百锦再39 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55543 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
FogLetter1 小时前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
拾光拾趣录1 小时前
JavaScript 加载对浏览器渲染的影响
前端·javascript·浏览器
然我1 小时前
React 开发通关指南:用 HTML 的思维写 JS🚀🚀
前端·react.js·html
浪裡遊3 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
哈市雪花3 小时前
相机:Camera原理讲解(使用OpenGL+QT开发三维CAD)
qt·3d·交互·相机·图形学·opengl·视角