Day2 - 從webGL的基礎開始?(二) 這裡是「Three.js學習日誌」的第2篇,本篇的主旨是藉由描述一些簡單的webGL基礎,來做為引導three....
圖片出處 我們都要有矢量(向量)操作能力 只是差別是,我們不需要像一方通行那樣,吸入必要的氧氣防止能力消失,我們學會了就可以操作! 向量一般來說,是指一個同時...
Day0 - 為什麼想要寫這個主題? 這裡是「Three.js學習日誌」的第0篇,本篇的主旨在於講述本次參賽的想法 心理的嚮往 四年前我剛成為前端工程師的時...
Day16 - 金屬球範例試作(3) - Material解密(六) 這裡是「Three.js學習日誌」的第16篇,這是Material章節的最後一篇,主旨是...
Day25 - 打造質感系3D聊天室 - three.js + socket.io (三) 這裡是「Three.js學習日誌」的第25篇,這篇是在講解使用th...
Shader是什麼 我們所稱呼的Shader,其實是Fragment Shader以及Vertex Shader的合稱。這兩個出現在Program上,使得我們最...
Day17 - Three.js與滑鼠互動操作(一) 這裡是「Three.js學習日誌」的第17篇,本篇主旨是在講解要怎麼讓Three.js與滑鼠的動作相聯繫...
Day12 - 「紋理&種類」- Material解密(二) 這裡是「Three.js學習日誌」的第12篇,本篇的主旨是要介紹紋理的種類,這系列的文章...
圖片來源 艾斯卡諾在正中午最強,就如同three.js的光。你可能會覺得: 圖片來源 我可不是瞎掰喔,聽我解釋。 中午光線最強,就像艾斯卡諾中午最猛,而這是...
陰影集合了3D視覺特效中相當核心、基礎、深奧的一面。它很好實作但又不好抓Bug,且時不時出現「怪怪的」地方。本篇將介紹陰影,他的強大就像鹿丸的影子模仿數一樣。閱...
Day19 - Three.js與滑鼠互動操作(三) 這裡是「Three.js學習日誌」的第19篇,這篇的內容是要來講解Raycasting的概念。這系列的文...
下面我將介紹如何透過Shader製作一個光暈。 分三個階段: 用three.js製作Shader材質 在vertex shader加上vertexNormal...
Day18 - Three.js與滑鼠互動操作(一) 這裡是「Three.js學習日誌」的第18篇,這一篇主要是接續上一篇的簡易OrbitControl實作,...
本篇內容 一、全視角的內光暈 二、內光暈在地球的應用 成品 一、全視角的內光暈 前一篇我們完成了具有內光暈的球體。 但是最大的問題,就是當鏡頭轉向時,會...
Day11 - 「關於紋理」- Material解密(一) 這裡是「Three.js學習日誌」的第10篇,本篇的主旨是要介紹紋理與材質的關係,這系列的文章假設...
Day6 - 事前健身操 - 顏色/動畫循環/群組 這裡是「Three.js學習日誌」的第6篇,本篇的主旨是要介紹一些在Three.js中,一些常用的基礎操作...
Day24 - 打造質感系3D聊天室 - three.js + socket.io(二) 這裡是「Three.js學習日誌」的第24篇,這篇是在講解使用thr...
</body> <script> var camera, scene, renderer, geometry, materi...
Day5 - 事前健身操 - 向量與形變 這裡是「Three.js學習日誌」的第5篇,本篇的主旨是要介紹一些在Three.js中,一些常用的基礎操作,這系列的...
Shader是前端視覺特效的重要戰場,而本篇所介紹的shader,不僅只是說明怎麼辦到,還要解釋期原理,並且帶出我們在鐵人賽一開始所打下的重要基礎。 Shade...
這裡是「Three.js學習日誌」的第4篇,本篇的主旨是透過試做一個Three.js的Hello World案例,來讓讀者對於Three.js有基本的認識,這...
Day23 - 打造質感系3D聊天室 - three.js + socket.io(一) 這裡是「Three.js學習日誌」的第23篇,這篇是在講解使用thr...
Day7 - 「就像在玩摺紙一樣」 - 幾何結構Geometry(一) 這裡是「Three.js學習日誌」的第7篇,本篇的主旨是要介紹Geometry的概念,...
Day13 - 「紋理&種類」- Material解密(三) 這裡是「Three.js學習日誌」的第13篇,本篇的主旨是要介紹紋理的種類,這系列的文章...
Day14 - 金屬球範例試作(1) - Material解密(四) 這裡是「Three.js學習日誌」的第14篇,本篇的主旨是要透過一個簡單的範例操作,來一...
Day8 - 「面面俱到」 - 幾何結構Geometry(二) 這裡是「Three.js學習日誌」的第8篇,本篇的主旨是要介紹Geometry的概念,還有一些...
Day20 - 使用Webpack 5打造Three.js的Boilerplate(一) 這裡是「Three.js學習日誌」的第20篇,這篇的內容是要來講解使...
Day10 - 最後補充 - 幾何結構Geometry(四) 這裡是「Three.js學習日誌」的第10篇,本篇的主旨是要介紹Geometry的概念,這是Ge...