将对象移动到鼠标光标下方

Question

我正在尝试将一个对象（称为“跟踪器”）放置在鼠标光标下方。 我的jsfiddle在这里 。

我发现了这个问题，但无法将其应用于我的项目。

我有一个非常简单的场景，只有一个立方体和一个灯光。 每次鼠标移动时，我都要在其下方放置一个指针。

我可以使用光线投射和相交的对象来做到这一点。 但是我也想始终将跟踪器移动到鼠标下方，即使不与任何对象相交。 这是我要在鼠标下移动的对象：

var geometry = new THREE.CylinderGeometry( 0, 20, 100, 3 );
    geometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, 50, 0 ) );
    geometry.applyMatrix( new THREE.Matrix4().makeRotationX( Math.PI / 2 ) );
var tracer = new THREE.Mesh( geometry, new THREE.MeshNormalMaterial() );
scene.add( tracer );

这就是我要获取鼠标的位置然后设置跟踪器位置的方法：

function onMouseMove( event ) {

    mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;
    mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;

    vector.set(
      ( event.clientX / window.innerWidth ) * 2 - 1,
      - ( event.clientY / window.innerHeight ) * 2 + 1,
     .5 );

    var dir = vector.sub( camera.position ).normalize();

    var distance = - camera.position.z / dir.z;

    var pos = camera.position.clone().add( dir.multiplyScalar( distance     ) );
    console.log('pos is ');
    console.log(pos);

    tracer.position.copy( pos );
}

但是，示踪剂虽然会稍微移动，但不会在鼠标下方移动。 任何帮助，不胜感激。

Answer 1

这是一个将对象保持在鼠标下方且平面z = 0的版本，并且不会在每次调用时克隆新的THREE.Vector3() ：

var mouse = new THREE.Vector2();
var vector = new THREE.Vector3();

function onMouseMove(event) {

    mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;

    mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;

    vector.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );

    vector.unproject( camera );

    var dir = vector.sub( camera.position ).normalize();

    var distance = - camera.position.z / dir.z;

    tracer.position.copy( camera.position ).add( dir.multiplyScalar( distance ) );

}

小提琴： http ： //jsfiddle.net/ybndL7ro/6/

three.js r.70