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

Question

我正在尝试将一个对象（称为 'tracer'）放置在我的鼠标光标下方。我的 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/

three.js r.70

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

Move object underneath the mouse cursor

javascript

three.js