CODEWITHSUNDEEP
three.jsaframe
Saul Burgos
Saul Burgos

Reputation: 644

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

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".

Upvotes: 2

Views: 3122

Answers (2)

Saul Burgos
Saul Burgos

Reputation: 644

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.

Upvotes: 1

Mugen87
Mugen87

Reputation: 31026

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})

Upvotes: 3

Related Questions