Click object in THREE.js with angular

Question

I have tried many solutions without success: it only detects on plane and wrong position of cube.

Because of angular event be easy to call.

1.Add a tag in html.

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

2.Add a function in typescript like this:

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.I use the PerspectiveCamera in 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.Let me show you a video.

I am using OrbitControls at same time. But even I don't call the controls it didn't work...

MY QUESTION IS:

when I click the object I want to console.log, it never shows!

There's only plane I can see!

I click the sphere or cube didn't happened!

And sometime I click plane it console.log the cube...

Exactly what are you asking? Make your problem clear. You have not described nor your problem neither what you want to achieve. — roschach, Jun 25 '18 at 13:29
Maybe it's the common problem to get the wrong 3D coordinates from 2D, when canvas covers only part the window: https://stackoverflow.com/questions/34758834/three-js-2d-mouseclick-to-3d-co-ordinates-using-raycaster/34797945#34797945 — Brakebein, Jun 25 '18 at 13:31
No way!! How can I not find this article! TANKS for answer! I have try a week for only this problem.. thank you very much!! — JonesHong, Jun 25 '18 at 13:43

score 1 · Answer 1 · answered Jun 25 '18 at 13:47

To see what is happening there, you can add some simple object to your scene and position it on click to the point of intersection (intersections[0].position iirc). I would expect that is not where you think it is. Here is why:

You are using calculations that are only appropriate when using a fullscreen-canvas element although your canvas seems to be limited in size and not aligned with the page-origin.

So instead of

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

You need to use something like

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

And instead of

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

You need to compute these values relative to the canvas. The x and y values for the mouse need to be normalized coordinates. This means the left edge of the canvas has x === -1 and the right edge x === 1. The same goes for top (y === 1) and bottom (y === -1).

For this you can do something like

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;

Click object in THREE.js with angular

1 Answers1