iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
Modern Web

使用 Three.js 打造酷酷 3D 網頁體驗 系列

本系列文章將介紹 Three.js 如何使用並透過實例打造出現今流行的 3D 網頁,適合已有程式背景但對 3D 不了解、或是具有 3D 能力但對 Three.js 語法不熟、沒有很多程式經驗的人。最初會先介紹基本概念,接著透過構建 3D 場景、處理相機與光源、操作幾何體和材質等學習語法,並透過觀察許多線上的例子來製作屬於自己的網頁!接著會進一步探索動畫、shader 以及實現更複雜的效果。最終希望不管是想更了解理論或是實戰的人,都能從中得到幫助。

參賽天數 5 天 | 共 5 篇文章 | 3 人訂閱 訂閱系列文 RSS系列文
DAY 1

[使用 Three.js 打造酷酷 3D 網頁體驗] 簡介——平凡的工程師有一個做酷酷 3D 的夢想

看過來看過來!這邊的內容 (希望會) 很有趣 大家好~ 我最近即將來到我碩士學業的尾聲,雖然說念的是相關科系,並順利的在某 U 遊戲公司實習,但總覺得自己的創意...

2024-09-15 ‧ 由 miya850604 分享
DAY 2

[使用 Three.js 打造酷酷 3D 網頁體驗] 凡事都有個 Hello, World!

上一篇介紹了 Three.js、render、還有 shader 的基本概念,今天我們馬上來把手弄髒吧! 在學習任何語言都會有一個 Hello, World!...

2024-09-16 ‧ 由 miya850604 分享
DAY 3

[使用 Three.js 打造酷酷 3D 網頁體驗] 封印解除——3D 動畫動起來吧

回顧前一篇 昨天有跟著做的人可能會發現,怎麼寫出來的程式沒有畫面 XDD 可能經過一番掙扎後,才發現需要多加了一行 camera.position.z = 5...

2024-09-17 ‧ 由 miya850604 分享
DAY 4

[使用 Three.js 打造酷酷 3D 網頁體驗] 互動の魔法初體驗!相機轉吧轉吧~

延續前一天的成果,我們已經畫了一個簡單的場景、新增了動畫,但有沒有覺得少了些什麼? 假設今天我們在看電影或玩遊戲,鏡位都只有一個,豈不是很無聊~所以我們今天就要...

2024-09-18 ‧ 由 miya850604 分享
DAY 5

[使用 Three.js 打造酷酷 3D 網頁體驗] 矩陣、相機、投影,換了位置換了腦袋

Camera and project matrix object space → world space → camera space → clip spac...

2024-09-19 ‧ 由 miya850604 分享