曾经我也学过一段时间的Unit 3D，纯粹是我太喜欢美感的设计。作为一个码农，我又想让它出现在Web中，这一直是我想做的，虽然我还没接触过Three，但是今天发现的一款工具让我快速的上手了，现在记录并分享一下。
体验地址：AIL510，这是我目前正在做的开源项目，在首页中将原本的动画替换成了3D效果的动画，可以看一看。
（省流量）它的效果是这样的，就是一堆球球旋转（抽象）：
Spline中文版下载
Bing搜索：Spline，即可。它有中文版，支持Mac和Windows两个平台。
使用
以Windows为例子，解压后，打开它的可执行文件Spline.exe。
使用Google邮箱登录（确实只有这个选项）。
新建文件后如图所示，如果学过Ps或者其他设计类的工具，其实也能很快的熟悉该界面，无非要进阶学习3D的一些术语，比如说相机、材质...：
你可以随意捣鼓点小球，就像我这样，选择工具面板中的球在画布中画几个球，配置一些材质（省略这些步骤，并非本文核心）。
画完球后，点击导出，选择代码导出，你会看见一个类似地址的内容，我们就是需要这个。
以上就已经是该工具的全部内容了，就是这么简单！
困难的地方就是，你需要借助该工具去创建非常有创意的3D，涉及到材质、动画等等...
接下去，了解如何应用在工程中。
工程应用
我是Nuxt工程，用vue同理，工具本身支持React，感兴趣的同学可以自己去探索。
- 安装依赖：
yarn add @splinetool/runtime
或者
npm install @splinetool/runtime
- 示例代码
template:
<canvas class="absolute" id="canvas3d"></canvas>
js:
import { Application } from '@splinetool/runtime';
// make sure you have a canvas in the body
const canvas = document.getElementById('canvas3d');
// start the application and load the scene
const spline = new Application(canvas);
// 放入刚刚那串地址
spline.load('https://prod.spline.design/n14-62Rb3oJV7kmA/scene.splinecode');
这样你就可以在网页中应用你刚刚制作的3D内容了，是不是巨简单，说实话，我也觉得太简单了...
新手补充
- 给定相机视角并旋转
创建一个相机，导出设置的时候，选择播放设置，打开旋转动画，这样就会以相机为视角，围绕着该视角旋转。
- 给制作好的3D内容增加动画
选中一个需要增加动画的物体，在“属性面板”中添加状态，并命名为“动”。
在“交互”选项中，选择过渡，之后就是设置“初始状态”到“动”的状态，需要怎么变化，就跟PrK动画帧一样的道理，后一帧跑的别的地方去了，播放前后两帧，画面就动起来了。
学习资料补充
- 官方文档
- 哔哩哔哩官方账号（里面有很多Demo教学视频）
