How to look to objects using lookAt() with a-frame camera component and look-controls

Viewed 1775

Goal: I want to create a Web based experience where the user need to see a series of elements on the scene and later, I want to leave the user explore alone.

I have several objects around the scene and I want the camera to look at them one by one. I am using the lookat() method but is not working correctly. I found this example on Threejs:

http://jsfiddle.net/L0rdzbej/135/

But my example is not working like the previous example.


After the answer of @Mugen87 is working but with a little modification:

document.getElementById('cam').sceneEl.camera.lookAt

Access the camera in this way. You can see the example here:

https://glitch.com/~aframe-lookat-cam-not-working

Please click on the button "animate camera".

3 Answers

As mentioned in this thread, you have to remove or disable look-controls if you're overriding camera rotation manually. So you can do:

var cameraEl = document.getElementById('camera');
cameraEl.setAttribute('look-controls', {enabled: false});

to disable the controls, perform your lookAt() operations, and then enable the controls via:

cameraEl.setAttribute('look-controls', {enabled: true})

I finally could make it worked. I am new in Threejs and aframe and surely I don't understand rotation, positions,world coordinates good enough but I think I did a decent work. Here the link:

https://glitch.com/~aframe-lookat-camera-working

I hope will be useful for somebody on the future.

The answer of @Mugen87 is correct but After using the answer of @Mugen87, I have added a new button called "look box" where the camera only see 1 box. Is the same logic that is working with the button "animate camera" but after the code is run the camera behave strange.

https://glitch.com/~aframe-lookat-cam-not-working

If you drag vertically the camera look like this. Is the same code but behave different.

enter image description here

Why?

I found this same description of the problem here:

https://php.developreference.com/article/14602336/A-Frame+camera+rotation+using+lookAt()

Related