Spline是什么?

 

Spline是一款轻量3D设计工具，可基于网页浏览器直接在线操作，曾迅速冲上Product Hunt上获得第一名。对于未学过3D软件的也无需担心，你可以用以往2D的设计思维方式来进行3D设计，无需3D软件的设计基础。对于在3D趋势的潮流下需要花费大量精力苦啃3D软件的设计师来说，是一个不错的入门体验，让你能够着重于设计创意，快速搭建简单3D场景。对Spline感兴趣的小伙伴强烈建议收藏。

目前已提供MacOS和Win版本，可通过官网 https://spline.design/ 下载安装包，让我们来看看官方介绍短片：

首先了解下Spline的基础功能介绍：

1、轻松调整编辑3D模型的材质与样式；

2、简单易懂的灯光与摄影机；

2、制作互动动画，添加多个物体状态，支持设置鼠标交互动作来控制状态切换；

3、除导出静态图片外还可免费导出离线网页（免费版带有水印），离线网页可以通过浏览器直接打开，也可以对网页代码进行二次编辑。

4、提供丰富的在线3D模型库，数量持续增加中。

本篇将结合官方手册系统帮助大家快速了解Spline，讲解从设计-材质-灯光-事件状态-导出的环节涉及到的功能，好了，接下来让我们进入正题：

0、一起开始吧

0.1、开始界面

· 我的文件：最近创建的文件；

· 模型库：官方制作的3D模型，从简单的静态场景到复杂的动画场景，可帮助你更快地制作场景；

· 学习：快捷键一览；

· 更新日志：辛勤的开发者的版本记录；

· 账户设置：付费套餐选择、个人信息资料。

0.2、关于PRO付费版

基础版不能导出Videos、GIFS和序列帧，分享后的网页URL带有Logo水印。

1、界面布局

1.1、标签栏

在标签栏显示你已经打开的文件，按“ +”图标创建新文件。如果你使用的是免费版本，则还会看到“升级”按钮。

1.2、左侧栏

是我们熟悉的图层列表，顶部搜索/菜单栏，底部则是模型库的入口。

1.3、工具栏

放置常用的工具，按下“ +”图标展开所有能添加的对象，除了基本的平面、文字、和立体物件、还有摄影机跟光源。可平移、缩放和旋转对象，按下“播放”图标则进入演示模式。

（选中左侧的图层进行旋转）

1.4、中间视图

中间就是主要的视图区域了，你可以新建一个对象或打开模型文件来查看，通过快捷键Option + Drag（在Windows上是Alt + Drag）可以控制摄影机角度，按住Space空格键则能平移画面，改变视角也可以通过快捷键Cmd＋滚轮来进行单点缩放。

下方底部按钮则是用来改变相机视角的，Spline预设了【正视/左右侧视/背视/俯视/仰视/ISO】几种标准角度。在设计过程中经常需要从各个角度查看模型当前的设计状态，检查是否有错位，是个很常用且方便的功能。

在其下方，有两个不同的摄像机视图可供选择：

· Perspective透视：所有角度都会根据从相机到物体的距离而变化；

· Orthographic正交：所有角度均平行。

 

缩放选项：

· Center in object：在当前角度居中显示选中的物体；

· Orientate to object：定位当前选中物体的正面。

 

(在正交视图和透视视图之间切换，快捷方式：“ M”)

1.5、右侧栏

右侧栏在未选中任何图层时显示整体的环境参数设置，而选择任一图层后将在右侧栏显示具体的属性面板，动态参数也可以在这边逐一设置。

2、快速导入内容

2.1、模型库

Spline提供3D资源库帮助我们更快地进行设计，点击模型库按钮，可以搜索和浏览3D资源或图像，只需单击所需的对象/图像即可导入。目前，Spline支持从Google Poly Library和ImagesPix导入3D资源。

2.2、导入文件

除了模型库外，还可以从本地文件导入，这意味着你可以拉入其他复杂的3d模型文件再在spline进行渲染或继续创作。在左侧的搜索栏中打开主菜单，选择“打开/导入”（快捷键“⌘+ O” /“ Ctrl + O”），然后选择要导入的文件，或者直接将文件拖放到中间视图中。

Spline目前支持导入的文件类型：

🖼2D内容

·图片

·PNG

·JPG格式

·SVG（部分）

 

🥕3D内容

·OBJ

·FBX

·GLTF（如.gltf）

·spline文件（.spline文件格式）

3、进行3D设计

3.1、以3D的方式拉伸2D对象

在创建了2D图形后，尽管2D没有深度参数，但仍然可以通过【Extrusion挤压】拉伸这些对象以使其快速变为3D，具有Z轴深度和体积。

而3d对象的拉伸可直接点击三轴相对的方块进行直接拉伸。

3.2、文本

输入后的文字在3D空间中就像2D对象一样（如Rectangle），这意味着它可以在X，Y和Z轴上移动和旋转。

3.3、形状建模

改变每个对象的形状参数，可以制作出各种不同的物体，最后的兔子和茶杯是Spline预设的3d模型，则只能改变颜色。

3.4、快速克隆对象

克隆可对当前对象进行规律性复制，放射环状、线性排列、网格布局三种不同的排列方式。

4、渲染材质

设计完形状后，让我们来看看怎么样给模型上材质，首先Spline在全局中自带光源，不像其他3D软件先建白膜-开渲染器打灯-加颜色材质。在全局光源的基础上，新建形状后直接调整材质颜色，可以非常实时直观地能看到自然光下模型的效果。

材质是基于图层进行编辑的，这种方法与传统的3D编辑器不同，但是与大多数图形设计工具的工作方式类似。默认情况下，任何对象都包括两个材质层：“照明”和“颜色”。

4.1、照明层

照明有以下4种类型：

Lambert朗伯：漫反射，无光泽的粗糙或磨砂表面

Phong冯氏：镜面反射，有一定光泽的表面（塑料，亚克力）

Physical物理：类似镜面反射，但偏向金属、陶瓷、镜子这种强反射物体；

Toon卡通材质：卡通效果（非逼真的外观），此材质用的较少。

4.2、颜色模式

默认都为单色填充，可以从色板上选择任一种颜色进行填充，更改不透明度。

在下拉箭头中展开选择更多模式：

Gradient-渐变：

为对象进行渐变填充，可设置多个节点颜色，跟图形设计工具用法一样。

Normal 法线：

在3D几何中，法线定义了构成形状的每个三角形的方向。颜色来自通道Y（绿色），X（红色）和Z（蓝色）的混合。可以试玩不同的通道和混合模式，对3D模型添加基于方向的色调更改。

Depth深度：

另一种渐变，但是根据模型的亮暗面来呈现。

 

Texture纹理：

从“纹理面板”上为对象添加纹理，也可以从本地上传自定义图片。

Noise噪声：

噪声层是模拟表面有机颜色变化的理想选择。它会生成带有多个参数的分形布朗运动噪声，以控制最终结果。

Fresnel 聚光灯：

菲涅耳层模拟了我们如何根据光的角度感知表面上的反射。菲涅尔层显示的颜色随着与照相机角度（在现实生活中可能是眼睛）的平行度变近而逐渐消失。

 

4.3、添加多个颜色层/混合模式

点击材质栏右侧的【+】可添加多个颜色层，图层间的顺序可以上下调整。不管是照明还是颜色层，都能选择当前图层的混合模式，赶紧来尝试发现更多意想不到的效果！

5、灯光

5.1、全局灯光环境

默认情况下，Spline上的任何新场景都已包括“方向光”和“环境光”，它们为任何对象设置默认照明。虽然这对于基本场景非常有效，但可能需要根据场景的视觉目标来关闭或调整参数内容。

要想创建光源，点按工具栏上的“ +”图标，然后在光源中进行选择。

5.2、定向光

定向灯非常适合模拟太阳或露天场景的照明。基于光源位置和坐标系原点之间，在两点之间绘制的直线定义了光源方向。

5.3、点光源

顾名思义，点光源从空间中的某个点发出光，并随着距离的增加而逐渐消失。这些灯可用于表示来自世界上各种灯的光的发射，例如房屋灯，交通信号灯，汽车灯等。

(点光源可以拖动到任意位置和角度)

(修改灯光的颜色)

5.4、射灯

聚光灯是圆锥形灯，非常适合模拟来自棚内灯具或路灯等物体的人工照明。

6、摄影机

新增摄像机后，在全局设置中选择【Camera】，将以新增的摄像机角度来查看模型，调整相机的不同参数将模拟现实场景的不同视觉效果（广角、景深等）。

7、后期特效

7.1、后期处理

后期处理可在整个场景中实现全局2D效果，默认情况下为隐藏，可以通过点击👁图标来打开/关闭，目前Spline有以下几种效果：像素化、色像差、发光、色调、亮度、暗角、噪点。

7.2 迷雾

在场景中添加雾是一种创造深度的好方法，在右侧栏上的“雾”面板，将其展开并启用。通过近远值来改变雾的深度，两者之间的距离越近，雾化过渡的厚度就越大。使用与背景相同的颜色将获得较佳的效果，当然也可以改成别的颜色，进行更多自由的创作。

8、交互动画

8.1、基于状态的动画

向对象添加多个状态，再使用“事件”将动画从一种状态触发到另一种状态。

选择对象点击右侧面板的States“+”图标，“基本状态”（对象已经处于的状态）和另一个称为“状态1”的状态（变化后的状态）。

系统将自动选择“状态1”，可以直接开始进行位置、旋转、缩放、比例、材质、颜色、相机缩放、相机位置等的更改。“状态1”进行更改后，在面板上的“基本状态”和“状态1”之间切换可查看状态差异。

8.2、事件与交互

选择要添加新事件的对象，在状态下拉列表中，选择触发事件及想转换的目标状态。

（设置事件参数后，快速预览效果）

可过渡的事件类型：

· 鼠标按下；

· 鼠标释放；

· 鼠标悬停；

· 键盘键按下；

· 键盘键释放；

· 开始-场景加载后即发生过渡；

· 观察-具有此事件的对象始终面对光标；

· 跟随-具有此事件的对象跟随光标；

现在，你可以设置时间参数等，点击工具栏的预览按钮进入“演示模式”查看动画。

9、演示模式

在演示模式下，你可以旋转，平移和缩放场景或者进行互动操作。

10、发布与导出

1、公开URL

复制共享链接，可直接打开浏览器预览。而Embed代码则可用于将场景嵌入到其他工具中，例如Notion，Webflow，Wordpress等。

 

2、Web内容

从“ Web内容”选项保存的本地压缩文件，解压之后通过浏览器直接打开查看。如果要运行体验，请运行localserver。从未压缩的文件夹路径中打开OS终端或控制台，然后运行：python -m SimpleHTTPServer

 

3、导出为图像

可选择JPG或PNG导出，但在导出之前，请确保将全部模型都出现在中间视图中，不然被遮住的地方也会被切掉。

 

4、导出为视频

视频（WebM和MP4）、Gif、序列帧都为付费版功能。

在“停止方式”的下拉列表中，你可以选择对视频使用固定时长或手动时长。

1-如果选择固定的持续时间，按“开始”开始录制，视频将按照你确定的持续时间自动停止。

2-如果选择手动时长，则需要使用“开始”和“停止”按钮来手动控制视频的开始和结束。

 

5、glTF

Graphics Language Transmission Format是3D模型的一种文件格式，被称为”三维软件的JPEG“。

结语

Spline目前的功能还一直在迭代更新中，但不太适合专业3D设计师。未来3D设计工具的趋势也将往轻量可视化发展，这就像之前的PS和Sketch一样，现在主流的C4D/Blender等软件中也将出现类似sketch/figma之类的多竞争对手，Spline不敢说一定是下一个黑马，但也是不错的开篇，让我们一起拭目以待吧。

 

参考链接：https://docs.spline.design/