2016-08-27 17 views
3

これは重複する可能性がありますが、まだ何も見つかりませんでした。 マウスのホバーでツールチップを作成しようとしています。 (透視カメラ)Threejsツールチップ

ツールチップの問題: https://jsfiddle.net/thehui87/d12fLr0b/14/

threejs R76

function onDocumentMouseMove(event) 
{ 
    // update sprite position 
    // sprite1.position.set(event.clientX, event.clientY, 1); 

    // update the mouse variable 
    mouse.x = (event.clientX/window.innerWidth) * 2 - 1; 
    mouse.y = - (event.clientY/window.innerHeight) * 2 + 1; 

    var vector = new THREE.Vector3(mouse.x, mouse.y, 0); 
    vector.unproject(camera); 

    var dir = vector.sub(camera.position).normalize(); 
    var distance = - camera.position.z/dir.z; 
    var pos = camera.position.clone().add(dir.multiplyScalar(distance)); 
    sprite1.position.copy(pos); 


} 

しかし、私は、ツールヒントが遠ざかるカメラを軌道に一度。

ツールチップの参考情報です。

誰もが親切にstackoverflowの上の正しい答えに私を指すか、代替ソリューションを提供することができれば。

おかげ

+1

を私は今、あなたのための既製の答えを持っていないが、あなたの問題は、あなたが「というように見えますカメラのz軸が常に観察者から対象者に向かうと仮定しています。 OrbitControlsは、カメラを特定の「見る」点の周りに回転させます。そのため、ベクトルをカメラから交点に移動し、その軸を使用して距離とスプライトの位置を計算する必要があります。 – Leeft

+0

うん、もう一つ、私はちょうどツールチップもズームしてはならないことがわかった。だから私は、ツールチップをレンダリングするために2番目のカメラを使用する必要があります。ありがとう。 – Deb

+0

私はこのような何かをする必要があるかもしれないhttp://www.evermade.fi/pure-three-js-hud/、それが完了したら、ここで答えを投稿してみましょう。 – Deb

答えて

0

は交換してください:によって

var vector = new THREE.Vector3(mouse.x, mouse.y, 0); 

var vector = new THREE.Vector3(mouse.x, mouse.y, 1);