iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 1 留言 609 瀏覽

技術 HTML5：THREE.JS 新手遇到了問題，求幫忙！

</body> <script> var camera, scene, renderer, geometry, materi...

CarlosCheung ‧ 2023-05-07

1 Like 1 留言 4051 瀏覽

鐵人賽 Modern Web DAY 30

Three.js 學習日誌系列第 30 篇

技術 Day29 - 跟著甜甜圈大師~ 使用three.js + blender 一起製造甜甜圈 (二)

Day29 - 跟著甜甜圈大師~ 使用three.js + blender 一起製造甜甜圈這裡是「Three.js學習日誌」的第29篇，這篇主要在講解如何把...

Mizok ‧ 2022-10-15

0 Like 0 留言 1286 瀏覽

鐵人賽 Modern Web DAY 29

Three.js 學習日誌系列第 29 篇

技術 Day28 - 跟著甜甜圈大師~ 使用three.js + blender 一起製造甜甜圈

Day28 - 跟著甜甜圈大師~ 使用three.js + blender 一起製造甜甜圈這裡是「Three.js學習日誌」的第27篇，這篇主要在講解如何把...

Mizok ‧ 2022-10-14

0 Like 0 留言 676 瀏覽

鐵人賽 Software Development DAY 29

30天成為鍵盤麥可貝：前端視覺特效開發實戰系列第 29 篇

技術 Day29: WebGL Shader—用Shader做全視角內光暈、星球材質

本篇內容一、全視角的內光暈二、內光暈在地球的應用成品一、全視角的內光暈前一篇我們完成了具有內光暈的球體。但是最大的問題，就是當鏡頭轉向時，會...

伍瑪斯 ‧ 2022-10-14

0 Like 0 留言 595 瀏覽

鐵人賽 Software Development DAY 28

30天成為鍵盤麥可貝：前端視覺特效開發實戰系列第 28 篇

技術 Day28: WebGL Shader—透過Shader製作光暈：光暈原理與多種變化形式

Shader是前端視覺特效的重要戰場，而本篇所介紹的shader，不僅只是說明怎麼辦到，還要解釋期原理，並且帶出我們在鐵人賽一開始所打下的重要基礎。 Shade...

伍瑪斯 ‧ 2022-10-13

0 Like 0 留言 687 瀏覽

鐵人賽 Software Development DAY 26

30天成為鍵盤麥可貝：前端視覺特效開發實戰系列第 26 篇

技術 Day26: WebGL Shader—透過Shader製作光暈：速成篇

下面我將介紹如何透過Shader製作一個光暈。分三個階段：用three.js製作Shader材質在vertex shader加上vertexNormal...

伍瑪斯 ‧ 2022-10-11

0 Like 0 留言 1033 瀏覽

鐵人賽 Modern Web DAY 26

Three.js 學習日誌系列第 26 篇

技術 Day25 - 打造質感系3D聊天室 - three.js + socket.io (三)

Day25 - 打造質感系3D聊天室 - three.js + socket.io (三) 這裡是「Three.js學習日誌」的第25篇，這篇是在講解使用th...

Mizok ‧ 2022-10-11

0 Like 0 留言 584 瀏覽

鐵人賽 Modern Web DAY 25

Three.js 學習日誌系列第 25 篇

技術 Day24 - 打造質感系3D聊天室 - three.js + socket.io (二)

Day24 - 打造質感系3D聊天室 - three.js + socket.io(二) 這裡是「Three.js學習日誌」的第24篇，這篇是在講解使用thr...

Mizok ‧ 2022-10-10

0 Like 0 留言 584 瀏覽

鐵人賽 Modern Web DAY 24

Three.js 學習日誌系列第 24 篇

技術 Day23 - 打造質感系3D聊天室 - three.js + socket.io

Day23 - 打造質感系3D聊天室 - three.js + socket.io(一) 這裡是「Three.js學習日誌」的第23篇，這篇是在講解使用thr...

Mizok ‧ 2022-10-09

0 Like 0 留言 927 瀏覽

鐵人賽 Software Development DAY 22

30天成為鍵盤麥可貝：前端視覺特效開發實戰系列第 22 篇

技術 Day22: WebGL Shader—你好啊大哥哥，沒想到你可以到Shader來呢！

Shader是什麼我們所稱呼的Shader，其實是Fragment Shader以及Vertex Shader的合稱。這兩個出現在Program上，使得我們最...

伍瑪斯 ‧ 2022-10-07

0 Like 0 留言 505 瀏覽

鐵人賽 Modern Web DAY 21

Three.js 學習日誌系列第 21 篇

技術 Day20 - 使用Webpack 5打造Three.js的Boilerplate(一)

Day20 - 使用Webpack 5打造Three.js的Boilerplate(一) 這裡是「Three.js學習日誌」的第20篇，這篇的內容是要來講解使...

Mizok ‧ 2022-10-06

0 Like 0 留言 700 瀏覽

鐵人賽 Modern Web DAY 20

Three.js 學習日誌系列第 20 篇

技術 Day19 - Three.js與滑鼠互動操作(三)

Day19 - Three.js與滑鼠互動操作(三) 這裡是「Three.js學習日誌」的第19篇，這篇的內容是要來講解Raycasting的概念。這系列的文...

Mizok ‧ 2022-10-05

0 Like 0 留言 1393 瀏覽

鐵人賽 Software Development DAY 20

30天成為鍵盤麥可貝：前端視覺特效開發實戰系列第 20 篇

技術 Day20: three.js 前端3D視覺特效開發實戰——智慧工廠：倒影特效

鏡面特效能夠非常有效的讓畫面更加豐富。不僅讓物件更有真實感，也可以創造出空間感。上一篇示範過如何做出鏡面反射。而本篇將介紹倒影特效。上一篇提到鏡面反射的原理...

伍瑪斯 ‧ 2022-10-05

1 Like 0 留言 671 瀏覽

鐵人賽 Modern Web DAY 19

Three.js 學習日誌系列第 19 篇

技術 Day18 - Three.js與滑鼠互動操作(二)

Day18 - Three.js與滑鼠互動操作(一) 這裡是「Three.js學習日誌」的第18篇，這一篇主要是接續上一篇的簡易OrbitControl實作，...

Mizok ‧ 2022-10-04

0 Like 0 留言 767 瀏覽

鐵人賽 Software Development DAY 18

30天成為鍵盤麥可貝：前端視覺特效開發實戰系列第 18 篇

技術 Day18: three.js GIS系統開發實戰：成為網頁特效的鹿丸！影子模仿術：陰影的終極原理

陰影集合了3D視覺特效中相當核心、基礎、深奧的一面。它很好實作但又不好抓Bug，且時不時出現「怪怪的」地方。本篇將介紹陰影，他的強大就像鹿丸的影子模仿數一樣。閱...

伍瑪斯 ‧ 2022-10-03

0 Like 0 留言 883 瀏覽

鐵人賽 Modern Web DAY 18

Three.js 學習日誌系列第 18 篇

技術 Day17 - Three.js與滑鼠互動操作(一)

Day17 - Three.js與滑鼠互動操作(一) 這裡是「Three.js學習日誌」的第17篇，本篇主旨是在講解要怎麼讓Three.js與滑鼠的動作相聯繫...

Mizok ‧ 2022-10-03

0 Like 0 留言 1071 瀏覽

鐵人賽 Modern Web DAY 17

Three.js 學習日誌系列第 17 篇

技術 Day16 - 金屬球範例試作(3) - Material解密(六)

Day16 - 金屬球範例試作(3) - Material解密(六) 這裡是「Three.js學習日誌」的第16篇，這是Material章節的最後一篇，主旨是...

Mizok ‧ 2022-10-02

0 Like 0 留言 525 瀏覽

鐵人賽 Modern Web DAY 15

Three.js 學習日誌系列第 15 篇

技術 Day14 - 金屬球範例試作(1) - Material解密(四)

Day14 - 金屬球範例試作(1) - Material解密(四) 這裡是「Three.js學習日誌」的第14篇，本篇的主旨是要透過一個簡單的範例操作，來一...

Mizok ‧ 2022-09-30

0 Like 0 留言 544 瀏覽

鐵人賽 Modern Web DAY 14

Three.js 學習日誌系列第 14 篇

技術 Day13 - 「紋理&種類」- Material解密(三)

Day13 - 「紋理&種類」- Material解密(三) 這裡是「Three.js學習日誌」的第13篇，本篇的主旨是要介紹紋理的種類，這系列的文章...

Mizok ‧ 2022-09-29

0 Like 0 留言 842 瀏覽

鐵人賽 Modern Web DAY 13

Three.js 學習日誌系列第 13 篇

技術 Day12 - 「紋理&種類」- Material解密(二)

Day12 - 「紋理&種類」- Material解密(二) 這裡是「Three.js學習日誌」的第12篇，本篇的主旨是要介紹紋理的種類，這系列的文章...

Mizok ‧ 2022-09-28

0 Like 0 留言 613 瀏覽

鐵人賽 Modern Web DAY 12

Three.js 學習日誌系列第 12 篇

技術 Day11 - 「關於紋理」- Material解密(一)

Day11 - 「關於紋理」- Material解密(一) 這裡是「Three.js學習日誌」的第10篇，本篇的主旨是要介紹紋理與材質的關係，這系列的文章假設...

Mizok ‧ 2022-09-27

0 Like 0 留言 464 瀏覽

鐵人賽 Modern Web DAY 11

Three.js 學習日誌系列第 11 篇

技術 Day10 - 最後補充 - 幾何結構Geometry(四)

Day10 - 最後補充 - 幾何結構Geometry(四) 這裡是「Three.js學習日誌」的第10篇，本篇的主旨是要介紹Geometry的概念，這是Ge...

Mizok ‧ 2022-09-26

0 Like 1 留言 1205 瀏覽

鐵人賽 Modern Web DAY 10

Three.js 學習日誌系列第 10 篇

技術 Day9 - 「點點到位」 - 幾何結構Geometry(三)

Day9 - 「點點到位」 - 幾何結構Geometry(三) 這裡是「Three.js學習日誌」的第9篇，本篇的主旨是要介紹Geometry的概念，還有一些...

Mizok ‧ 2022-09-25

0 Like 1 留言 514 瀏覽

鐵人賽 Modern Web DAY 9

Three.js 學習日誌系列第 9 篇

技術 Day8 - 「面面俱到」 - 幾何結構Geometry(二)

Day8 - 「面面俱到」 - 幾何結構Geometry(二) 這裡是「Three.js學習日誌」的第8篇，本篇的主旨是要介紹Geometry的概念，還有一些...

Mizok ‧ 2022-09-24

0 Like 0 留言 801 瀏覽

鐵人賽 Software Development DAY 9

30天成為鍵盤麥可貝：前端視覺特效開發實戰系列第 9 篇

技術 Day9: Three.js 傲慢的太陽——光的開發與矩形區域光原理

圖片來源艾斯卡諾在正中午最強，就如同three.js的光。你可能會覺得：圖片來源我可不是瞎掰喔，聽我解釋。中午光線最強，就像艾斯卡諾中午最猛，而這是...

伍瑪斯 ‧ 2022-09-24

0 Like 0 留言 547 瀏覽

鐵人賽 Modern Web DAY 8

Three.js 學習日誌系列第 8 篇

技術 Day7 - 「就像在玩摺紙一樣」 - 幾何結構Geometry(一)

Day7 - 「就像在玩摺紙一樣」 - 幾何結構Geometry(一) 這裡是「Three.js學習日誌」的第7篇，本篇的主旨是要介紹Geometry的概念，...

Mizok ‧ 2022-09-23

1 Like 1 留言 608 瀏覽

鐵人賽 Modern Web DAY 7

Three.js 學習日誌系列第 7 篇

技術 Day6 - 事前健身操 - 顏色/動畫循環/群組

Day6 - 事前健身操 - 顏色/動畫循環/群組這裡是「Three.js學習日誌」的第6篇，本篇的主旨是要介紹一些在Three.js中，一些常用的基礎操作...

Mizok ‧ 2022-09-22

0 Like 0 留言 1131 瀏覽

鐵人賽 Software Development DAY 7

30天成為鍵盤麥可貝：前端視覺特效開發實戰系列第 7 篇

技術 Day7: three.js的一方通行：矢量操作——全面釐清向量與底層特性

圖片出處我們都要有矢量（向量）操作能力只是差別是，我們不需要像一方通行那樣，吸入必要的氧氣防止能力消失，我們學會了就可以操作！向量一般來說，是指一個同時...

伍瑪斯 ‧ 2022-09-22

1 Like 0 留言 609 瀏覽

鐵人賽 Modern Web DAY 6

Three.js 學習日誌系列第 6 篇

技術 Day5 - 事前健身操 - 向量與形變

Day5 - 事前健身操 - 向量與形變這裡是「Three.js學習日誌」的第5篇，本篇的主旨是要介紹一些在Three.js中，一些常用的基礎操作，這系列的...

Mizok ‧ 2022-09-21

0 Like 1 留言 583 瀏覽

鐵人賽 Modern Web DAY 5

Three.js 學習日誌系列第 5 篇

技術 Day4 - 進入Three.js的領域 - 續

這裡是「Three.js學習日誌」的第4篇，本篇的主旨是透過試做一個Three.js的Hello World案例，來讓讀者對於Three.js有基本的認識，這...

Mizok ‧ 2022-09-20