Three.js - 使用深度和方向矢量的拉伸幾何

Question

我想擠出一個形狀並創建一個ExtrudeGeometry，但形狀必須擠壓成一定的方向。我有一個方向Vector3

形狀繪製在x，y平面中，通常z是擠壓方向（擠壓深度）。所以方向矢量(0,0,1)會導致默認的擠出。但是例如一個會在另一個方向上擠出形狀。

我首先嚐試使用拉伸路徑來實現這一點，但是當使用路徑時，形狀可以自由地「旋轉」，並且初始方向是任意的。這不是我需要的，形狀必須保持原樣。你可以閱讀這個here in my previous question的細節。

我已經想出了將矩陣應用到生成的ExtrudedGeometry的頂點的後半部分的想法，但我似乎無法獲得我想要的幾何。也許這是我對矩陣的笨拙使用，但我認爲面部法線在這個技巧之後指向內部。

注意方向矢量永遠不會垂直於z軸，因爲這將使無效形狀

---

所以問題：

我如何獲得一個可靠的解決方案將我的形狀擠出到給定的方向。這裏是一個例子。該形狀在x，y平面（寬度和長度2000）中爲正方形，擠出深度也是2000，並且具有在2D（前視圖）和3D中看到的期望結果的繪製的三個不同向量。

Answer 1

通過指定拉伸深度擠壓在通常的方式幾何形狀，然後apply a shear matrix到您的幾何體。

以下是如何指定將傾斜幾何的剪切矩陣。

var matrix = new THREE.Matrix4(); 

var dir = new THREE.Vector3(0.25, 1, 0.25); // you set this. a unit-length vector is not required. 

var Syx = dir.x/dir.y, 
    Syz = dir.z/dir.y; 

matrix.set( 1, Syx, 0, 0, 
       0,  1, 0, 0, 
       0, Syz, 1, 0, 
       0,  0, 0, 1 ); 

geometry.applyMatrix(matrix); 

（該three.js所座標系以y軸了 - 不像你說明你將不得不適應。）

three.js所r.68