提交需求
賽事與廣告咨詢合作,請?zhí)顚懶枨蟊韱?,我們會在第一時(shí)間與您聯(lián)系!
Spline是什么?
Spline是一款輕量3D設(shè)計(jì)工具,可基于網(wǎng)頁瀏覽器直接在線操作,曾迅速沖上Product Hunt上獲得第一名。對于未學(xué)過3D軟件的也無需擔(dān)心,你可以用以往2D的設(shè)計(jì)思維方式來進(jìn)行3D設(shè)計(jì),無需3D軟件的設(shè)計(jì)基礎(chǔ)。對于在3D趨勢的潮流下需要花費(fèi)大量精力苦啃3D軟件的設(shè)計(jì)師來說,是一個(gè)不錯(cuò)的入門體驗(yàn),讓你能夠著重于設(shè)計(jì)創(chuàng)意,快速搭建簡單3D場景。對Spline感興趣的小伙伴強(qiáng)烈建議收藏。
目前已提供MacOS和Win版本,可通過官網(wǎng) https://spline.design/ 下載安裝包,讓我們來看看官方介紹短片:
首先了解下Spline的基礎(chǔ)功能介紹:
1、輕松調(diào)整編輯3D模型的材質(zhì)與樣式;
2、簡單易懂的燈光與攝影機(jī);
2、制作互動動畫,添加多個(gè)物體狀態(tài),支持設(shè)置鼠標(biāo)交互動作來控制狀態(tài)切換;
3、除導(dǎo)出靜態(tài)圖片外還可免費(fèi)導(dǎo)出離線網(wǎng)頁(免費(fèi)版帶有水?。x線網(wǎng)頁可以通過瀏覽器直接打開,也可以對網(wǎng)頁代碼進(jìn)行二次編輯。
4、提供豐富的在線3D模型庫,數(shù)量持續(xù)增加中。
本篇將結(jié)合官方手冊系統(tǒng)幫助大家快速了解Spline,講解從設(shè)計(jì)-材質(zhì)-燈光-事件狀態(tài)-導(dǎo)出的環(huán)節(jié)涉及到的功能,好了,接下來讓我們進(jìn)入正題:
0、一起開始吧
0.1、開始界面
· 我的文件:最近創(chuàng)建的文件;
· 模型庫:官方制作的3D模型,從簡單靜態(tài)到復(fù)雜動畫,可幫助你更快地制作場景;
· 學(xué)習(xí):快捷鍵一覽;
· 更新日志:辛勤的開發(fā)者的版本記錄;
· 賬戶設(shè)置:付費(fèi)套餐選擇、個(gè)人信息資料。
0.2、關(guān)于PRO付費(fèi)版
基礎(chǔ)版不能導(dǎo)出Videos、GIFS和序列幀,分享后的網(wǎng)頁URL帶有Logo水印。
1、界面布局
1.1、標(biāo)簽欄
在標(biāo)簽欄顯示你已經(jīng)打開的文件,按“ +”圖標(biāo)創(chuàng)建新文件。如果你使用的是免費(fèi)版本,則還會看到“升級”按鈕。
1.2、左側(cè)欄
是我們熟悉的圖層列表,頂部搜索/菜單欄,底部則是模型庫的入口。
1.3、工具欄
放置常用的工具,按下“ +”圖標(biāo)展開所有能添加的對象,除了基本的平面、文字、和立體物件、還有攝影機(jī)跟光源??善揭?、縮放和旋轉(zhuǎn)對象,按下“播放”圖標(biāo)則進(jìn)入演示模式。
(選中左側(cè)的圖層進(jìn)行旋轉(zhuǎn))
1.4、中間視圖
中間就是主要的視圖區(qū)域了,你可以新建一個(gè)對象或打開模型文件來查看,通過快捷鍵Option + Drag(在Windows上是Alt + Drag)可以控制攝影機(jī)角度,按住Space空格鍵則能平移畫面,改變視角也可以通過快捷鍵Cmd+滾輪來進(jìn)行單點(diǎn)縮放。
下方底部按鈕則是用來改變相機(jī)視角的,Spline預(yù)設(shè)了【正視/左右側(cè)視/背視/俯視/仰視/ISO】幾種標(biāo)準(zhǔn)角度。在設(shè)計(jì)過程中經(jīng)常需要從各個(gè)角度查看模型當(dāng)前的設(shè)計(jì)狀態(tài),檢查是否有錯(cuò)位,是個(gè)很常用且方便的功能。
在其下方,有兩個(gè)不同的攝像機(jī)視圖可供選擇:
· Perspective透視:所有角度都會根據(jù)從相機(jī)到物體的距離而變化;
· Orthographic正交:所有角度均平行。
縮放選項(xiàng):
· Center in object:在當(dāng)前角度居中顯示選中的物體;
· Orientate to object:定位當(dāng)前選中物體的正面。
(在正交視圖和透視視圖之間切換,快捷方式:“ M”)
1.5、右側(cè)欄
右側(cè)欄在未選中任何圖層時(shí)顯示整體的環(huán)境參數(shù)設(shè)置,而選擇任一圖層后將在右側(cè)欄顯示具體的屬性面板,動態(tài)參數(shù)也可以在這邊逐一設(shè)置。
2、快速導(dǎo)入內(nèi)容
2.1、模型庫
Spline提供3D資源庫幫助我們更快地進(jìn)行設(shè)計(jì),點(diǎn)擊模型庫按鈕,可以搜索和瀏覽3D資源或圖像,只需單擊所需的對象/圖像即可導(dǎo)入。目前,Spline支持從Google Poly Library和ImagesPix導(dǎo)入3D資源。
2.2、導(dǎo)入文件
除了模型庫外,還可以從本地文件導(dǎo)入,這意味著你可以拉入其他復(fù)雜的3d模型文件再在spline進(jìn)行渲染或繼續(xù)創(chuàng)作。在左側(cè)的搜索欄中打開主菜單,選擇“打開/導(dǎo)入”(快捷鍵“?+ O” /“ Ctrl + O”),然后選擇要導(dǎo)入的文件,或者直接將文件拖放到中間視圖中。
Spline目前支持導(dǎo)入的文件類型:
2D內(nèi)容
·圖片
·PNG
·JPG格式
·SVG(部分)
3D內(nèi)容
·OBJ
·FBX
·GLTF(如.gltf)
·spline文件(.spline文件格式)
3、進(jìn)行3D設(shè)計(jì)
3.1、以3D的方式拉伸2D對象
在創(chuàng)建了2D圖形后,盡管2D沒有深度參數(shù),但仍然可以通過【Extrusion擠壓】拉伸這些對象以使其快速變?yōu)?D,具有Z軸深度和體積。
而3d對象的拉伸可直接點(diǎn)擊三軸相對的方塊進(jìn)行直接拉伸。
3.2、文本
輸入后的文字在3D空間中就像2D對象一樣(如Rectangle),這意味著它可以在X,Y和Z軸上移動和旋轉(zhuǎn)。
3.3、形狀建模
改變每個(gè)對象的形狀參數(shù),可以制作出各種不同的物體,最后的兔子和茶杯是Spline預(yù)設(shè)的3d模型,則只能改變顏色。
3.4、快速克隆對象
克隆可對當(dāng)前對象進(jìn)行規(guī)律性復(fù)制,放射環(huán)狀、線性排列、網(wǎng)格布局三種不同的排列方式。
4、渲染材質(zhì)
設(shè)計(jì)完形狀后,讓我們來看看怎么樣給模型上材質(zhì),首先Spline在全局中自帶光源,不像其他3D軟件先建白膜-開渲染器打燈-加顏色材質(zhì)。在全局光源的基礎(chǔ)上,新建形狀后直接調(diào)整材質(zhì)顏色,可以非常實(shí)時(shí)直觀地能看到自然光下模型的效果。
材質(zhì)是基于圖層進(jìn)行編輯的,這種方法與傳統(tǒng)的3D編輯器不同,但是與大多數(shù)圖形設(shè)計(jì)工具的工作方式類似。默認(rèn)情況下,任何對象都包括兩個(gè)材質(zhì)層:“照明”和“顏色”。
4.1、照明層
照明有以下4種類型:
Lambert朗伯:漫反射,無光澤的粗糙或磨砂表面
Phong馮氏:鏡面反射,有一定光澤的表面(塑料,亞克力)
Physical物理:類似鏡面反射,但偏向金屬、陶瓷、鏡子這種強(qiáng)反射物體;
Toon卡通材質(zhì):卡通效果(非逼真的外觀),此材質(zhì)用的較少。
4.2、顏色模式
默認(rèn)都為單色填充,可以從色板上選擇任一種顏色進(jìn)行填充,更改不透明度。
在下拉箭頭中展開選擇更多模式:
Gradient-漸變:
為對象進(jìn)行漸變填充,可設(shè)置多個(gè)節(jié)點(diǎn)顏色,跟圖形設(shè)計(jì)工具用法一樣。
Normal 法線:
在3D幾何中,法線定義了構(gòu)成形狀的每個(gè)三角形的方向。顏色來自通道Y(綠色),X(紅色)和Z(藍(lán)色)的混合??梢栽囃娌煌耐ǖ篮突旌夏J?,對3D模型添加基于方向的色調(diào)更改。
Depth深度:
另一種漸變,但是根據(jù)模型的亮暗面來呈現(xiàn)。
Texture紋理:
從“紋理面板”上為對象添加紋理,也可以從本地上傳自定義圖片。
Noise噪聲:
噪聲層是模擬表面有機(jī)顏色變化的理想選擇。它會生成帶有多個(gè)參數(shù)的分形布朗運(yùn)動噪聲,以控制最終結(jié)果。
Fresnel 聚光燈:
菲涅耳層模擬了我們?nèi)绾胃鶕?jù)光的角度感知表面上的反射。菲涅爾層顯示的顏色隨著與照相機(jī)角度(在現(xiàn)實(shí)生活中可能是眼睛)的平行度變近而逐漸消失。
4.3、添加多個(gè)顏色層/混合模式
點(diǎn)擊材質(zhì)欄右側(cè)的【+】可添加多個(gè)顏色層,圖層間的順序可以上下調(diào)整。不管是照明還是顏色層,都能選擇當(dāng)前圖層的混合模式,趕緊來嘗試發(fā)現(xiàn)更多意想不到的效果!
5、燈光
5.1、全局燈光環(huán)境
默認(rèn)情況下,Spline上的任何新場景都已包括“方向光”和“環(huán)境光”,它們?yōu)槿魏螌ο笤O(shè)置默認(rèn)照明。雖然這對于基本場景非常有效,但可能需要根據(jù)場景的視覺目標(biāo)來關(guān)閉或調(diào)整參數(shù)內(nèi)容。
要想創(chuàng)建光源,點(diǎn)按工具欄上的“ +”圖標(biāo),然后在光源中進(jìn)行選擇。
5.2、定向光
定向燈非常適合模擬太陽或露天場景的照明?;诠庠次恢煤妥鴺?biāo)系原點(diǎn)之間,在兩點(diǎn)之間繪制的直線定義了光源方向。
5.3、點(diǎn)光源
顧名思義,點(diǎn)光源從空間中的某個(gè)點(diǎn)發(fā)出光,并隨著距離的增加而逐漸消失。這些燈可用于表示來自世界上各種燈的光的發(fā)射,例如房屋燈,交通信號燈,汽車燈等。
(點(diǎn)光源可以拖動到任意位置和角度)
(修改燈光的顏色)
5.4、射燈
聚光燈是圓錐形燈,非常適合模擬來自棚內(nèi)燈具或路燈等物體的人工照明。
6、攝影機(jī)
新增攝像機(jī)后,在全局設(shè)置中選擇【Camera】,將以新增的攝像機(jī)角度來查看模型,調(diào)整相機(jī)的不同參數(shù)將模擬現(xiàn)實(shí)場景的不同視覺效果(廣角、景深等)。
7、后期特效
7.1、后期處理
后期處理可在整個(gè)場景中實(shí)現(xiàn)全局2D效果,默認(rèn)情況下為隱藏,可以通過點(diǎn)擊【眼睛】圖標(biāo)來打開/關(guān)閉,目前Spline有以下幾種效果:像素化、色像差、發(fā)光、色調(diào)、亮度、暗角、噪點(diǎn)。
7.2 迷霧
在場景中添加霧是一種創(chuàng)造深度的好方法,在右側(cè)欄上的“霧”面板,將其展開并啟用。通過近遠(yuǎn)值來改變霧的深度,兩者之間的距離越近,霧化過渡的厚度就越大。使用與背景相同的顏色將獲得較佳的效果,當(dāng)然也可以改成別的顏色,進(jìn)行更多自由的創(chuàng)作。
8、交互動畫
8.1、基于狀態(tài)的動畫
向?qū)ο筇砑佣鄠€(gè)狀態(tài),再使用“事件”將動畫從一種狀態(tài)觸發(fā)到另一種狀態(tài)。
選擇對象點(diǎn)擊右側(cè)面板的States“+”圖標(biāo),“基本狀態(tài)”(對象已經(jīng)處于的狀態(tài))和另一個(gè)稱為“狀態(tài)1”的狀態(tài)(變化后的狀態(tài))。
系統(tǒng)將自動選擇“狀態(tài)1”,可以直接開始進(jìn)行位置、旋轉(zhuǎn)、縮放、比例、材質(zhì)、顏色、相機(jī)縮放、相機(jī)位置等的更改。“狀態(tài)1”進(jìn)行更改后,在面板上的“基本狀態(tài)”和“狀態(tài)1”之間切換可查看狀態(tài)差異。
8.2、事件與交互
選擇要添加新事件的對象,在狀態(tài)下拉列表中,選擇觸發(fā)事件及想轉(zhuǎn)換的目標(biāo)狀態(tài)。
(設(shè)置事件參數(shù)后,快速預(yù)覽效果)
可過渡的事件類型:
· 鼠標(biāo)按下;
· 鼠標(biāo)釋放;
· 鼠標(biāo)懸停;
· 鍵盤鍵按下;
· 鍵盤鍵釋放;
· 開始-場景加載后即發(fā)生過渡;
· 觀察-具有此事件的對象始終面對光標(biāo);
· 跟隨-具有此事件的對象跟隨光標(biāo);
現(xiàn)在,你可以設(shè)置時(shí)間參數(shù)等,點(diǎn)擊工具欄的預(yù)覽按鈕進(jìn)入“演示模式”查看動畫。
9、演示模式
在演示模式下,你可以旋轉(zhuǎn),平移和縮放場景或者進(jìn)行互動操作。
10、發(fā)布與導(dǎo)出
1、公開URL
復(fù)制共享鏈接,可直接打開瀏覽器預(yù)覽。而Embed代碼則可用于將場景嵌入到其他工具中,例如Notion,Webflow,Wordpress等。
2、Web內(nèi)容
從“ Web內(nèi)容”選項(xiàng)保存的本地壓縮文件,解壓之后通過瀏覽器直接打開查看。如果要運(yùn)行體驗(yàn),請運(yùn)行l(wèi)ocalserver。從未壓縮的文件夾路徑中打開OS終端或控制臺,然后運(yùn)行:python -m SimpleHTTPServer
3、導(dǎo)出為圖像
可選擇JPG或PNG導(dǎo)出,但在導(dǎo)出之前,請確保將全部模型都出現(xiàn)在中間視圖中,不然被遮住的地方也會被切掉。
4、導(dǎo)出為視頻
視頻(WebM和MP4)、Gif、序列幀都為付費(fèi)版功能。
在“停止方式”的下拉列表中,你可以選擇對視頻使用固定時(shí)長或手動時(shí)長。
1-如果選擇固定的持續(xù)時(shí)間,按“開始”開始錄制,視頻將按照你確定的持續(xù)時(shí)間自動停止。
2-如果選擇手動時(shí)長,則需要使用“開始”和“停止”按鈕來手動控制視頻的開始和結(jié)束。
5、glTF
Graphics Language Transmission Format是3D模型的一種文件格式,被稱為”三維軟件的JPEG“。
結(jié)語
Spline目前的功能還一直在迭代更新中,但不太適合專業(yè)3D設(shè)計(jì)師。未來3D設(shè)計(jì)工具的趨勢也將往輕量可視化發(fā)展,這就像之前的PS和Sketch一樣,現(xiàn)在主流的C4D/Blender等軟件中也將出現(xiàn)類似sketch/figma之類的多競爭對手,Spline不敢說一定是下一個(gè)黑馬,但也是不錯(cuò)的開篇,讓我們一起拭目以待吧。
參考鏈接:https://docs.spline.design/
Powered by Froala Editor
大牛,別默默的看了,快登錄幫我點(diǎn)評一下吧!:)
登錄 立即注冊