Question

我尝试了许多解决方案，但均未成功：它只能检测到平面上和立方体的错误位置。

由于角度事件很容易调用。

1。在html中添加标签。

<div (click)="onClickCanvas($event)">

2。在打字稿中添加如下函数：

onClickCanvas(event) {
  let intersects;
  mouse['x'] = (event.clientX / window.innerWidth) * 2 - 1;
  mouse['y'] = - (event.clientY / window.innerHeight) * 2 + 1;

  raycaster.setFromCamera(mouse, camera);

  intersects = raycaster.intersectObjects(scene.children);
  if (intersects.length !== 0) console.log(intersects[0]['object'])
}

3。我使用THREE.js中的 PerspectiveCamera 。

camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000)

camera.position.x = 0;
camera.position.y = 50;
camera.position.z = 45;

4。让我给你看一个video。

我正在同时使用 OrbitControls 。但是，即使我不称呼控件也不起作用...

我的问题是：

当我单击要console.log的对象时，它永远不会显示！

我只能看到飞机！

我没有单击球体或立方体！

有时我单击平面它console.log多维数据集...

Answer 1

要查看此处发生的情况，可以将一些简单对象添加到场景中，然后单击将其放置到交点（intersections[0].position iirc）。我希望那不是您想的那样。这是原因：

您使用的计算仅在使用全屏画布元素时才适用，尽管您的画布似乎受大小限制且与页面来源不符。

所以不是

camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000)

您需要使用类似的

var canvasWidth = renderer.domElement.offsetWidth;
var canvasHeight = renderer.domElement.offsetHeight;
camera = new THREE.PerspectiveCamera(45, canvasWidth / canvasHeight, 1, 1000)

而不是

mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;

您需要计算相对于画布的这些值。鼠标的x和y值需要为归一化的坐标。这意味着画布的左边缘为x === -1，右边缘为x === 1。顶部（y === 1）和底部（y === -1）也是如此。

为此，您可以做类似的事情

var rect = renderer.domElement.getBoundingClientRect();
var dx = ev.clientX - rect.x;
var dy = ev.clientY - rect.y;

mouse.x = (dx / rect.width) * 2 - 1;
mouse.y = (dy / rect.height) * 2 + 1;

单击带有角的THREE.js中的对象

1 个答案: