iT邦幫忙

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

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

前情提要，昨天為了達成射擊遊戲中利用鼠標瞄準的條件，已經完成了 PointerLockControls 的初始化，今天會完成畫面更新中關於碰撞、重力、及速度的...

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

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

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

ckchuang ‧ 2018-11-06 ‧團隊浪流連九程式匠自然產生的佛系碼農專區
3 Like 0 留言 7396 瀏覽
鐵人賽 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 留言 11933 瀏覽
鐵人賽 Modern Web DAY 20
用 Three.js 來當個創世神 系列 第 20 篇

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

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

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

技術 用 Three.js 來當個創世神 (18)：專案實作#9 - 爆炸特效

昨天學會了如何利用粒子系統做爆炸特效，今天我們要來將特效套用至專案中，來實作苦力怕自爆的效果，並且利用更多層的爆炸、由黑到白不同的顏色，來模擬得更真實一些。...

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

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

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

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

技術 用 Three.js 來當個創世神 (16)：專案實作#8 - 粒子特效場景

今天將利用前兩天製作的雪花特效，套用至專案中，除了調整邊界值外，還會試著更換粒子貼圖來達到不一樣場景的效果！ Photo by Fancycrave o...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

技術 DAY 22. Three.js 總結

DAY 22. Three.js 總結 前面連續幾天陸陸續續介紹了關於Three最重要的幾個重點因為每天時間有限的關係沒辦法給予很詳細的介紹，但希望有給大家一些...

Cian ‧ 2017-12-25
0 Like 0 留言 5057 瀏覽
鐵人賽 Modern Web DAY 21
重新學習網頁設計 系列 第 21 篇

技術 DAY 21. Three.js 載入器 Loader

DAY 21. Three.js 載入器 Loader 雖然Three提供了很多Geometory供我們使用，但真實世界的需求當然不可能那麼簡單，我們很有可能需...

Cian ‧ 2017-12-24
0 Like 0 留言 5412 瀏覽
鐵人賽 Modern Web DAY 20
重新學習網頁設計 系列 第 20 篇

技術 DAY 20. Three.js 紋理 Texture

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

Cian ‧ 2017-12-23
1 Like 0 留言 7170 瀏覽
鐵人賽 Modern Web DAY 19
重新學習網頁設計 系列 第 19 篇

技術 DAY 19. Three.js 材質 Material

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

Cian ‧ 2017-12-22
0 Like 0 留言 4702 瀏覽
鐵人賽 Modern Web DAY 18
重新學習網頁設計 系列 第 18 篇

技術 DAY 18 Three.js 幾何 Geometry

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

Cian ‧ 2017-12-21
0 Like 0 留言 5397 瀏覽
鐵人賽 Modern Web DAY 17
重新學習網頁設計 系列 第 17 篇

技術 DAY 17. Three.js 光源 Light

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

Cian ‧ 2017-12-20
0 Like 1 留言 8285 瀏覽
鐵人賽 Modern Web DAY 16
重新學習網頁設計 系列 第 16 篇

技術 DAY 16. Three.js 相機 Camera

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

Cian ‧ 2017-12-19
iThome鐵人賽
參賽組數
902 組
團體組數
37 組
累計文章數
19830 篇
完賽人數
528 人
iT+看影片追技術 看影片追技術 看更多
熱門tag
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 17th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# linux windows server css react
熱門問題
熱門回答
熱門文章
IT邦幫忙