three.js raycaster.intersectObject 为何输出空数组?

想在一个 three.js 的源码钟添加一段点击事件,但是依照网上的写法添加后无法成功获取元素

下图为打印的 scene 结果,可以看到存在 children 数组对象

image.png

但是 var intersects = raycaster.intersectObjects(scene.children, true); 后结果缺位一个空数组,我的代码如下:

// --------- 点击事件 start ---------
//声明raycaster和mouse变量
var raycaster = new THREE.Raycaster();
var pointer = new THREE.Vector2();

function onMouseClick (event) {
  // console.log( 'event', event, 'scene', scene , scene.children)
  console.log("event.clientX:" + event.clientX)
  console.log("event.clientY:" + event.clientY)

  //通过鼠标点击的位置计算出raycaster所需要的点的位置,以屏幕中心为原点,值的范围为-1到1.
  pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
  pointer.y = - (event.clientY / window.innerHeight) * 2 + 1;

  // 通过鼠标点的位置和当前相机的矩阵计算出raycaster
  raycaster.setFromCamera(pointer, camera);

  // 获取raycaster直线和所有模型相交的数组集合
  console.log('scene', scene)
  // var intersects = raycaster.intersectObjects(scene.children, true);
  var intersects = raycaster.intersectObjects(scene.children, true);
  console.log('intersects', intersects);

  //将所有的相交的模型的颜色设置为红色,如果只需要将第一个触发事件,那就数组的第一个模型改变颜色即可
  for (var i = 0; i < intersects.length; i++) {
    intersects[i].object.material.color.set(0xff0000);
  }
}

// function render () {
//   // update the picking ray with the camera and pointer position
//   raycaster.setFromCamera(pointer, camera);

//   // calculate objects intersecting the picking ray
//   const intersects = raycaster.intersectObjects(scene.children);
//   console.log('intersects', intersects)

//   for (let i = 0; i < intersects.length; i++) {
//     intersects[i].object.material.color.set(0xff0000);
//   }

//   renderer.render(scene, camera);
// }

window.addEventListener('click', onMouseClick, false);
// window.requestAnimationFrame(render);
// --------- 点击事件 end ---------

我想修改的源码预览链接为:https://demosc.chinaz.net/Files/DownLoad/webjs1/202102/jiaobe...
是想将点击事件添加到灯笼上


由于之前没有接触过 three.js ,所以还望指点,万分感谢!


今天偶然发现,并非获取不到点击事件,而是需要点击视图中心位置才可以触发,如图:

image.png

找到了一个成功的事例:
https://blog.csdn.net/qq_30100043/article/details/79054862

但尝试仍然成功,我在继续努力!

阅读 2.2k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题