使用动画选择Three.js光线投射对象

Three.js raycasting object selection with animation

本文关键字：js 光线投射 对象 Three 选择 动画      更新时间：2023-09-26

光线投射选择在静态网格上的项目中运行良好，但对于动画网格，光线选择似乎看不到网格的移动，只响应网格的非动画（原始）位置。

我的选择代码如下：

element.addEventListener( 'mouseup', function ( event ) 
{
  var vector = new THREE.Vector3(( event.clientX / window.innerWidth ) * 2 - 1, -( event.clientY / window.innerHeight ) * 2 + 1, 0.5);
  vector = vector.unproject(camera);
  var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
  var intersects = raycaster.intersectObjects(pickable_objects, true);
  if (intersects.length > 0) 
  {
      //I change the object's material colour so that I can see the selection
  }
}

其中pickable_objects是一个可选择的三个.js网格对象的数组，据我所知，这些对象并不包含动画信息，所以我抱怨的结果可能对一些人来说并不奇怪。

我没有在这里包含颜色更改代码或JSON网格读取器代码，因为我认为它不相关。

因此，对于静态网格，光线投射是非常准确的，但对于动画网格，我必须在对象的中心单击或找到其原始的非动画位置才能进行选择。

如果你查看github repo中的源代码，特别是Raycaster.js，你会发现实际的实现在几何对象中。例如，Mesh.js通过迭代其三角形并检查光线是否与其中任何一个相交来实现光线投射，但SkinnedMesh.js不会覆盖此方法。

最后，在问题页面中快速搜索显示，这实际上是一个已知的限制-https://github.com/mrdoob/three.js/issues/6440.

你似乎只剩下两个选项——在github中解决问题，要求ETA或自己实现（希望之后发送一个拉取请求）。

相关文章：