Question

我试图使一个物体以自然的方式一直看着鼠标。到目前为止，我已经设法

使对象始终处于鼠标状态
增加放松更自然地

现在的问题是，对象没有遵循与鼠标相同的路径，而是始终占据最后一个位置以方便移动。

我不确定该如何处理。

// filtering now works because the inner filter
// correctly returns a boolean value depending 
// on the filter condition
console.log(
  [{ values: ["a", "b"] }, { values: ["c", "d"] }].filter(item =>
    item.values.some(val => val === "a")
  )
);

因此，现在的目标是找到一种方法，使对象跟随鼠标，而不仅仅是最后一个位置，及其整个路径。有什么想法吗？

Answer 1

您可以使用类似的模式使对象以延迟缓和的方式看着鼠标：

var target = new THREE.Vector3();

var mouseX = 0, mouseY = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

...

function onDocumentMouseMove( event ) {

    mouseX = ( event.clientX - windowHalfX );
    mouseY = ( event.clientY - windowHalfY );

}

function animate() {

    requestAnimationFrame( animate );

    target.x += ( mouseX - target.x ) * .02;
    target.y += ( - mouseY - target.y ) * .02;
    target.z = camera.position.z; // assuming the camera is located at ( 0, 0, z );

    object.lookAt( target );

    renderer.render( scene, camera );

}

编辑：这是一个使用稍有不同的实现的实时演示：https://threejs.org/examples/webgl_materials_skin.html。

three.js r.99

ThreeJs Object轻松观察鼠标

1 个答案: