iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

Three.js 反閘之路 系列

初探 Three.js ,嘗試利用網頁做個簡單的小動畫,藉由這次競賽的機會將所學整理並記錄下來。

鐵人鍊成 | 共 30 篇文章 | 8 人訂閱 訂閱系列文 RSS系列文 團隊來啊!打摳啊!
DAY 1

Day1. 簡介與開發框架

在今年天時地利人和的情況下,與朋友們湊在一起組隊「來啊 ! 打摳啊 !」,秉持著取之於網路,回饋於網路的精神,從 0 開始經過反閘,將自己所學做一次整理並記錄...

2022-09-05 ‧ 由 Yingge170 分享
DAY 2

Day2. 安裝環境 Node.js+Express.js+Three.js

安裝Node.js Node.js官網: https://nodejs.org/en/安裝完後可以透過node --version指令檢查是否安裝成功 安裝Ex...

2022-09-06 ‧ 由 Yingge170 分享
DAY 3

Day3. Express.js 介紹

Express 是一個簡潔、靈活且輕量的框架,定義了路由以用於執行不同的 Http 請求 使用回調函數的參數包括: req(Request) : 表示 Htt...

2022-09-07 ‧ 由 Yingge170 分享
DAY 4

Day4. Three.js 介紹

Three.js Three.js 是一個開源的 JavaScript 庫,基於 WebGL API 所開發,將 WebGL 上複雜的操作包裝成易上手的 API...

2022-09-08 ‧ 由 Yingge170 分享
DAY 5

Day5. Three.js 範例

先跟著官網簡單的範例創建第一個3D場景,連接到 Day3 新增的按鈕 index.js 修改 index.js 新增當 day3 按鈕按下時指定呈現 day...

2022-09-09 ‧ 由 Yingge170 分享
DAY 6

Day6. 軌道控制器

建立完物體,今天來建立軌道控制器及文字 軌道控制器OrbitControls 有了軌道控制器就可以使用鼠標對場景進行操作,使相機圍繞目標進行軌道運動,如旋轉...

2022-09-10 ‧ 由 Yingge170 分享
DAY 7

Day7. FPS監測器

Fps FPS(frame per second),每秒顯示幀數,一般用來描述遊戲或影片每秒撥放多少影格,而人眼每秒可處理約 10-12 個圖像,因此在 12f...

2022-09-11 ‧ 由 Yingge170 分享
DAY 8

Day8. 材質屬性與種類

在 3D 的世界中,所有物件都是由 Geometry(幾何體)+ Material(材質) 所組成。 材質屬性 材質屬性有非常多可控制的項目如常見的...

2022-09-12 ‧ 由 Yingge170 分享
DAY 9

Day9. 幾何體

在3D的世界中,所有物件都是由 Geometry(幾何體)+ Material(材質) 所組成。 幾何體種類 幾何體跟材質一樣分很多種類如常見的 種類...

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

Day10. 建立物件

了解 Geometry (幾何體) 與 Material (材質) 後就可以開始組成物件了 建立物件 先創建頭部及耳朵幾何體,並設定大小 const hea...

2022-09-14 ‧ 由 Yingge170 分享