THREEJS中通过Raycaster获取鼠标与模型的交互点

注意：group中存放模型

// 适用于通过json得到的sprite精灵绘制的
//点击射线
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
// document.getElementById("container").addEventListener('mousedown', onDocumentMouseDown, false);
document.body.addEventListener('mousemove', onDocumentMouseMove, false);
function onDocumentMouseMove(event){
  event.preventDefault();
  mouse.x = (event.clientX / renderer.domElement.clientWidth) * 2 - 1;
  mouse.y = -(event.clientY / renderer.domElement.clientHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  var intersects = raycaster.intersectObjects([group], true);

  if (intersects.length > 0) {
    document.body.style.cursor = "pointer";
  }else{
    document.body.style.cursor = "default";
  }
}
document.body.addEventListener('mousedown', onDocumentMouseDown, false);
function onDocumentMouseDown(event) {
  // console.log(event)
  event.preventDefault();
  mouse.x = (event.clientX / renderer.domElement.clientWidth) * 2 - 1;
  mouse.y = -(event.clientY / renderer.domElement.clientHeight) * 2 + 1;

  raycaster.setFromCamera(mouse, camera);

  // 总结一下，这里必须装网格，mesh，装入组是没有效果的
  // 所以我们将所有的盒子的网格放入对象就可以了
  // 需要被监听的对象要存储在clickObjects中。
  // 返回射线选中的对象 第二个参数如果不填 默认是false
  var intersects = raycaster.intersectObjects([group], true);

  if (intersects.length > 0) {
    console.log(intersects)
    console.log([intersects[0].point.x, intersects[0].point.y]);
    var val = {
      lng: intersects[0].point.x,
      lat: intersects[0].point.y
    }
    //可以通过点击获取的坐标轴显示标签等
  }
}