Threejs工具提示

Question

这可能是重复的,但我还没有找到任何东西.我正在尝试为鼠标悬停创建工具提示.(透视相机)

工具提示问题: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);


}

但是一旦我绕着相机运行,工具提示便会移开.

工具提示的参考.

• http://stemkoski.github.io/Three.js/Mouse-Tooltip.html

• Three.js - 对象跟随鼠标位置

如果有人可以在stackoverflow上指出我正确的答案或提供替代解决方案.

谢谢

Answer 1

运行良好的工具提示不仅是正确放置的文本标签。它有一些显示和隐藏的智能。

这应该：

1. 不会立即出现，但是一旦鼠标在某个物体上静止不动，
2. 不会立即消失，而是应该在鼠标离开对象区域后逐渐消失，
3. 如果用户在对象区域周围移动鼠标而不离开它，它既不应该跟随鼠标，也不应该停留在原来的位置。

所有这些都包含在我的解决方案中：http : //jsfiddle.net/mmalex/ycnh0wze/

<div id="tooltip"></div>必须最初添加到 HTML。您在下面找到的推荐 CSS。拥有它至关重要position: fixed;，其他任何事情都是品味问题。

#tooltip {
  position: fixed;
  left: 0;
  top: 0;
  min-width: 100px;
  text-align: center;
  padding: 5px 12px;
  font-family: monospace;
  background: #a0c020;
  display: none;
  opacity: 0;
  border: 1px solid black;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
  transition: opacity 0.25s linear;
  border-radius: 3px;
}

#tooltip {
  position: fixed;
  left: 0;
  top: 0;
  min-width: 100px;
  text-align: center;
  padding: 5px 12px;
  font-family: monospace;
  background: #a0c020;
  display: none;
  opacity: 0;
  border: 1px solid black;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
  transition: opacity 0.25s linear;
  border-radius: 3px;
}

Answer 2

代替：

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

经过：

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