亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

恭喜你成為UI中國推薦設(shè)計(jì)師 (詳情)
//百度統(tǒng)計(jì) 20220402 uicn

您的意見是我們 UI 中國進(jìn)步的動力!
點(diǎn)擊立即反饋按鈕,發(fā)表您的意見!
立即反饋
QQ群反饋
您也可以加入U(xiǎn)I中國官方反饋群進(jìn)行反饋!
群號:302892100
備注:反饋問題后@管理員能讓我們及時(shí)了解您的意見

提交需求

賽事與廣告咨詢合作,請?zhí)顚懶枨蟊韱?,我們會在第一時(shí)間與您聯(lián)系!

0/20
0/200

設(shè)計(jì)大賽

  • 設(shè)計(jì)大賽
  • 發(fā)布廣告
  • 發(fā)布招聘
  • 其它需求

提交完成
感謝您對UI中國的支持和信賴!
Spline-輕量3D設(shè)計(jì)神器來了
0.0°
2021-05-26 原創(chuàng)文章 教程 舉報(bào) 26784 97 91 15


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

更新:2021-05-26

收藏

97人已收藏

_阿丹a_

GZH:阿丹的設(shè)計(jì)Lab

  • 14

    作品

  • 1093

    粉絲

  • 36

    關(guān)注

  • 讓我們來聊聊Loading
  • IAClub-無限原子社
  • 2021的10大UI/UX設(shè)計(jì)趨勢解析
  • Sailormoon's Fashion 你的少女時(shí)尚穿搭

    猜你喜歡

      2021-05-26 原創(chuàng)文章 教程 舉報(bào) 26784 97 91 15

      Spline-輕量3D設(shè)計(jì)神器來了

      0.0°

      你確定要舉報(bào)Spline-輕量3D設(shè)計(jì)神器來了?

      如果查出惡意舉報(bào),十天內(nèi)禁止提交任何舉報(bào)申請。

      0/200

      上傳證據(jù): 超過10M的附件請使用網(wǎng)盤地址

      點(diǎn)擊上傳附件

      對誰可見:

      全部設(shè)計(jì)師
      • 全部設(shè)計(jì)師
      • 推薦設(shè)計(jì)師和認(rèn)證設(shè)計(jì)師

      您確認(rèn)要推薦?

      該作品發(fā)布時(shí)間:2021年05月26日

      評分

      完整度

      啟發(fā)性

      勤奮性

      排版布局

      推薦心得

      建議20-200字以內(nèi)

      0/200

      91
      97
      15

      賬號或密碼錯(cuò)誤,請重新輸入

      賬號或密碼錯(cuò)誤,請重新輸入

      登錄

      手機(jī)號

      發(fā)送驗(yàn)證碼 120s 驗(yàn)證碼錯(cuò)誤

      登錄
      第三方賬號登錄