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

Question

我正在尝试将一个对象(称为“跟踪器”)放置在鼠标光标下方。我的jsfiddle是here .

我找到了this question但无法将其应用到我的项目中。

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

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

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 ) );

}

fiddle :http://jsfiddle.net/ybndL7ro/6/

三.js r.70