Question

我觉得这个问题已经被问了一百万遍了，所以我很抱歉，但是我找不到任何解决方案来帮助我解决这个问题。

我在这里有一个简单的鼠标事件：

renderer.domElement.addEventListener("click", onclick, false);

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

function onclick(event) {
  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( scene.children );

  console.log('intersects', intersects);
}

我的项目由2列布局组成，在右列中包含three.js。这就是为什么我使用renderer.domElement.clientHeightHeight（至少我认为这是我应该使用的原因）的原因。

第二，我正在使用scene.children，因为我将所有网格都添加到了场景中，如下所示：

scene.add( door );
scene.add( leftWall );
scene.add( rightWall );
scene.add( topWall );
scene.add( bottomWall );
scene.add( baseGridFloor );

renderer.render( scene, camera );

无论如何，当我单击场景时，我会将其记录到控制台上

intersects: []

如果我不得不猜测这里出了什么问题，那就是射线投射没有投射到正确的位置，因此它没有返回任何相交对象。虽然只是在这里猜测。

使用Raycaster和OrthographicCamera的Three.js单击事件

0 个答案: