原创 three.js 利用uv和ThreeBSP製作一個快遞櫃
最近有three網友，問我要不要學習blender，其實我感覺學習一下也無妨，不過花大量時間精通，尚可不必，術業有專攻給別人留一條路吧，哈哈。那我我們就是用ThreeBSP和uv貼圖的知識來製作一個定製化的快遞櫃，先上圖，在線案例請點擊博客
2020-08-18 13:49:16
原创 three.js UV映射簡述
今天郭先生來說一說uv映射，什麼是uv映射？uv映射就是將二維的貼圖映射到對象的一個面（或者多個面）上。說到這個問題，我們就不得不瞭解一下Geometry的點、面和uv的結構。我們以BoxGeometry爲例。 new THREE.Box
2020-08-18 13:49:16
原创 three.js 着色器材質內置變量
這篇郭先生說一下three.js着色器的內置變量，分別是 gl_PointSize：在點渲染模式中，控制方形點區域渲染像素大小（注意這裏是像素大小，而不是three.js單位，因此在移動相機是，所看到該點在屏幕中的大小不變） gl_Pos
2020-08-14 13:49:15
原创 three.js 製作機房（下）
這一篇書接上文，說一說剩下的一些模塊。 1. 機箱存儲佔用比率 機箱存儲佔用比其實很簡單，就是在機箱上新加一個組即可，然後根據比率值來設置顏色，這個顏色我們去HSL(0.4,0.8,0.5) ~ HSL(0,0.8,0.5)就是從綠色到紅色
2020-08-12 13:49:08
原创 three.js 製作機房（上）
three.js使用的人太少了，一個博文就幾百個人看，之前發js基礎哪怕是d3都會有幾千的閱讀量，看看以後考慮說一說d3了，哈哈。吐槽完畢迴歸正題。前幾天郭先生看到網上有人開發了3D機房，正愁博客沒什麼寫的，於是昨天熬夜也做了一個，今天就把
2020-08-11 13:49:00
原创 three.js 着色器材質之紋理
今天郭先生說一說如何在three.js着色器中添加紋理，先看看今天要完成的效果，在線案例請點擊博客原文。 這裏我們分別引入三個紋理，分別是地球的表面紋理，對應的海拔灰度圖，和雲朵的紋理。使用表面紋理還是地球的外貌，海拔灰度圖給地球添加凹凸
2020-08-10 13:49:04
原创 three.js 着色器材質之變量（三）
這篇郭先生在練習一下着色器變量，在度娘上面或者官網上經常看到類似水波一樣的效果，這篇就試着做一個這樣的效果，順便鞏固一下頂點着色器和片元着色器，畢竟多多練習才能更好地掌握。效果如下圖，在線案例請點擊博客原文。 這裏用到了用到了頂點着色器和
2020-08-07 13:48:54
原创 three.js 着色器材質之變量（二）
上一篇郭先生在例子中用到了着色器變量中的uniform和varying。這篇繼續結合例子將一下attribute變量，在使用過程中也發現由於three.js的版本迭代，之前的一些屬性和參數已經發生了改變，ShaderMaterial也不需要
2020-08-06 13:49:00
原创 three.js 着色器材質之變量（一）
上一篇說頂點着色器和片元着色器的皮毛，這篇郭先生說一說着色器變量，通過變量可以設置材質。先看看今天要做的如下圖。在線案例請點擊博客原文。 在這個案例之前，我們先複習一下着色器變量 Uniforms是所有頂點都具有相同的值的變量。 比如燈
2020-08-05 13:48:59
原创 three.js 着色器材質之glsl內置函數
郭先生髮現在開始學習three.js着色器材質時，我們經常會無從下手，辛苦寫下的着色器，也會因莫名的報錯而手足無措。原因是着色器材質它涉及到另一種語言–GLSL，只有懂了這個語言，我們才能更好的寫出着色器材質，利用好的我們的GPU。這篇說一
2020-08-04 13:49:36
原创 three.js 着色器材質之初識着色器
說起three.js，着色器材質總是繞不過的話題，今天郭先生就說一說什麼是着色器材質。着色器材質是很需要靈感和數學知識的，可以用簡短的代碼和繪製出十分豐富的圖像，可以說着色器材質是脫離three.js的另一塊知識，因此它十分難講，我們只能在
2020-08-03 13:50:24
原创 three.js 自制骨骼動畫（二）
上一篇說了一下自制骨骼動畫，這一篇郭先生使用幀動畫讓骨骼動畫動起來。幀動畫是一套比較完善的動畫剪輯方法，詳細我的api我們就不多說了，網上有很多例子，自行查找學習。在線案例請點擊博客原文。話不多說先上圖。 1. 初始化一些四元數 首先我們
2020-08-01 13:48:45
原创 three.js 自制骨骼動畫（一）
上一篇郭先生解析了一下官方的骨骼動畫案例，這篇郭先生就要做一個稍微複雜一點的骨骼動畫了，就拿一個小人下手吧。在線案例請點擊博客原文。話不多說先上大圖 骨骼動畫在GUI上面都有體現。製作骨骼動畫的步驟在官方案例中已經看到了，這裏在回憶一下。
2020-07-31 13:50:05
原创 three.js之初探骨骼動畫
今後的幾篇郭先生主要說說three.js骨骼動畫。three.js骨骼動畫十分有意思，但是對於初學者來說，學起來要稍微困難一些，官方文檔比較少，網上除了用圓柱體的例子就是引用外部模型的，想要熟練使用骨骼動畫就需要不斷地探索和練習。這篇是初探
2020-07-30 13:49:42
原创 three.js 製作一個三維的推箱子游戲
今天郭先生髮現大家更喜歡看我發的three.js小作品，今天我就發一個3d版本推箱子的遊戲，其實webGL有很多框架，three.js並不合適做遊戲引擎，但是可以嘗試一些小遊戲。在線案例請點擊博客原文。 要製作一個推箱子游戲，正常要有以下
2020-07-29 13:49:11