iT邦幫忙

three.js相關文章
共有 142 則文章
3 Like 0 留言 30329 瀏覽
鐵人賽 Modern Web DAY 2
用 Three.js 來當個創世神 系列 第 2 篇

達標好文 技術 用 Three.js 來當個創世神 (01)：Three.js 簡介

Three.js 是一套基於 WebGL 開發出的 Javascript 函式庫，它提供了比 WebGL 更簡單的 Javascript API，讓開發者能夠...

ckchuang ‧ 2018-10-17 ‧團隊浪流連九程式匠自然產生的佛系碼農專區
1 Like 0 留言 14692 瀏覽
鐵人賽 Modern Web DAY 3
用 Three.js 來當個創世神 系列 第 3 篇

技術 用 Three.js 來當個創世神 (02)：Three.js 基本元素介紹

在開始動手寫 Three.js 之前，先來簡單了解一些 Three.js 中基本元素的概念：Scene、Camera、Object、Geometry、Mate...

ckchuang ‧ 2018-10-18 ‧團隊浪流連九程式匠自然產生的佛系碼農專區
7 Like 1 留言 14297 瀏覽
鐵人賽 Modern Web DAY 4
用 Three.js 來當個創世神 系列 第 4 篇

技術 用 Three.js 來當個創世神 (03)：Hello Three.js!

在程式語言的學習過程中，第一步當然就是先寫個「Hello world」了！本篇文章將手把手的透過簡單的範例，逐行分析程式碼，建立本系列的第一個 3D 場景及物...

ckchuang ‧ 2018-10-19 ‧團隊浪流連九程式匠自然產生的佛系碼農專區
3 Like 0 留言 9966 瀏覽
鐵人賽 Modern Web DAY 20
用 Three.js 來當個創世神 系列 第 20 篇

技術 用 Three.js 來當個創世神 (19)：3D 物理引擎初探

物理引擎是一套能用來模擬真實世界物理效果的系統，例如：碰撞偵測、加速度、重力、摩擦力、空氣阻力等，以下將會介紹有哪些可以用來輔助 Three.js 的物理引擎...

ckchuang ‧ 2018-11-04 ‧團隊浪流連九程式匠自然產生的佛系碼農專區
3 Like 1 留言 9963 瀏覽
鐵人賽 Modern Web DAY 6
用 Three.js 來當個創世神 系列 第 6 篇

技術 用 Three.js 來當個創世神 (05)：專案實作#2 - 基本人物模型

昨天了解了整個專案的架構，首先就從基本的人物模型開始動手吧！ Photo by Jeremy Thomas on Unsplash 這是本系列第 0...

ckchuang ‧ 2018-10-21 ‧團隊浪流連九程式匠自然產生的佛系碼農專區
3 Like 3 留言 9668 瀏覽
鐵人賽 Modern Web DAY 7
用 Three.js 來當個創世神 系列 第 7 篇

技術 用 Three.js 來當個創世神 (06)：專案實作#3 - OrbitControls、stats.js

今天主要是設定方面的內容，要加上的工具包含 OrbitControls 與 stats.js。一個是軌道控制器，透過拖移及縮放調整相機位置；另一個是畫面刷新頻...

ckchuang ‧ 2018-10-22 ‧團隊浪流連九程式匠自然產生的佛系碼農專區
4 Like 0 留言 9215 瀏覽
鐵人賽 Modern Web DAY 5
用 Three.js 來當個創世神 系列 第 5 篇

技術 用 Three.js 來當個創世神 (04)：專案實作#1 - 專案介紹及初步規劃

今天開始專案實作第一天，先來聊聊接下來的這整個專案要做些什麼吧！ Photo by rawpixel on Unsplash 這是本系列第 04 篇...

ckchuang ‧ 2018-10-20 ‧團隊浪流連九程式匠自然產生的佛系碼農專區
3 Like 0 留言 7985 瀏覽
鐵人賽 Modern Web DAY 10
用 Three.js 來當個創世神 系列 第 10 篇

技術 用 Three.js 來當個創世神 (09)：光源（Light）

今天將介紹四種基礎光源：「環境光（AmbientLight）、點光源（PointLight）、聚光燈（SpotLight）、平行光（DirectionalLi...

ckchuang ‧ 2018-10-25 ‧團隊浪流連九程式匠自然產生的佛系碼農專區
0 Like 1 留言 7334 瀏覽
鐵人賽 Modern Web DAY 16
重新學習網頁設計 系列 第 16 篇

技術 DAY 16. Three.js 相機 Camera

DAY 16. Three.js 相機Camera 相機 Camera 在3D的環境中可以把它當成視角, 我們可以給它定位、關注點, 也可以搭配相機的位置角度來...

Cian ‧ 2017-12-19
4 Like 2 留言 7158 瀏覽
鐵人賽 Modern Web DAY 13
用 Three.js 來當個創世神 系列 第 13 篇

技術 用 Three.js 來當個創世神 (12)：專案實作#7 - Tween.js 動畫實作

遊戲中的苦力怕行走機制是當玩家進入它的警戒範圍後，苦力怕會追著玩家跑，今天就讓我們利用 Tween.js 來實做這個部分，目標是做到能讓苦力怕追蹤鏡頭移動及轉...

ckchuang ‧ 2018-10-28 ‧團隊浪流連九程式匠自然產生的佛系碼農專區
3 Like 0 留言 7043 瀏覽
鐵人賽 Modern Web DAY 11
用 Three.js 來當個創世神 系列 第 11 篇

技術 用 Three.js 來當個創世神 (10)：專案實作#5 - 光影效果

今天將延續昨天的光源主題，在專案中實作光影效果，並透過移動點光源的動畫，讓光影效果的內容更有趣！ Photo by Kristine Weilert o...

ckchuang ‧ 2018-10-26 ‧團隊浪流連九程式匠自然產生的佛系碼農專區
0 Like 0 留言 6604 瀏覽
鐵人賽 Modern Web DAY 15
重新學習網頁設計 系列 第 15 篇

技術 DAY 15. Three.js 渲染器 Renderer

DAY 15. Three.js 渲染器 Renderer 在Three.js 初探文中, 我在最後寫了這麼一段程式來渲染整個場景 // 定義渲染器 let r...

Cian ‧ 2017-12-18
2 Like 0 留言 6551 瀏覽
鐵人賽 Modern Web DAY 8
用 Three.js 來當個創世神 系列 第 8 篇

技術 用 Three.js 來當個創世神 (07)：材質（Material）

在準備幫專案的人物貼上皮膚前，今天先來了解一下材質的種類以及屬性吧！ Photo by Patrick Tomasso on Unsplash 這是...

ckchuang ‧ 2018-10-23 ‧團隊浪流連九程式匠自然產生的佛系碼農專區
3 Like 2 留言 6508 瀏覽
鐵人賽 Modern Web DAY 14
用 Three.js 來當個創世神 系列 第 14 篇

技術 用 Three.js 來當個創世神 (13)：粒子系統初探

粒子系統可以透過輕易地創建許多細小的物體，模擬各種粒子效果，如雪花、雨滴、星空、煙霧、火焰、煙火、爆炸等等，本篇文章讓我們來學習粒子系統的背景知識及簡單的練習...

ckchuang ‧ 2018-10-29 ‧團隊浪流連九程式匠自然產生的佛系碼農專區
4 Like 0 留言 6214 瀏覽
鐵人賽 Modern Web DAY 1
用 Three.js 來當個創世神 系列 第 1 篇

技術 用 Three.js 來當個創世神 (00)：關於此系列文

此系列文將從 Three.js 基本觀念切入，前面幾篇會簡單介紹如何用 Three.js 的基本元素在網頁上畫出 3D 場景與物體，之後直接透過實作遊戲專案，...

ckchuang ‧ 2018-10-16 ‧團隊浪流連九程式匠自然產生的佛系碼農專區
4 Like 1 留言 6183 瀏覽
鐵人賽 Modern Web DAY 9
用 Three.js 來當個創世神 系列 第 9 篇

技術 用 Three.js 來當個創世神 (08)：專案實作#4 - 人物材質與貼圖

在瞭解了材質的種類及屬性後，今天要透過專案實作，來幫前面所建立的苦力怕模型貼上材質與皮膚，讓人物的還原度更高一些！ Photo by Manolo Ch...

ckchuang ‧ 2018-10-24 ‧團隊浪流連九程式匠自然產生的佛系碼農專區
1 Like 0 留言 6070 瀏覽
鐵人賽 Modern Web DAY 19
重新學習網頁設計 系列 第 19 篇

技術 DAY 19. Three.js 材質 Material

DAY 19. Three.js 材質 Material 材質 Material 3D場景中所看到的任何物件都是幾何Geometry加上材質Material的...

Cian ‧ 2017-12-22
3 Like 0 留言 5440 瀏覽
鐵人賽 Modern Web DAY 21
用 Three.js 來當個創世神 系列 第 21 篇

技術 用 Three.js 來當個創世神 (20)：Cannon.js 基本練習

昨天瀏覽過許多 3D 物理引擎後，筆者最後選擇使用 Cannon.js 做為接下來射擊效果的輔助套件，今天先透過練習 Cannon.js 的 Hello wo...

ckchuang ‧ 2018-11-05 ‧團隊浪流連九程式匠自然產生的佛系碼農專區
3 Like 0 留言 5060 瀏覽
鐵人賽 Modern Web DAY 28
用 Three.js 來當個創世神 系列 第 28 篇

技術 用 Three.js 來當個創世神 (27)：專案實作#16 - 遊戲流程、時間倒數、分數統計

昨天完成了計分機制的實作，今天要來將整個遊戲的流程串起來，完成進入遊戲、開始遊戲、遊戲結束、再玩一次的流程，並且實作遊戲中關於時間倒數及結束後的分數統計。...

ckchuang ‧ 2018-11-12 ‧團隊浪流連九程式匠自然產生的佛系碼農專區
3 Like 0 留言 5029 瀏覽
鐵人賽 Modern Web DAY 18
用 Three.js 來當個創世神 系列 第 18 篇

技術 用 Three.js 來當個創世神 (17)：粒子系統 - 爆炸

今天要利用前面練習過的粒子系統，學習如何在網頁上實作 3D 爆炸的特效，並會透過 dat.GUI 來觸發爆炸、改變爆炸粒子尺寸、相機參數來測試更合適的視覺效果...

ckchuang ‧ 2018-11-02 ‧團隊浪流連九程式匠自然產生的佛系碼農專區
0 Like 1 留言 5027 瀏覽
鐵人賽 Modern Web DAY 6
WebGL 與 Three.js 初探 系列 第 6 篇

技術 [Day6] three.js 前置 webGL 修羅道（3) - 動畫與 varying

[Day6] webGL 修羅道(3) - Animation 與 varying demo 昨天我們介紹完了如何傳遞資料給著色器，並且透過著色器畫了三個點，昨...

愷開 ‧ 2016-12-20
1 Like 1 留言 5003 瀏覽
鐵人賽 Modern Web DAY 16
用 Three.js 來當個創世神 系列 第 16 篇

技術 用 Three.js 來當個創世神 (15)：粒子系統 - 雪花 Part.2

You know nothing, Jon Snow. 在實作粒子系統的動畫效果時，踩到了個大坑，本篇將會繼續完成前一天的雪花飄落動畫，並分享實作中遇到的問題...

ckchuang ‧ 2018-10-31 ‧團隊浪流連九程式匠自然產生的佛系碼農專區
0 Like 0 留言 4794 瀏覽
鐵人賽 Modern Web DAY 20
重新學習網頁設計 系列 第 20 篇

技術 DAY 20. Three.js 紋理 Texture

DAY 20. Three.js 紋理 Texture 紋理 Texture 紋理Texture並不是建立一個3D場景必要的存在, 沒有紋理Texture一樣可...

Cian ‧ 2017-12-23
2 Like 0 留言 4757 瀏覽
鐵人賽 Modern Web DAY 30
用 Three.js 來當個創世神 系列 第 30 篇

技術 用 Three.js 來當個創世神 (29)：大綱與 Three.js 學習資源

本系列文也即將接近尾聲，此篇會帶各位讀者瀏覽整個系列文的大綱涵蓋了哪些內容，並且最後會分享這兩個月以來的學習資源，提供對 Three.js 有興趣的讀者做更進...

ckchuang ‧ 2018-11-14 ‧團隊浪流連九程式匠自然產生的佛系碼農專區
1 Like 1 留言 4727 瀏覽
鐵人賽 Modern Web DAY 22
用 Three.js 來當個創世神 系列 第 22 篇

技術 用 Three.js 來當個創世神 (21)：專案實作#10 - 使用 PointerLockControls 實現射擊遊戲視角 Part.1

眼見鐵人賽已經要接近尾聲，接下來幾天將邊實現射擊效果邊直接整合專案，而為了達成射擊遊戲的條件，首先就需要設定一個可以根據鼠標瞄準的第一人稱視角控制器，以下我們...

ckchuang ‧ 2018-11-06 ‧團隊浪流連九程式匠自然產生的佛系碼農專區
1 Like 1 留言 4709 瀏覽
鐵人賽 Modern Web DAY 29
用 Three.js 來當個創世神 系列 第 29 篇

技術 用 Three.js 來當個創世神 (28)：專案實作#17 - 遊戲完成！

今天是專案的最後一個 Part 啦！要來加入背景音效、爆炸音效、射擊音效，並做場景中的草地貼圖、磚塊貼圖與光源調整，另外最後會試著練習載入外部模型做個完整的收...

ckchuang ‧ 2018-11-13 ‧團隊浪流連九程式匠自然產生的佛系碼農專區
3 Like 4 留言 4603 瀏覽
鐵人賽 Modern Web DAY 15
用 Three.js 來當個創世神 系列 第 15 篇

技術 用 Three.js 來當個創世神 (14)：粒子系統 - 雪花 Part.1

瞭解了基本的粒子系統如何建立後，今天要來練習實作粒子系統中常見的應用：雪花。以下將會透過建立粒子系統、載入貼圖、雪花飄落動畫來一步步做出華麗的粒子特效。...

ckchuang ‧ 2018-10-30 ‧團隊浪流連九程式匠自然產生的佛系碼農專區
0 Like 0 留言 4565 瀏覽
鐵人賽 Modern Web DAY 17
重新學習網頁設計 系列 第 17 篇

技術 DAY 17. Three.js 光源 Light

DAY 17. Three.js 光源 Light 在3D的應用當中, 光源Light是相當普遍的運用, 如果該3D場景Scene沒有光源, 通常會是黑漆漆的一...

Cian ‧ 2017-12-20
2 Like 0 留言 4514 瀏覽
鐵人賽 Modern Web DAY 12
用 Three.js 來當個創世神 系列 第 12 篇

技術 用 Three.js 來當個創世神 (11)：專案實作#6 - 人物基本動畫

在昨天的移動點光源實作上，我們透過更改光源的位置來達到動畫的效果，今天讓我們深入動畫的操作並實際上透過讓苦力怕擺頭、走動、膨脹的動作來練習基本動畫。 P...

ckchuang ‧ 2018-10-27 ‧團隊浪流連九程式匠自然產生的佛系碼農專區
4 Like 5 留言 4444 瀏覽
鐵人賽 Modern Web DAY 30
用 Three.js 來當個創世神 系列 第 31 篇

技術 用 Three.js 來當個創世神 (30)：總結與心得

終於也來到本系列文最後一篇啦！可以睡覺啦！ 緣起 其實去年就有想參加的念頭了，但始終覺得自己好像網頁開發的技術也只學了一些皮毛，沒什麼材料可以寫就不了了...

ckchuang ‧ 2018-11-14 ‧團隊浪流連九程式匠自然產生的佛系碼農專區
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23096 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙