Three.js camera rotation

I try to do a camera flight from on object to another and to another and to another…(and stay there for a couple secconds before fly to next object)

Objects are in an array.

My problem can be seen here :Click

I need the camera to rotate to next object and move from this position to next object. No just like noe, move out and move in again to next object. Should look like a path abit.

My function to move the camera to next object

  function camFlyTo(o,object){ var ob=this;  
            if(!ob.autoRender){ob.autoRender=24;}
            if(!ob.camera.neddedDirection){
                ob.camera.neddedDirection={curPosition:ob.camera.position,curRotation:ob.camera.rotation,distance:ob.Distance(ob.camera,o),rotation:ob.Rotation(o,ob.camera),obPos:o.position,speed:0.4,stayaway:0,altitude:10}
                
                if(object){
                        if(object.altitude){ob.camera.neddedDirection.altitude=object.altitude;}
                        if(object.speed){ob.camera.neddedDirection.speed=object.speed;}
                        if(object.stayaway){ob.camera.neddedDirection.stayaway=object.stayaway;}
                        }
                        ob.camera.moveSteps=0;
                }
                ob.camera.rotation.order = "YXZ";
                var distance=ob.Distance(ob.camera,o);
                ob.camera.moveSteps+=ob.camera.neddedDirection.speed;
                var prz=100/(ob.camera.neddedDirection.distance-ob.camera.neddedDirection.stayaway)*ob.camera.moveSteps;
                if(prz>100){ return true;}else{
                var ease='regularinout';
                var x=ob.Onvalback(ob.camera.neddedDirection.curPosition.x,ob.camera.neddedDirection.obPos.x,prz,ease);
                var y=ob.Onvalback(ob.camera.neddedDirection.curPosition.y,ob.camera.neddedDirection.obPos.y,prz,ease);
                var z=ob.Onvalback(ob.camera.neddedDirection.curPosition.z,ob.camera.neddedDirection.obPos.z,prz,ease)+ob.camera.neddedDirection.altitude;
                var rx=ob.Onvalback(ob.camera.neddedDirection.curRotation.x,ob.camera.neddedDirection.rotation.x,prz,ease);
                var ry=ob.Onvalback(ob.camera.neddedDirection.curRotation.y,ob.camera.neddedDirection.rotation.y,prz,ease);
                var rz=ob.Onvalback(ob.camera.neddedDirection.curRotation.z,ob.camera.neddedDirection.rotation.z,prz,ease);
                var bounds=ob.getVector(o,x,y,z);
                ob.setPosition(ob.camera,x,y,z);
                ob.setRotation(ob.camera,rx,ry,rz);
                ob.camera.lookAt(new THREE.Vector3(x,y,z));
                }
                return false;
        }
    // camFlyTo([object, mesh, model],[ob.camera.neddedDirection Add ons as Object])
    //ob.Distance calculates distance between two objects
    //ob.Rotation returns the angles as {rotation.x,rotation.y,rotation.z} from one object to another
    //ob.Onvalback returns the result for two numbers by percentage and easing
    //ob.setPosition just sets position.x - position.y for object
    //ob.setRotation just sets rotation.x - rotation.y for object 

I’m a complete newbe with three.js.
Anybody out there who may help me

Have you considered to use an animation library like tween.js in order to animate the camera from one position to another? You can also use the library for animating the orientation of the camera. Just tween an value from 0 to 1 and use it for interpolating quaternion values representing your initial and target orientation. The approach is explained in detail right here:

Yes, i’ve seen this already. I have no idea what quaternion is and i couldn’t find anything to learn about it (im a newbee). But i’ll give it a try again if it gets me close to my goal. Im not using tween (EDIT, indeed my animation class is pretty similar and based on Actionscript). I’ll try to find more about quaternion. But if there is any more solutions i would apreciate. Isn’t there a way to get rid of lookAt at all but turn the camera exactly to a certain point?

Resources like this one explain quaternions in detail. If you are a new to 3D development, I recommend you read the entire book :wink: .

Im new to three.js. But not to 3d. I work with cinema 4D for years. Maybe i should use a translater for quaternion to my language.

Look over there.

to be found in the collection

1 Like

Thank you hofk
I,ve read about quaternions (especially three.js methods). What i’ve learned is that the coordinates will be recalculated and kind of manipulated according to the world coordinates. Which i try to avoid. So what i did right now is recalculating the coordinates only to get new lookAt coordinates. Right no this works. I don’t think, that thats the final solution for me, but for now i’ll go with that. Thank you to all.
What im struggling right now is the camera rotation. I guess i have to learn about threes coordinatesystem itself. Because right now i have to rotate the plane x-90, which is similar to what i know about 3D, but object.position x,y and z isn’t working as expected. From my understanding 3D is like a Box. X from left to right. Z From Near to Far, Y from Bottom to Top. Which seems to be different in three.js.

What exactly does lookAt at all? Does it all the rotation or is there more?

It’s Z From Far to Near.
And see
three.js docs (Note: A camera looks down its local, negative z-axis).

see LookAt - Interactive 3D Graphics - YouTube
Use camera like human eyes
https://www.script-tutorials.com/webgl-with-three-js-lesson-9/