gamemcu su7,尝试还原 su7 网页的特效

简单说说背景故事

嘤嘤嘤,gamemcu大佬666,先膜拜一下。。。

最近小米su7发布,雷总给大家带来的诚心价,虽然不是米粉,但也想499支持一下,奈何钱包有限能力有限,不能将其拿下。

随汽车发布之后,又有大佬发布了su7的宣传网页,我愿称它是官方宣传!!!!!!

原地址入口:gamemcu.com/su7/

风阻模式

因为效果实在是太惊艳了,开始还以为是unity或者ue写的,后查看大佬的介绍说是threejs

嗯~~~~ 看看自己手上的threejs,运用之法与大佬相比之下简直天上和地下。

钱包不能支持,那就精神上支持一下,毕竟不要钱。(其实被大佬震感到了,是自己太菜了,得锻炼锻炼,还原下页面学学技术,作为练习时长2年半的练习生也是一种自我提升)

话不多说,直接上还原的地址,我觉得还原度能有30% :)

这里弱弱的说一句,如果你觉得还不错,请不用吝啬,赏我的git仓库一个star吧

在线浏览:su7-imitate.vercel.app/

源码地址:github.com/Pong-lei/su...

简单分析需要用到库

要做哪些

  • 模型加载
  • 环境光处理
  • 地面反射与粗糙处理
  • 模式切换动画
  • 模型切面动画计算
  • 风阻模式线条与辉光
  • 风阻模式风的线条

Hello World

还原页面的第一步,就是threejs的hello word基础场景,加载模型

模型地址:Sketchfab

环境光

这里的环境光,直接是下载原网站的hdr,经过调整emissiveIntensitytoneMappingExposure达到差不多的效果。 然后这里我还专门添加了一个自发光的顶灯 :) 因为我不知道原网站那个灯怎么来的

地面的反射与粗糙

这里我一开始用的官网SSR(屏幕空间反射Screen Space Reflect),它是一个Pass,与后面要用的postgrocessing有些冲突(其实是我不会解决报错问题找的借口)。最后用的是库里面的Reflector对象, 官方有个案例写了如何使用Reflect对象变成Water,我在源代码的基础上将其中的Shader修改了下,添加了粗糙度贴图,这里的贴图也是原网站下载的。

这里我觉得地板反射颜色太亮了,所以我调暗了些,并且去掉的折射refractColor。嗯~~ 地面还有很多细节要处理,这里我能力有限所以先到这。(如,添加菲涅尔反射,加点噪声)

模型切面与辉光

这里使用# Material中的clippingPlanes属性做的切面,用three-mesh-bvh案例做的裁剪轮廓计算

辉光部分使用的postprocessing只对场景中的线条轮廓进行辉光处理

模式切换动画

动画这部分就是gsap去操作了,这部分比较简单直接上timeline,大多时间就是用来调整了,下面是部分代码

最终效果

总结

虽然没有官网上面那么酷炫,但毕竟用了一周时间达到该效果还是挺满意的,后面优化是大头。还有风的线条没有添加,加上的话应该更炫些。

最主要的还是shader,但是资料和案例还是太少了-------------------一个做梦想学shader的2年半练习生的感受

最后吐槽下掘金没有表情,我无法表达我的情绪,愤怒ing!!!(可能我没找到)

相关推荐
寧笙(Lycode)3 分钟前
OpenTelemetry 入门
前端
猪哥帅过吴彦祖5 分钟前
Flutter 系列教程:列表与网格 - `ListView` 和 `GridView`
前端·flutter·ios
用户352120195606 分钟前
React hooks (useRef)
前端
Mintopia9 分钟前
⚡当 Next.js 遇上实时通信:Socket.io 与 Pusher 双雄传
前端·后端·全栈
tangdou36909865512 分钟前
可怕!我的Nodejs系统因为日志打印了Error 对象就崩溃了😱 Node.js System Crashed Because of Logging
前端·javascript·后端
Takklin16 分钟前
Vue 与 React 应用初始化机制对比 - 前端框架思考笔记
前端·react.js
Mintopia18 分钟前
🎨 数据增强技术在 AIGC 训练中的应用:提升 Web 生成的多样性
前端·javascript·aigc
华仔啊19 分钟前
如何用 Vue3 打造高级音乐播放器?进度条+可视化效果,代码简洁可复用!
前端·css·vue.js
小傅哥20 分钟前
新项目完结,Ai Agent 智能体、拖拉拽编排!
前端·后端
ttod_qzstudio27 分钟前
解决 Vue 3 + TypeScript 中 v-for 循环类型推断问题
前端·vue.js·typescript