Estoy representando una nube de puntos y tratando de seleccionar un solo punto, pero el método raycaster.intersectObjects(scene.children, true) genera una matriz vacía. También encontré muchas formas diferentes de calcular pointer.x y pointer.y. Ninguno de ellos funcionó.
Aquí está mi CodePen: https://codepen.io/joshua-holly-fraunhofer/pen/VwyGBVO
¿Que esta mal aquí?
function onMouseUp(event) { event.preventDefault(); const raycaster = new THREE.Raycaster(); const pointer = new THREE.Vector2(); pointer.x = (event.clientX / window.innerWidth) * 2 - 1; pointer.y = -(event.clientY / window.innerHeight) * 2 + 1; raycaster.setFromCamera(pointer, camera); const intersects = raycaster.intersectObjects(scene.children, true); console.log(intersects); // Is empty array }Su código funciona, pero la cámara está muy lejos de la nube de puntos (1800 unidades), lo que hace que los Point individuales sean relativamente pequeños. Con el umbral de emisión de rayos predeterminado (1 unidad, consulte Raycaster.params ), el usuario tiene que hacer clic extremadamente (y tal vez imposible ) cerca de un Point para que se registre una intersección. De hecho, algunas matemáticas de la servilleta me dicen que a 1080p, debe hacer clic dentro de los 0,2 px del punto, pero los clics solo se miden con una precisión de 1 px.
Dado que su material de puntos utiliza formas de 60 unidades para representar los puntos, aumente el umbral a ese tamaño y comenzará a obtener los resultados que espera. Después de la línea que inicializa raycaster , agregue esta línea:
raycaster.params.Points.threshold = 60;