2

three.js を使用して、アニメーション化された HTML5 グラフィックで回転する四面体を表示する必要があります。

オブジェクトを作成すると上下が逆になりますが、このスクリーンショットのように、1 つの面で地面にある必要があります。

これは、現時点でオブジェクトを回転させるためのコードです。render() 関数に格納されます。しかし、軸が正しくなく、オブジェクトが間違って回転しています。

object.useQuaternion = true;
var rotateQuaternion_ = new THREE.Quaternion();
rotateQuaternion_.setFromAxisAngle(new THREE.Vector3(0, 1, 1), 0.2 * (Math.PI / 180));
object.quaternion.multiplySelf(rotateQuaternion_);
object.quaternion.normalize();

( Three.JS からコピー - 回転軸の設定方法)

これは現時点での結果です: http://jsfiddle.net/DkhT3/

正しい軸にアクセスして、地上の四面体を移動/回転するにはどうすればよいですか?

提案をありがとう！

4

2 に答える 2

7

コピーしたことをしないでください。正しくありません。

私はあなたがしたいことは、最初は右側が上になっている四面体から始めることだと思います。実行できることの1つは、必要なTHREE.TetrahedronGeometry()四面体を生成する4つの頂点を使用するように変更することです。

既存のコードを使用する場合は、次のように、作成直後にジオメトリに回転を適用する必要があります。

var geometry = new THREE.TetrahedronGeometry( 40, 0 );
geometry.applyMatrix4( new THREE.Matrix4().makeRotationAxis( new THREE.Vector3( 1, 0, - 1 ).normalize(), Math.atan( Math.sqrt( 2 )) ) );

（適切な回転角を決定するには少し計算が必要ですが、この場合、ラジアンで表したsqrt（2）のアークタンジェントであることがわかります。）

three.js r.133

于 2012-10-08T17:01:30.170 に答える