9

誰かが以前にこの特定の問題に遭遇したのではないかと思います。webglとthree.jsを使用して3Dオブジェクトがどのように描画されるかについての基本的な理解では、立方体ジオメトリからジオメトリを継承する平行六面体を作成する方法を見つけることができないようですが、すべての角度が90度ではありません。

私の目標は、次のようなものにすることです。

例

結果は何に非常に似ているはずです

-moz-transform: skew(0,-45.1deg);

html要素に対して行います。誰かが私が解決策を見つけるのを手伝ってくれる？

よろしくお願いします。

4

2 に答える 2

21

必要なのは、立方体メッシュを作成してから、立方体のジオメトリにせん断マトリックスを適用することです。この操作により、説明した方法でジオメトリが歪められます。

var geometry = new THREE.BoxGeometry( 5, 5, 5 );

var matrix = new THREE.Matrix4();

matrix.set(   1,   Syx,  Szx,  0,
            Sxy,     1,  Szy,  0,
            Sxz,   Syz,   1,   0,
              0,     0,   0,   1  );

geometry.applyMatrix( matrix );

これがフィドルです：http：//jsfiddle.net/4kHdQ/54/

編集：three.jsr.71に更新

于 2012-09-21T20:30:36.180 に答える
1

Three.js r129はにアップデートを導入しましたMatrix4.makeShear()—@WestLangleyによって作成されました

https://threejs.org/docs/#api/en/math/Matrix4.makeShear

const geometry = new THREE.BoxGeometry(5, 5, 5);

const matrix = new THREE.Matrix4();
matrix.makeShear(1, 0, 0, 0, 0, 0);

geometry.applyMatrix4(matrix);
于 2021-10-24T11:50:40.083 に答える