Three.js: Attach Camera to a 3D object and rotate/move with the object and show in inset window


I have a secondary camera (Cam1) added to a 3D object(obj1). So, when I click the object I want to activate the perspective camera- Cam1. It should basically look at the same direction as the object to show what lies in the object’s path. This is supposed to be shown in Inset window. Example:

    func A(){
   Cam1 = new THREE.PerspectiveCamera(10, window.innerWidth/window.innerHeight, -4, -35);
   insetWidth = window.innerHeight / 4; // square
   insetHeight = window.innerHeight / 4;
   Camera2.aspect = insetWidth / insetHeight;

In Render(), I have:

    renderer.setClearColor( 0x000000, 0 );
    renderer.setViewport(0, 0, window.innerWidth, window.innerHeight);
    renderer.render(scene, camera);

			// inset scene
    renderer.clearDepth(); // important!
    renderer.setScissor(20, 20, insetWidth, insetHeight);
    renderer.setViewport(20, 20, insetWidth, insetHeight);
    renderer.setClearColor( 0x222222, 1 );

I have tried:





var pos = new THREE.Vector3();       
renderer.render(scene, cam1);

Now there are two problems:

  1. I can’t see anything in inset window.
  2. The camera keeps exponentially forward and in arbitrary directions when I move the object.

Please help me solving this.

Thank you in advance.

Camera’s look along the negative z-axis by default. You have to rotate the camera around the y-axis around 180 degrees so it looks along the positive z-axis like ordinary 3D objects. Do this like so:

Cam1.rotation.y = Math.PI;

If you do this and assuming the camera is child of a 3D object, it should automatically look along the same forward vector.

I have tried this and it is still the same.
The objgroup is a group of meshed 3D objects which make a whole robot.
I have the helper activated to see where is camera is looking. Although it is a plane, sometimes it is looking half below the plane and half above and in some place, it is looking just over the place. When I move the objgroup forward, the camera moves ahead of it exponentially as well as rotates around the objgroup while going further ahead and when I move the objgroup backward, it sort of comes back.


Can you please share your current implementation as a live example? I’m afraid your fiddle does not demonstrate this wrong behavior. Sharing a git repository with your code is also a good idea.

BTW: The inset view seems totally unrelated to your real issue. This topic seems more about the proper transformation of your camera.

I think attaching the camera to the object makes it only harder to predict the behavior. Manually updating camera position and rotation with the robot movement sounds easier.

Take a look at this example. If I understood the problem correctly, this is what you are looking for.


This is exactly what I wanted. Thank you.
However, the camera looks on -z axis.
How can I change it to look on x axis?