【免费下载链接】Portfolio-WebsiteMy Portfolio Website Showcasing the website 3d interactions or experience and my work.项目地址https://gitcode.com/gh_mirrors/portfoliow/Portfolio-Website点击查看免费下载 想给作品集网站加点哇塞效果吗Portfolio-Website 用 React Three.js 搭出了一个超炫的 3D 交互页面8 个技术 Logo 变成可推动、会漂浮的 3D 球体鼠标一动它们就四散弹开。本文将带你读懂这套基于 Rapier 物理引擎的交互玩法是如何实现的并手把手教你本地运行。一、这个 3D 交互效果到底长什么样滚动到页面的技术栈My Techstack区域时你会发现 30 个球体漂浮在画面中每个球体表面都贴着一个技术 Logo——React、Next.js、Node.js、Express、MongoDB、MySQL、TypeScript、JavaScript。 移动鼠标靠近的球体会被看不见的推子推开松手后它们又缓缓回位像漂浮在太空里一样。实现这个效果的核心技术栈来自 package.jsonReact 18页面框架Three.js react-three/fiber在 React 里写 3D 场景react-three/rapierRapier 物理引擎的 React 封装负责碰撞与受力react-three/postprocessing后期特效环境光遮蔽让球体更有立体感二、快速上手本地克隆并运行项目只需三条命令即可把整个 3D 物理世界跑起来# 1. 克隆仓库 git clone https://link.gitcode.com/i/be8b3c5360f09e0eac96accc81af4d09 # 2. 安装依赖 cd Portfolio-Website npm install # 3. 启动开发服务器 npm run dev用浏览器打开后保持桌面端窗口宽度大于 1024px向下滚动到 Work 区域之后球体交互就会激活。⚠️ 项目中的 GSAP 使用试用版插件仅供学习参考不可用于线上托管详见 README.md。三、Rapier 物理引擎3D 世界里负责碰撞的大脑为什么网页上的球体会互相弹开因为背后跑着一个真正的物理引擎Rapier——它用 WASM 实现计算速度快专门处理碰撞检测、受力、阻尼等物理模拟。在 TechStack.tsx 中整个物理世界的入口是这一行Physics gravity{[0, 0, 0]}gravity{[0, 0, 0]}是点睛之笔重力被设为零。球体不会往下掉而是悬浮在空间中这正是太空漂浮感的来源。每个球体由RigidBody刚体 碰撞器组成关键配置见 TechStack.tsxlinearDamping{0.75}线速度阻尼球体被推开后会慢慢停下来angularDamping{0.15}旋转阻尼较低所以球体被推后会继续翻滚friction{0.2}较低摩擦力让滑动更顺滑BallCollider args{[scale]} /球形碰撞器半径随球体大小变化额外还有一个CylinderCollider模拟球体上小天线的突出碰撞体积 小知识点刚体RigidBody是物理引擎中会动的物体碰撞器Collider是告诉引擎这个物体长什么样、哪里能碰到的形状描述。四、30 个技术 Logo 球体是怎么做出来的球体表面的 Logo 贴图来自 public/images/ 目录TechStack.tsx 里一次性加载了 8 张贴图Logo 贴图对应技术react2.webpReactnext2.webpNext.jsnode2.webpNode.jsexpress.webpExpressmongo.webpMongoDBmysql.webpMySQLtypescript.webpTypeScriptjavascript.webpJavaScript然后代码做了两件巧妙的事30 个球体随机生成TechStack.tsx 中生成了 30 个球体每个球体的缩放比例从[0.7, 1, 0.8, 1, 1]中随机抽取所以画面里球体大小不一更自然。Logo 变成会发光的球面贴图被包进MeshPhysicalMaterialTechStack.tsx同时作为颜色贴图map和自发光贴图emissiveMap配合 0.5 的金属度和 0.3 的自发光强度球体即使在暗处也能看清 Logo。✏️ 想换成自己的 Logo只需替换 public/images/ 下的贴图文件即可渲染逻辑不用改。五、鼠标交互实战看不见的推子如何推动球体这是整个交互最精彩的部分由 TechStack.tsx 的Pointer组件实现RigidBody position{[100, 100, 100]} typekinematicPosition colliders{false} ref{ref} BallCollider args{[2]} / /RigidBody它本质上是一个半径为 2 的隐形球类型为kinematicPosition运动学刚体——由代码直接控制位置、不参与物理积分但能推动其他刚体。每一帧中useFrame钩子读取鼠标在 3D 视口中的位置pointer把目标位置与当前位置做插值lerp 0.2实现鼠标后面慢悠悠跟着走的丝滑手感再通过setNextKinematicTranslation设置它下一帧的位置。而每个球体也在每帧计算一次冲量TechStack.tsx把球体当前位置归一化后乘上-50 / -150 / -50的方向系数调用applyImpulse把它往中心推。于是你会看到鼠标靠近球体 → 球体被撞飞鼠标离开 → 球体被无形的手拉回中心区域两者叠加球体在画面里持续活着六、让球体更高级光影与后期特效如果只有物理效果球体还差了点质感。项目在 TechStack.tsx 中还叠加了三层渲染技巧技术作用spotLightcastShadow聚光灯投影让球体之间互相遮挡出阴影Environment files/models/char_enviorment.hdr加载 HDR 环境贴图模拟真实反射N8AO神经网络环境光遮蔽加深球体缝隙处的暗部立体感拉满其中环境贴图复用了 3D 人物场景使用的 char_enviorment.hdr保证整个网站光影风格统一。七、性能优化小技巧懒加载与桌面端专属这个 3D 场景并不便宜项目做了两处关键优化懒加载在 MainContainer.tsx 中TechStack通过lazy(() import(./TechStack))按需加载页面首屏不必等待物理场景就绪。仅桌面端启用MainContainer.tsx 判断窗口宽度大于 1024px 才渲染 3D 球体移动端直接跳过避免低性能设备卡顿。滚动到才激活TechStack.tsx 监听滚动只有滚过 Work 区域#work元素后isActive才为true物理模拟才开始每帧计算。八、新手常见问题 FAQQ1Rapier 是什么必须用 React 才能用吗Rapier 本身是用 Rust 编写、编译为 WASM 的通用物理引擎独立于 React。本项目通过 react-three/rapier 把它的刚体、碰撞器包装成 React 组件写法更直观。Q2为什么手机上看不到球体交互出于性能考虑场景仅在宽度大于 1024px 的桌面端渲染逻辑见 MainContainer.tsx。Q3想改球体数量、大小怎么改球体数量在 TechStack.tsx 的Array(30)中调整大小来自同一数组里的scale随机项。Q4除了球体项目里还有哪些 3D 玩法首屏还有一个会看你的 3D 人物模型加载流程见 character.ts模型文件先经 decrypt.ts 解密再加载头部跟随鼠标的骨骼动画在 mouseUtils.ts 中实现。总结通过 TechStack.tsx 一个文件Portfolio-Website 就组合出了零重力 30 个 Logo 球体 鼠标隐形推子 HDR 环境光 N8AO 后期的完整 3D 物理交互。 对新手而言这是一个极佳的学习样本React 声明式写法 Rapier 物理模拟 Three.js 渲染管线三者如何协作。不妨克隆下来把 Logo 换成你自己的技术栈做一个独一无二的 3D 作品集吧赞分享【免费下载链接】Portfolio-WebsiteMy Portfolio Website Showcasing the website 3d interactions or experience and my work.项目地址https://gitcode.com/gh_mirrors/portfoliow/Portfolio-Website点击查看免费下载相关推荐5 步装好 FLARE-VM 的 Windows 逆向工程环境5 步装好 FLARE VM 的 Windows 逆向工程环境 虚拟机逆向环境搭建最慢的是十几个工具逐个装、逐个配。FLARE VM 把这事压进一个安装脚本逆向工程网络安全vis-three scene-editor物理引擎集成实现真实的3D物体交互vis three scene editor物理引擎集成实现真实的3D物体交互 在3D场景编辑中物理引擎是实现真实物体交互的核心。vis three sce创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考