threejs 局部縮放變形
Toby
Toby
目標效果

在 Threejs 中如果你要對一個已經 extrude 的 geometry 進行變型的話,由於缺少內部的功能支援,基本上你就只能在 geometry 上手動的加上一個 Matrix4 變形。對於作我一樣沒學過四次元 Matrix 的軟件工程師來說看到這 4D matrix 就跟看到外星語言一樣。

When in doubt: use Brute Force

作為軟件工程師,當你面對一些無法解決的難題的時候一般只有兩種解決方法:

  1. Brute Force Algorithm
  2. Neural Network

所以我就理所當然的把所有 Matrix4 裡面有的洞洞都試填一次,最後得出的結論上:

把 Matrix4 第四行第三格填入你想要的縮放比例即可

效果
Matrix4 的結構

原碼大約長這樣:

var geometry = new ExtrudeBufferGeometry( shape, data );
geometry.center();

var matrix = new Matrix4();


matrix.set(  1,   0,  0,  0,
			 0,   1,  0,  0,
			 0,   0,  1,  0,
			 0,   0,  0.1,  1);

geometry.applyMatrix( matrix );

updateGroupGeometry( mesh, geometry );

所以說真的是 Brute Force 大法好!