Details
課程介紹
*預告片配有英語配音。請注意,課程影片未配音。
擁有獨特的優秀 3D 互動網站組合,讓您在就業市場上佔優勢!抓住機會同時磨練您的編碼和 3D 圖形設計才能。
課程福利
獲得這些 Coloso 獨家產品
-
無限制存取 30 多個小時和 50 章內容 -
專業平面設計師的互動式網頁基本技術 -
研究課程練習中使用的材料文件
課程材料詳情
-
基本原始檔- 互動文件
- HTML 文件
- CSS 文件
- JS文件 -
重要練習文件- 建模文件
- 影院 4D 文件 -
關鍵材料包-課程計畫文件
Choi 作品集中的專業平面設計師
3D Web VCODE 產品組合
-
3D 主要視覺效果與動畫 2021 年首爾建築與都市主義雙年展 (日常實踐指導) -
大田能源站3:崛起 影像藝術家
-
「Ottchil,亞洲漆器的塗層輝煌」 韓國國立中央博物館 (根據日常實踐設計) -
Trippic 動態繪圖 一切,不包括語音和聲音
為什麼要上這課程?
脫離傳統網頁版面的3D互動網頁設計課程
如果您在網路上使用 3D 來源遇到困難或發現自己對 2D 創作不滿意,那麼這是您學習傳統運動渲染和即時 3D 運動繪圖以及如何應用它們進行開發的機會動態網站!
此外,In Choi 將向您展示如何利用自動化系統生成和其他內部資源來產生各種版本的 3D 模型、動畫和互動。本課程將透過提升您的設計、開發和規劃能力,幫助您發展成為能夠處理任何媒體相關專案的設計師。
10+課程練習
步驟 1. 3D繪圖與建模
使用 C4D 為圖形設計師練習初級 3D 建模,並建立可在 Web 上使用的建模檔案。
-
建模 1. -
建模 2. -
建模 3.
步驟 2. 實現交互
學習在 Web 上移動 3D繪圖所需的 JavaScript 和 Three.js 基礎知識,並實作六種類型的互動元素。
步驟3. 3D互動網站
設計響應用戶輸入的三個主題空間,並透過建模和渲染創建功能齊全的 3D 互動網站。
**上面的練習是課程上實際製作的範例。
在崔
平面設計師
你好,歡迎光臨!我叫 In Choi,是一名前端開發人員和平面設計師,專注於 2D 和 3D 動態繪圖。
在主修視覺設計後,我開始在 Everyday Practice 圖形公司擔任動態圖形設計師和前端開發人員。
我目前擁有 V-CODE Studio,並一直積極參與當地和國際知名組織(例如Nike、Apple、 Woowahan Brothers等)的動態圖形和 Web 開發專案。
此外,我還與國內設計公司和工作室密切合作,例如Everyday Practice、Ahn 繪圖等。

平面設計師,
在崔
[現職的]
V-CODE工作室首席執行官
[以前的]
Everyday Practice 的動態圖形設計師和前端開發人員
項目及獎項
2022Nike世界盃英雄:3D繪圖與動作
2021 年首爾建築與都市主義雙年展主海報:3D繪圖與運動
2021年Ahn 繪圖公共設計教科書:3D繪圖
2021年為新加坡管理大學開發資訊亭軟體
2020 Woowahan Brothers Baemindaum、技術部落格與Woowahan Brothers Creative 網址:前端開發人員
2020幸福的象徵展:3D繪圖、運動、前端開發者
課程亮點
透過實用技術學習高品質 3D 網頁設計
您不僅將創建有趣的運動網站,還將深入研究複雜的技術,例如將用戶互動直接嵌入到網站上,這將顯著擴展您的前端專業知識。
為網站優化的流行3D繪圖創建方法
我將涵蓋 3D 視覺表達的整個範圍——從基礎到應用和高級技能——從學習如何set網絡可讀格式到利用簡單的 C4D 功能開發時尚的氣球材料和皺紋紋理。
可立即應用於作品集製作和工作的實用知識
我們將探索國內外企業如何使用互動式網站,了解 3D繪圖、建模和創意編碼,並建立引人注目的設計以在現實世界中使用。
課程詳情
你會學到
-
3D繪圖和建模:C4D 簡介透過 30 多個練習,您可以了解如何使用 C4D 工具並獲得基本建模形狀、紋理、顏色、燈光、相機設定、動畫等知識。 -
編碼基礎 1:JavaScript了解 JavaScript 基礎知識,為網頁設計和實作奠定基礎。其中包括各種變數、循環和條件、功能和基於函數的交互作用。 -
編碼基礎 2:Three.js您將了解攝影機角度和運動、全局光源和定向光源,甚至嘗試自己建立它們,所有這些都基於 Three.js(典型的 JavaScript 庫)的基礎知識。
-
創意編碼:6 個迷你練習使用建模設計來建立對點擊、箭頭鍵和滾動做出反應的練習互動和粒子。了解如何在螢幕上添加裝飾並嘗試不同的方法,例如流動的文字。 -
3D互動網站製作1:設計利用我們迄今為止所學到的知識,創建三個主題的互動式網頁。使用 3D 建模、場景合成、紋理和烘焙技術生成可在線上使用的 3D 作品。 -
3D互動網站製作2:發布了解 HTML 和 CSS 的基礎知識,建立場景List以查看您處理的範例將如何顯示在主頁上,進行細微調整,然後繼續進行最終發布
- Unlimited Access
- Best Price
Buy now, get unlimited access.
12/31 (Sat) (UTC-7) Special offer ends soon.
This special offer ends soon.
Buy now and save!
課程
深入觀察
第 01 節:序與準備
第 02 節:3D繪圖和建模簡介:C4D
第 03 節:創意編碼:JavaScript
第 04 節:創意編碼:Three.js
第 05 節:創意編碼:Three.js 練習
第 06 節:高階 3D繪圖與建模:Redshift
第 07 節. 3D 互動網站:設計
第 08 節:3D 互動網站:實施
第 09 節:結論:未來的方向
*本課程的發布日期、課程圖片和相關內容可能會更改,恕不另行通知。
**課程影片可能會分開,以獲得更流暢的觀看體驗
訪談
平面設計師,In Choi
你認為你最大的優點是什麼?
當我剛開始我的職業生涯時,我在 Everyday Practice 設計工作室負責前端開發和動態繪圖。從那時起我就繼續研究這兩個領域。我認為,我在 Web 開發和 3D繪圖領域理解和交流想法的能力是我最大的天賦。
這課程的重點是什麼?
本課程提供全面的課程,讓您在 3D 和真實開發中體驗尖端的、純 2D 互動式網頁設計。我認為以前在 3D 或編碼方面遇到困難的圖形藝術家會發現這非常有用。
您會向誰推薦這課程?
在圖形設計領域,最近比以往任何時候都多的客戶要求 3D繪圖、動態繪圖和網站創建。因此,我向那些希望透過自己的作品集網站給人留下深刻印象並且對編碼、3D繪圖或兩者都感興趣的設計師推薦這門課程。
所需軟體
本課程將使用
- 4D影院
- 紅移,
- Visual Studio 程式碼
- 節點.js
- JavaScript,
- 三.js
請購買並安裝這些軟體以獲得最佳的課程體驗。
*這些軟體和/或材料不會隨課程一起提供。
推薦課程
喜歡這課程嗎?
然後看看這些!
