iT邦幫忙

鐵人檔案

2017 iT 邦幫忙鐵人賽
回列表
Modern Web

WebGL 與 Three.js 初探 系列

隨著科技越來越發達,繪圖引擎越來越先進,網頁的互動也增加了更多可能性。
當 3D 互動已經不再是瓶頸,webGL 逐漸成熟、甚至還有 webVR 正逐漸萌芽,身為工程師的我們也得趕快跟上腳步。
趁現在,讓我們來看看這些複雜卻又吸引人的技術吧!

鐵人鍊成 | 共 30 篇文章 | 106 人訂閱 訂閱系列文 RSS系列文
DAY 21

[Day21] Three.js 理論篇 - 碰撞檢測淺談

three.js API 包山包海,除了一般常見的幾何圖形、材質之外,loader、helper 也是一大利器,如果實務當中牽扯到數學運算,three.js 的...

2017-01-04 ‧ 由 愷開 分享
DAY 22

[Day22] Three.js CSS3DRenderer

在 three.js 裡頭,我們有時會發現某些範例裡頭,會使用到一些在官方文件怎樣都查不到的 API。這有以下兩種情形: Three.js 改版常常會改名一些...

2017-01-05 ‧ 由 愷開 分享
DAY 23

[Day23] Three.js - CSS3DRenderer 實作

[文章待補中]今天我們要把嵌入 iframe 的 youtube 組合成為一個立方體。讓 three.js 也有直接操作 DOM 的能力。 THREE.Grou...

2017-01-06 ‧ 由 愷開 分享
DAY 24

[Day24] Three.js Loader 介紹

今天來介紹 three.js 的 loader。 在使用 three.js 的過程中,相信各位也發現了,three.js 本身的幾何圖形只能用來做一些比較基本的...

2017-01-07 ‧ 由 愷開 分享
DAY 25

[Day25] webVR 中的 jquery - aframe.js introduction

隨著 VR 的技術越來越進步,VR 的應用已經逐漸融入我們的生活中,像是不久前 google 推出的 CardBoard,HTC 的HTC Vive、Oculu...

2017-01-08 ‧ 由 愷開 分享
DAY 26

[Day26] aframe ECS 概覽

A-Frame 是一個 ECS 框架,我們昨天有提到。跟 three.js 的開發方式(繼承為主)不同。 ECS模式是遊戲開發中常見的模式,比一般遊戲開發的階層...

2017-01-09 ‧ 由 愷開 分享
DAY 27

[Day27] aframe 範例實作

今天我們會從官方介紹的 aframe 範例中開始實作。 aframe example 內容待補上。 Hello World Image 全景圖

2017-01-10 ‧ 由 愷開 分享
DAY 28

[Day28] webGL 番外篇 - 為什麼你該關注 VR

最近越來越熱門的虛擬實境(vitrual reality)、全景圖、360 影片,雖然主流的使用項目上仍然在電影、遊戲產業等娛樂項目上,但是其實停下來思考一下應...

2017-01-11 ‧ 由 愷開 分享
DAY 29

[Day29] Aframe 範例 - 3D 與 d3.js

除了 3D 場景製作比較方便之外,我們可以使用 aframe 搭配其他不同的框架來做另類的前端呈現。今天的介紹主要是讓各位了解,除了遊戲場景的應用之外,我們也可...

2017-01-12 ‧ 由 愷開 分享
DAY 30

[Day30] aframe 常見 API & 完賽心得

前幾天簡單地介紹了 aframe 基本使用跟 webVR 的趨勢。今天會介紹一些在 aframe 當中常用的技巧和 tag 當作結尾。 Animation a-...

2017-01-13 ‧ 由 愷開 分享