简单说说背景故事
嘤嘤嘤，gamemcu大佬666，先膜拜一下。。。
最近小米su7发布，雷总给大家带来的诚心价，虽然不是米粉，但也想499支持一下，奈何钱包有限能力有限，不能将其拿下。
随汽车发布之后，又有大佬发布了su7的宣传网页，我愿称它是官方宣传！！！！！！
原地址入口：gamemcu.com/su7/
风阻模式
因为效果实在是太惊艳了，开始还以为是unity或者ue写的，后查看大佬的介绍说是threejs。
嗯~~~~ 看看自己手上的threejs，运用之法与大佬相比之下简直天上和地下。
钱包不能支持，那就精神上支持一下，毕竟不要钱。(其实被大佬震感到了，是自己太菜了，得锻炼锻炼，还原下页面学学技术，作为练习时长2年半的练习生也是一种自我提升)
话不多说，直接上还原的地址，我觉得还原度能有30% :)
这里弱弱的说一句，如果你觉得还不错，请不用吝啬，赏我的git仓库一个star吧
简单分析需要用到库
- threejs :大名鼎鼎web的3d库
- three-mesh-bvh 光线投射性能, 用它做了模型裁剪的outline
- postprocessing 官方都说好用的后期处理库
- gsap 好用的绿袜子动画库
要做哪些
- 模型加载
- 环境光处理
- 地面反射与粗糙处理
- 模式切换动画
- 模型切面动画计算
- 风阻模式线条与辉光
- 风阻模式风的线条
Hello World
还原页面的第一步，就是threejs的hello word基础场景，加载模型
模型地址:Sketchfab
环境光
这里的环境光，直接是下载原网站的hdr,经过调整emissiveIntensity和toneMappingExposure达到差不多的效果。
然后这里我还专门添加了一个自发光的顶灯 :) 因为我不知道原网站那个灯怎么来的
地面的反射与粗糙
这里我一开始用的官网SSR(屏幕空间反射Screen Space Reflect),它是一个Pass,与后面要用的postgrocessing有些冲突(其实是我不会解决报错问题找的借口)。最后用的是库里面的Reflector对象，
官方有个案例写了如何使用Reflect对象变成Water,我在源代码的基础上将其中的Shader修改了下,添加了粗糙度贴图，这里的贴图也是原网站下载的。
这里我觉得地板反射颜色太亮了,所以我调暗了些，并且去掉的折射refractColor。嗯~~ 地面还有很多细节要处理，这里我能力有限所以先到这。(如，添加菲涅尔反射，加点噪声)
模型切面与辉光
这里使用# Material中的clippingPlanes属性做的切面,用three-mesh-bvh案例做的裁剪轮廓计算
辉光部分使用的postprocessing只对场景中的线条轮廓进行辉光处理
模式切换动画
动画这部分就是gsap去操作了，这部分比较简单直接上timeline，大多时间就是用来调整了，下面是部分代码
最终效果
总结
虽然没有官网上面那么酷炫，但毕竟用了一周时间达到该效果还是挺满意的，后面优化是大头。还有风的线条没有添加，加上的话应该更炫些。
最主要的还是shader，但是资料和案例还是太少了——————-一个做梦想学shader的2年半练习生的感受
最后吐槽下掘金没有表情，我无法表达我的情绪，愤怒ing！！！(可能我没找到)
原文链接：https://juejin.cn/post/7356511140828037129 作者：Pongpong
