乘风破浪，遇见未来元宇宙(Metaverse)之免费在线轻量级3D网页创作平台Spline，3D网络体验的设计工具学习笔记

什么是Spline

3D网络体验的设计工具

Spline在不断成长，就像你能实现的可能性一样。团队、项目和文件夹 创建团队并在文件夹和项目中组织你的文件。

Spline is constantly growing just like the possibilities of what you can achieve. Teams, Projects & Folders Create teams and organize your files in folders and projects.

学习资源

学习社区

官方微信

如何汉化

以2D的设计思维方式来进行3D设计

Spline是什么?

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

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

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

1. 轻松调整编辑3D模型的材质与样式；
2. 简单易懂的灯光与摄影机；
3. 制作互动动画，添加多个物体状态，支持设置鼠标交互动作来控制状态切换；
4. 除导出静态图片外还可免费导出离线网页（免费版带有水印），离线网页可以通过浏览器直接打开，也可以对网页代码进行二次编辑。
5. 提供丰富的在线3D模型库，数量持续增加中。

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

一起开始吧

开始界面

• 我的文件：最近创建的文件；
• 模型库：官方制作的3D模型，从简单静态到复杂动画，可帮助你更快地制作场景；
• 学习：快捷键一览；
• 更新日志：辛勤的开发者的版本记录；
• 账户设置：付费套餐选择、个人信息资料。

关于PRO付费版

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

界面布局

标签栏

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

左侧栏

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

工具栏

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

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

中间视图

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

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

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

• Perspective透视：所有角度都会根据从相机到物体的距离而变化；
• Orthographic正交：所有角度均平行。

缩放选项：

• Center in object：在当前角度居中显示选中的物体；
• Orientate to object：定位当前选中物体的正面。

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

右侧栏

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

轻3D系列中文教程：从新手到精通（持续更新中）

https://www.bilibili.com/video/BV1wL4y1x76h

饼饼spline基础教程03｜会动的3D图标

https://www.bilibili.com/video/BV1T44y1G7zy

3D图标动画教程 | 日夜开关微交互，灯光-材质-动画的讲解

https://www.bilibili.com/video/BV1nY4y1Y7P9/

内含小技巧：如何给同一个物体添加不同的材质颜色，添加多个动画等等，干货满满

饼饼spline基础教程04｜Spline进阶篇

https://www.bilibili.com/video/BV1hA4y1D7dg

看教程 然后自己创作的小键盘

https://my.spline.design/keyboard-22cb70962e216ba1917d56cafdb7b584/

Real-time 3D spaceship on mobile phone tutorial

https://dribbble.com/shots/18044953-Real-time-3D-spaceship-on-mobile-phone-tutorial

参考

• Spline中文版
• Spline官网
• Spline-轻量3D设计神器来了-UICN
• 即时设计 x 站酷 x Spline | 3D LOGO 设计
• 你好，沉浸式体验设计师 Pt.1
• 你好，沉浸式体验设计师 Pt.2 Pt.3
• Intro to Immersive Experience Design (Part 1)
• Intro to Immersive Experience Design (Part 2)
• Intro to Immersive Experience Design (Part 3)
• 为何3D将成为UI的未来！如何成为沉浸式体验设计师（上）
• 为何3D将成为UI的未来！如何成为沉浸式体验设计师（下）
• 饼饼spline基础教程03｜会动的3D图标
• spline把3D的入门门槛踏平
• MatCap原理介绍及应用