1

以下のようにオブジェクト（名刺）を作成しました。

var object = new THREE.CSS3DObject( dom );

名刺をクリックすると、y 軸を中心に 180 度回転します。

dom.addEventListener( 'click', function ( event ) {
  new TWEEN.Tween( object.rotation )
    .to( { x: 0, y: (object.rotation.y == Math.PI) ? 0: Math.PI, z: 0 }, 1000 )
    .easing( TWEEN.Easing.Exponential.InOut )
    .start();
}, false );

名刺の裏面をデザインしたいと思います。ただ、現時点では名刺の表裏しか見えません。THREE.CSS3DObject の裏面をデザインするにはどうすればよいですか?

左が元の名刺、右がy軸を中心に180度回転させた名刺です。

ここに画像の説明を入力

以下のようなものはありますか？

var object = new THREE.CSS3DObject( dom );
object.doubleSided = true;
object.reverse = new THREE.CSS3DObject( reverseDom);
4

1 に答える 1

1

いいえ -- 私は CSS3D レンダラーの内部を掘り下げていませんが、表示されているのは CSS プロパティtransform: rotateY(180deg);または類似のものを持つ単一の DOM オブジェクトである可能性が非常に高いです。

CSS3D レンダラーはメッシュをサポートしていないように見えるため、考えられる解決策は、カードの背後にかろうじて配置され、カードの「背面」を含む別の CSS3D オブジェクトを作成することです。次に、表と裏を同時に回転させます。最初に「裏」を裏返す必要があることに注意してください。そうしないと、カードを裏返すと、表と同じように裏にも表示されます。逆向きにデザインするか、最初にカードを裏返す方向とは反対の方向に 180 度回転させるか、目盛りをひっくり返すことができます (たとえばobj.scale = new THREE.Vector3(-1, 1, 1);、目盛りをひっくり返すと回転方向も変わる可能性があることに注意してください。カードの表とのコーディネート。

この同時回転を行うために、明らかな手動の方法に加えて、Three.js は実際にオブジェクト グループをサポートしています (.add()オブジェクトを他のオブジェクトにすることができます)。それ。

于 2013-07-26T11:05:29.587 に答える