6

(2d コンテキスト)を使用して 3D 形状をレンダリングしようとしています<canvas>。つまり、手動の射影変換を実行する必要があります。

CSS から 3D 変換マトリックスの値を取得できると、とても助かります。

これはできますか?

そうでない場合、-webkit-perspective-origin によって実行される変換をどのように構築できますか? パースペクティブのみの変換を考え出しましたが、パースペクティブの原点が x=y=0 にあり、常にそうであるとは限りません。

この特定のケース (ある点 x、y、z を原点とする遠近法) は単純な x、y、z 変換の直後に遠近法変換 (またはその逆) になる可能性があることを認識していますが、理想的な答えは実際の 4x4 3D マトリックスを抽出する方法です。マトリックスがあれば、CSS3 要素を変換するために行った手順をたどる必要がなくなり、同じ変換を を使用してレンダリングするジオメトリに適用できます<canvas>

参照用にここ ( http://www.w3.org/TR/css3-3d-transforms/ ) を見ましたが、さまざまな可能な変換を適用するときに行列に割り当てられる実際の値を記述しているようには見えません。そのような詳細に入るスペックシートがそこにあるはずだと思います。どこかでそれ(多くの三角関数を含む行列定義)を垣間見たことさえ覚えているようです。

編集:ここで、ブラウザが変換を実行するために実行する手順の詳細な概要を見つけました。私の質問には答えませんが、一時的な目標に一歩近づきます。

4

1 に答える 1

4

要素の変換行列は、getComputedStyle を介して取得できます。以下に例を示します: http://jsfiddle.net/Kxxwu/

もう 1 つの方法は、WebKitCSSMatrix インターフェイスを使用することです。非常に便利で、マトリックス値といくつかのメソッドを持つオブジェクトを提供します

悪い点は、WebKitCSSMatrix が他のブラウザーに実装されていないことです...

キャンバスへの 3D 変換をどのように実装しているかを知りたいです。覗くのに適した場所は、three.js です。彼らはそれを行い、そこでさまざまな行列関数を見ることができます。

幸運を!

于 2012-05-02T10:25:07.153 に答える