iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

30天學習 3D網頁 - spline 系列

一直在想網頁能如何變的更創新,又不會跟別人撞題,就從網路上找資料、看影片,最後決定,朝3D的方向去延伸,因為我覺得立體的網頁能吸引使用者的目光,使他們停留並觀看,所以打算趁這次機會嘗試看看。

參賽天數 13 天 | 共 30 篇文章 | 9 人訂閱 訂閱系列文 RSS系列文
DAY 13

Spline - Day 21 – 可以按的計算機 icon + 聲音 – (1)

第21天,要來做的是簡單的計算機加上動畫,這個簡單的計算機我是從apple的計算機icon做一個3D圖型再加上動畫,其實做起來沒有甚麼難度,但是,我覺得最困難的...

2022-10-01 ‧ 由 yufangzheng 分享
DAY 13

Spline - Day 22 – 可以按的計算機icon + 聲音 – (2)

第22天,延續昨天的計算機icon,今天介紹加了動畫跟聲音,如何讓它同時按下去又發出聲音呢~ 下面我列了幾個重點 : 點擊圓形按鍵,新增狀態跟交互,選滑鼠按下...

2022-10-02 ‧ 由 yufangzheng 分享
DAY 13

Spline - Day 23 – 人 – (頭)

第23天,今天要來做一個嘻哈的男生的人頭,它會帶帽子,戴著黑色的口罩,看起來難相處的感覺,那它穿著會分成上半身跟下半身分成兩天說。 以下,我會列幾個關於做出那個...

2022-10-03 ‧ 由 yufangzheng 分享
DAY 13

Spline - Day 24 – 人 – (頭部 + 上半身)

第24天,要做的是人的上半身,我是做簡單的身體版本,若要做複雜的衣服跟裝飾會很花時間,所以我只有做簡單的身體模型介紹。 下面,一樣會列幾個關於上半身的重點: 1...

2022-10-04 ‧ 由 yufangzheng 分享
DAY 13

Spline - Day 25 – 人 + 動畫 (轉身體 + 眨眼)

第25天,我做的動畫是跟著滑鼠然後轉動頭或身體,再加上眨眼的效果,做出來真的感覺挺可愛,又有點好玩,因為他就會變成一個魁儡,任你操控,然後,做的方法其實不難,下...

2022-10-05 ‧ 由 yufangzheng 分享
DAY 13

Spline - Day 26 – Spline 結合網頁

第26天,要來做的是把Spline結合網頁,我覺得可以先準備好一個網頁,再準備一個做好的Spline 的圖形,這樣做的時候會更快速。 下面簡單的列了幾個步驟 :...

2022-10-06 ‧ 由 yufangzheng 分享
DAY 13

Spline - Day 27 – Game Controls (介紹)

第27天,我做了一個小白兔,然後我想讓它爬樓梯,這個要怎麼做呢~其實Spline 有一個很酷的功能,叫遊戲控制器(Game Controls),它可以讓選取的物...

2022-10-07 ‧ 由 yufangzheng 分享
DAY 13

Spline - Day 28 – Game Controls (創物件)

第28天,要來創的物件是小兔子跟樓梯加地板,其中,我覺得比較難的大概就是兔子的耳朵,但是,樓梯倒是挺簡單的,明天會說怎麼控制小兔子,讓它爬樓梯。 下面會說一些關...

2022-10-08 ‧ 由 yufangzheng 分享
DAY 13

Spline - Day 29 – Game Controls (控制物件)

第29天,延續昨天的兔子跟樓梯,今天要加遊戲控制器,讓我們可以透過鍵盤跟滑鼠來操控,詳細可以看Day27,接下來我就要來說一下關於控制兔子的小細節 : 桌面控...

2022-10-09 ‧ 由 yufangzheng 分享
DAY 13

Spline - Day 30 – 總結 + 完賽心得

第30天,我覺得Spline 其實很簡單入門,不用打複雜的程式碼就能呈現3D 的效果,但是就是調整圖形的部分會特別花時間,要一直反覆確認三軸的位置會不會卡到,或...

2022-10-10 ‧ 由 yufangzheng 分享