Click Events Not Working

[SemAiSoft]

A beginner here,
I can't seem to get the click handler to work, it is just not firing. Any idea why?

A bonus question, can someone enlighten me on the differences between this library and Angular Three lib? This look more intuitive and expressive to me.
Thanks for the wonderful work!

[demike]

Hi, have you tried it like in this example: https://demike.github.io/ngx-three/simple-example?

The main difference lies in the generation part.
ngx-three generates angular components for most of the three.js primitives like Object3D.

Angular Three in contrast uses a custom renderer and keeps the template binding information in a signal "store".
It generates custom data json files from three.js types so that you get propper IDE support ( i.e.: https://code.visualstudio.com/docs/languages/html#_html-custom-data)

ngx-three uses proxies to decouple binding from model loading.
Angular Three has extension libs for i.e. physics ...

[SemAiSoft]

Hi, have you tried it like in this example: https://demike.github.io/ngx-three/simple-example?

The main difference lies in the generation part. ngx-three generates angular components for most of the three.js primitives like Object3D.

Angular Three in contrast uses a custom renderer and keeps the template binding information in a signal "store". It generates custom data json files from three.js types so that you get propper IDE support ( i.e.: https://code.visualstudio.com/docs/languages/html#_html-custom-data)

ngx-three uses proxies to decouple binding from model loading. Angular Three has extension libs for i.e. physics ...

Yes, thank you. I copied the provided sample as is, and it worked. I will prob to find what I am doing wrong at my end.

[alkthegit]

Hi, have you tried it like in this example: https://demike.github.io/ngx-three/simple-example?

Hi,

I'm on version 0.30.1 / threejs@0.164.1 because of enterprise reasons.

Unfortunately, the example linked above is relativly easy to break if we make canvas size smaller, for example, set it to width: 50%; height: 50%.
And this is because when ray intersection with objects is being calculated, it is implicitly supposed that size of a canvas somehow equals to a page viewport:

// projects/ngx-three/src/lib/events/raycaster.service.ts
x = (x / this.canvas.clientWidth) * 2 - 1;
y = -(y / this.canvas.clientHeight) * 2 + 1;

Maybe, should utilize getBoundingClientRect on the canvas here for mouse pointer positioning.

Specifically, I've got the (onClick) event being not fired just because my canvas is in the container with paddings and at a default size (not 100% of viewport).

I removed padding and it started fire.