技術 [Da13] Three.js API 簡介

[Day12] webGL 框架 - Three.js 簡介 three.js 是一個非常強大的 webGL 函式庫，將很多功能都封裝成了一個個物件，主要透過繼...

技術 [Day2] 為什麼是 webGL 與 Three.js？

為什麼是 webGL 我知道，es6 語法簡介的迷人、react 的火紅、webpack...框架不斷竄出，從今年的鐵人幫大賽就看得出來。 不過，前端的可能性絕...

技術 [Day10] 寫在 Three.js 之前 - 投影基礎

雖然 three.js 幫我們簡化了許多複雜的工作，可以很快地用簡單 API 的方式馬上畫出圖形。不過我們仍然要介紹一下背後的原理，之後操作起來才會得心應手。...

技術 [Day11 聖誕節特輯] Three.js - 畫一棵幾何聖誕樹吧！

今天是聖誕節，讓我們一起畫一棵簡單的聖誕樹吧！ 基本場景設定 我們設置一下基本的場景 const scene = new THREE.Scene(); cons...

技術 [Day7] webGL修羅道（4） - 3D 與動畫

[Day7] webGL修羅道 - 3D 與動畫 3D 圖形基礎 在電腦上看到圖形的方式，通常是透過 camera 的概念。可以想像人的眼睛（或螢幕）就是一台相...

技術 [Day18] Three.js 實戰(1) - 全景圖實作

到目前為止，我們已經有了基礎了 three.js 知識，現在就讓我們一起來實作一些有用的效果吧！ three.js 能實作的特效非常多樣，隨便在網路上或是 c...

技術 Day 09 「是糖，我加了語法糖」- R3F (React-Three-Fiber) 簡介

它為了解決什麼問題而生？ 我在上一篇文章提過得 Three.js 封裝了 WebGL 減輕了不少開發者的負擔，但是為了加入一個物件並渲染出來仍要經過： 1....

技術 [Day 6] Three.js 的 Objects Rotation

大家好, 今日在講 object rotation 前先介紹一下scale, scale 就是將object按數值放大 如果我想將x-axis 長度放大1.5倍...

技術 [Day 3] Three.js 的安裝

尋日寫錯咗今日先第三日 首先,我的電腦配置:11th Gen Intel(R) Core(TM) i5-1135G716GB Ram512 GB Hard Di...

技術 [Day 1] Three.js 的有關結構

我相信睇得呢一篇文章嘅人都知Three.js是用來做什麼但Three.js的結構是怎樣? 認識Three.js 之前一定要知 OpenGL 同WebGL Op...

技術 [Day 9] Three.js - Mouse Control

來到第九日,今日講一講mouse control, 即係用滑鼠去移動object嘅方法, 下圖就係今日要做嘅目標 第一我地係要諗點樣可以知道滑鼠喺螢幕上的位置...

技術 [Day 5] Three.js 的攝錄機(Camera)的位置

喺第三日介紹過攝錄機的不同位置, 但現在的object只是一個一種顏色的cube, 難以分辨它的形狀同位置 何謂X, Y, Z axis?X axis +1係指...

技術 [Day 8] Three.js Animations - gsap Library

今日會延續昨天講的animation, 會用到gsap library喺 terminal 輸入 npm install –save gsap@3.5.1就會自...

技術 [Day 11] Three.js - Geometries

Build in Geometries - 喺本身three.js 個library到已經有好多build in geometries PlaneGeometr...

技術 Day 08 3D 站立在瀏覽器上 (Three.js 簡介)

它解決了什麼問題？ Three.js 是 WebGL 的高階封裝，讓開發者能夠專注在開發應用，而不用浪費太多心思在操作 WebGL。 WebGL OpenGL...

技術 [Day 3] Three.js 四個重要元素

要令到3D物件呈現喺瀏覽器上最主要有四個必要元素 場景(Scene) 物件(Object) 攝錄機(Camera) 渲染器 (Renderer) 場景 場景...

技術 [Day 12] Three.js - Debug UI

做到而家覺得每次改完都要save再睇過成果會好麻煩, 而家用dat.GUI去喺網頁道改邊個參數內直接睇唔同形狀嘅變化其實網上面仲有好多不同種類的GUI, 而da...

技術 [Day 7] Three.js Animations

由於之前淨色的object比較難睇, 現在會用wireframe: true 去令到圖形更加易理解 wireframe: true 而將第六日最後的一張圖改...

技術 [Day 10] Three.js - Screen Size

今日要講一講three.js 嘅 screen size, 之前一直用緊800x600 嘅 aspect ratio 方便之前測試再用以下的code來讀取wid...