Нажмите объект в THREE.js с угловым

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.Я использую PerspectiveCamera в THREE.js.

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

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

4.Позвольте мне показать вам видео .

Я использую OrbitControls одновременно. Но даже я не называю элементы управления, это не сработало ...

МОЙ ВОПРОС:

когда я щелкаю по объекту, который я хочу сохранить на console.log, он никогда не отображается!

Я вижу только самолет!

Я нажимаю на сферу, или куба не случилось!

И иногда я нажимаю на плоскость, это console.log куб ...

Answer 1

Чтобы увидеть, что там происходит, вы можете добавить к своей сцене какой-нибудь простой объект и поместить его по щелчку в точку пересечения (intersections[0].position iirc).Я ожидаю, что это не там, где вы думаете.Вот почему:

Вы используете расчеты, которые являются уместными только при использовании элемента fullscreen-canvas, хотя ваш холст кажется ограниченным по размеру и не выровнен с источником страницы.

Итаквместо

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;