学习链接
作者：Reece Sugars
环境搭建
项目是基于react three fiber的，我们来自己搭建一个！
这个是react three fiber的相关文档，我们点击live demo，在线demo
这是在线demo地址以及作者相关作品，使用sandbox搭建，可以在线修改和交互。
- 在线地址：codesandbox.io/s/rrppl0y8l…
- 作者相关项目（在线学习！）：codesandbox.io/u/drcmda
按照这个目录结构搭一个环境！
在Vscode中，创建一个文件夹，输入npm init -y，在package.json中，将案例给的代码复制进去（我们需要的库文件）
复制进去，这是最基础的react three fiber环境，后面有需要的文件，再安装！
执行npm install，即可完成库的安装了，出现node_modules文件！
创建src文件（react执行文件）和public文件（index.html 主页面！react执行后，自动渲染到该页面）
public文件下，index.html主要内容
src文件下，index.js主要内容
src文件下，App.js主要内容
ok，执行 npm run start，即可在浏览器看见两个旋转的立方体了！
- 浏览器打开地址：http://localhost:3000/
代码细节
实现滚动效果？
我们先用立方体来实现滚动效果！
案例中，使用的是ScrollControls和Scroll组件！
多复制几份Float，给Box设置不同的高度（y轴），这样滚动的时候就可以显示出来了！
在canvas中写入html？
在Scroll组件，添加html字段，这样在Canvas就可以写入正常标签，实现文字效果。
文字在每页显示？
绝对定位：距离顶部100vh * （页数 - 1）
模型加载？
加载模型使用的是gltfjsx，将gltf文件进行转换，编程可交互（jsx）的形式！
导出为Butterfly，在App.js中应用，即可加载蝴蝶模型了！
将Box替换为Butterfly组件！目前效果！
优化页面效果？
这里做了三个操作
- 背景改为深色
- 添加粒子效果
- 添加后处理效果
- bloom（柔光效果，光线溢出！）、
- deepth（景深、虚化效果）
- Vignette（渐晕效果使图像的边缘变暗，使图像的中心变亮。）
背景改为深色
添加粒子效果
添加后处理效果
完成效果！
总结
看到这个案例，真的很惊艳了。纯黑背景、镜头光晕、蝴蝶展翅。还有光斑和文字展示。当真是赏心悦目！记录一下案例实现过程~
