[orbit-controls and look-at] make them work together

[mattrei]

Hi,

I ran into an issue which I currently do not know how to solve properly. I want that an entity always looks at the camera when using the orbit-controls.

This does not work because the THREE.OrbitControls object takes a THREE Camera and does its transforms directly on that camera object (PerspectivceCamera or OrthographicCamera). But in A-Frame the camera is technically a child of a THREE.Group (because it is wrapped inside an entity) and so the transforms are not applied to the entity itself.

Now when I pass the cameras selector to the look-at component it 'watches' the orientation of the entity and not the camera object and of course nothing happens...

See the example here: https://lookat-orbitcontrols-aframe.glitch.me/

I could imagine how to fix it, but I am not sure where: at the look-at component or at the orbit-controls?

Thx for any advices. Best

[bizzell]

Hi. I took a closer look at your post because I've been playing with look-at and orbit-controls myself. I'm a little unsure about what you are trying to achieve? But here are a couple of alternatives I've posted to Codepen:

https://codepen.io/beebabba/pen/YJRwrV

https://codepen.io/beebabba/pen/ReqrOM

Hope fully these are helpful.

B.

[mattrei]

hi @bizzell ,

thx for your input, but the examples do not help, because they do not address the issue i tried to point out above.

Maybe @ngokevin can chime in.

Best

[allancozart]

@mattrei Im sure there's a better way to do this but this is a quick solution i put together that uses orbit-controls and look-at.

https://periodic-hardcover.glitch.me/

[mattrei]

@allancozart thx for helping out. that's indeed a valid workaround and helps for now! Instead of the posiiton attribute i would also use the getWorldPosition if the camera gets further transformed.

Maybe we come up with an idea how to make it work by changing one of the libraries without this workaround. Because there are also other THREEJs example controls that might be implemented in the future.

[allancozart]

@mattrei What about anding a boolean option to the look-at schema. for example "orbitcamera: true". We can then use that to create a condition that pulls the entity orbit camera values.

i'm assuming it could go here. https://github.com/ngokevin/kframe/blob/master/components/look-at/dist/aframe-look-at-component.js#L107

[EricHsuYC]

@mattrei Im sure there's a better way to do this but this is a quick solution i put together that uses orbit-controls and look-at.

https://periodic-hardcover.glitch.me/

Wonderful solution. It helped me 2 years later. I have a newbie question, I saw you used lookCube.setAttribute() without defining lookCube, but threeJs recognize it. Does threeJs support using element ids directly as object?