乘风破浪,遇见未来元宇宙(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”)

右侧栏

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

参考

  • Spline中文版
  • Spline官网
  • Spline-轻量3D设计神器来了-UICN
  • 即时设计 x 站酷 x Spline | 3D LOGO 设计