Question

我试图在我的鼠标光标下放置一个对象（称为＆＃39; tracer＆＃39;）。我的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 ) );

}

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

three.js r.70

移动鼠标光标下方的对象

1 个答案: