2017-01-23 6 views
0

スクロール可能なテキストコンテナ(基本的にスプライトメッシュが小さい独自のビットマップフォントを使用)を実現するには、ローカルクリッピングプレーンを使用しています。 私のテキストコンテナが移動すると、私のコンテナのグローバル境界に従って、クリッピングプレーンが更新されます。 これは速い動きを除いて完全に機能します。この場合、クリッピング・プレーンはコンテナの後ろにわずかに遅れて、テキストを非表示にします。ローカルクリッピングプレーンの更新に遅延が発生する

私の最初の考えはクリッピングプレーンを更新するために必要なコードは遅延が発生する可能性がありますということでした..しかし、私はこの順序を適用し使用する場合: 1.アップデートクリッピング平面 3.テキストボックスの位置 2.更新がレンダリング() 遅延がまだ存在する

実際のクリッピングがどのように適用されるかは、threejsフレームワーク内に位置するのはなぜですか?

ここでは、2つのヘルパーメッシュを使用して上部クリッププレーンをどのように計算するかを示す小さなコードスニペットを示します。 1つは、テキストオブジェクト(画像の赤い平面)に直交して配置された平面です。もう一つは、右面定数を計算するために上端の中央に位置するTHREE.Object3Dです。

// get the world direction of a helper plane mesh that is located orthogonally on my text plane 
var upperClippingPlaneRotationProxyMeshWordDirection = _this.upperClippingPlaneRotationProxyMesh.getWorldDirection(); 

// get the world position of a helper 3d object that is located in the middle of the upper edge of my text plane 
var upperClippingPlanePositionProxyObjPosition = _this.upperClippingPlanePositionProxyObj.getWorldPosition(); 

// a plane through origin which makes it easier for computing the plane constant 
var upperPlaneInOrigin = new THREE.Plane(upperClippingPlaneRotationProxyMeshWordDirection, 0); 

var dist = upperPlaneInOrigin.distanceToPoint(upperClippingPlanePositionProxyObjPosition); 
var upperClippingPlane = new THREE.Plane(upperClippingPlaneRotationProxyMeshWordDirection, dist*-1); 

// clipping plane update 
_this.myUpperClippingPlane.copy(upperClippingPlane); 

picture showing the text object with clipping plane helpers

+0

いくつかのコードはどうですか? – pailhead

+0

@pailhead私のコンセプトを示す写真付きの短いコードスニペットを追加しました – moseslundwerk

答えて

0

私は、遅延の理由を発見しました。私の行列を更新するコードでは、移動時にのみテキストオブジェクトに対してupdateMatrix()を使用しました。ヘルパーメッシュを含む子オブジェクトがすぐに更新されるように、私はupdateMatrixWorld(true)を呼び出さなければなりませんでした。これにより、クリッピングプレーンが正しく計算されます。

関連する問題