Question

我正在使用Three.js进行网络可视化，但我无法确定为什么我的光线投射实现无法识别正确的点（Full example和source）。

更具体地说，我正在尝试使用点云进行光线投射，并且一旦用户将鼠标悬停在点上，我就会尝试将点的颜色更改为白色。现在，悬停点确实会改变点的颜色，但事件似乎是在光标附近的点上而不是在光标的正下方触发的。

以下是我用来初始化光线施法者的代码：

// configure the raycaster
raycaster = new THREE.Raycaster();
raycaster.params.Points.threshold = 20;

这是渲染功能：

function render() {
  renderer.render(scene, camera);
  controls.update();
  raycast();
}

// Color hovered points
function raycast() {
  raycaster.setFromCamera(mouse, camera); 
  var intersects = raycaster.intersectObject(particles);
  if (intersects.length) {

    var newColor = new THREE.Color();
    newColor.setRGB( 1, 1, 1 );

    var index = intersects[0].index;
    particles.geometry.colors[index] = newColor;
    particles.geometry.colorsNeedUpdate=true;
  }
}

最后，在身体上触发了mousemove事件的回调：

/**
* Mouse coordinates go from 0 to container width {0:1} 
* and 0 to container height {0:1}. Multiply by 2
* and subtract 1 to center the mouse coords {-1:1}.
* Furthermore, negate the y axis coords, as in the DOM
* the origin is in the top left corner, while in WebGL
* the origin is in the bottom left corner.
**/

function onDocumentMousemove(e) {
  mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
  mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}

有没有人知道为什么当用户鼠标移动时此代码没有突出显示正确的点？任何见解都会非常有用！

Answer 1

在输入上述问题的过程中，我意识到raycaster.params.Points.threshold = 20;行为我的积分设置了一个比积分本身大得多的阈值：

pointMaterial = new THREE.PointsMaterial({
  size: 6,
  vertexColors: THREE.VertexColors
});

我将raycaster.params.Points.threshold值降低到5，现在徘徊似乎正在提升正确的点数。

Three.js射线投射特定点

1 个答案: