iT邦幫忙

three.js相關文章
共有 42 則文章
鐵人賽 Modern Web DAY 30

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

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

鐵人賽 Modern Web DAY 30

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

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

鐵人賽 Modern Web DAY 29

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

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

鐵人賽 Modern Web DAY 28

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

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

鐵人賽 Modern Web DAY 27

技術 用 Three.js 來當個創世神 (26):專案實作#15 - 計分機制

昨天確定了遊戲內容的細節後,今天要先來實作計分機制的部分,並會套用上之前爆炸的特效,以及調整子彈威力參數與一些細節的優化。 Photo by rawpi...

鐵人賽 Modern Web DAY 26

技術 用 Three.js 來當個創世神 (25):專案實作#14 - 遊戲內容設計

在前面專案規劃內容中,已經在昨天完成了人物模型及物理射擊兩大部分,終於要來到最後的整合階段了,但其中的遊戲內容當初並沒有深入設計,所以今天花了一整天在做企劃與...

鐵人賽 Modern Web DAY 25

技術 用 Three.js 來當個創世神 (24):專案實作#13 - 子彈射擊效果

今天終於要來實作本專案的靈魂了!沒錯!就是射擊效果,一款射擊遊戲不能發射子彈完全是沒有靈魂啊,而除了完成射擊效果外,還要來把昨天沒做完的苦力怕剛體化及比例調整...

鐵人賽 Modern Web DAY 24

技術 用 Three.js 來當個創世神 (23):專案實作#12 - 導入 Cannon.js 物理效果

今天要來將 Cannon.js 的物理效果導入到專案中,讓場景中的物體都具有物理剛體效果,並且會做專案整合的工程,將前面所有開發的功能補齊,方便後續的開發。...

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 Modern Web DAY 22

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

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

鐵人賽 Modern Web DAY 21

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

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

鐵人賽 Modern Web DAY 20

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

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

鐵人賽 Modern Web DAY 19

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

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

鐵人賽 Modern Web DAY 18

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

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

鐵人賽 Modern Web DAY 17

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

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

鐵人賽 Modern Web DAY 16

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

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

鐵人賽 Modern Web DAY 15

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

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

鐵人賽 Modern Web DAY 14

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

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

鐵人賽 Modern Web DAY 13

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

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

鐵人賽 Modern Web DAY 12

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

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

鐵人賽 Modern Web DAY 11

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

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

鐵人賽 Modern Web DAY 10

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

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

鐵人賽 Modern Web DAY 9

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

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

鐵人賽 Modern Web DAY 8

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

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

鐵人賽 Modern Web DAY 7

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

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

鐵人賽 Modern Web DAY 6

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

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

鐵人賽 Modern Web DAY 5

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

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

鐵人賽 Modern Web DAY 4

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

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

鐵人賽 Modern Web DAY 3

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

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

鐵人賽 Modern Web DAY 2

技術 用 Three.js 來當個創世神 (01):Three.js 簡介

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