Camera rotation is not working for pre define coordinates model

Discussion
1

I’m having an issue with camera rotation when using predefined models in Three.js. The camera does not rotate as expected, even though the same setup works fine in other scenes.

I’ve verified that the camera controls are properly configured. However, when loading certain models (e.g., via GLTF/OBJ loaders), the rotation behaves incorrectly.

Has anyone encountered this issue before? Could it be related to model scale, pivot/origin, or control settings? Any suggestions would be appreciated.

NOTE: The model has its own coordinate system, so it is not positioned at the origin or aligned parallel to the plane. This is likely affecting the camera controls and rotation behavior.

Here is the demo/code for reference: threejs-billboard (forked) - StackBlitz

2

this is a pretty common issue when dealing with imported models

what’s usually happening is not really a camera problem but the model’s pivot/origin being somewhere weird. orbit controls rotate around a target, so if your model is offset or not centered at 0,0,0 the rotation will feel broken or off

a few things you can try

first center the model after loading. you can compute its bounding box and move it to the origin

const box = new THREE.Box3().setFromObject(model)
const center = box.getCenter(new THREE.Vector3())
model.position.sub(center)

second make sure your controls target matches where the model actually is

controls.target.copy(model.position)
controls.update()

third sometimes models come in with rotations or nested transforms, so it helps to wrap it in a group and control that instead

const group = new THREE.Group()
group.add(model)
scene.add(group)

then center the group instead of the raw model

also check scale. if the model is extremely large or tiny, orbit controls can feel weird because of min/max distance

and yeah your note about coordinate system is probably the root cause. if the model isn’t aligned and centered, orbit controls will rotate around some arbitrary point

if you can share which loader and a snippet of how you add controls, might be easier to pinpoint exactly

3

I am using GLTFLoader and please check in stackblitz link @Umbawa_Sarosong

const model = new GLTFLoader();

  model.load(

    'assets/SK_pit.glb',

    (gltf: any) => {

      observer.next(gltf.scene);

    },

    undefined,

    (error) => {

      observer.error(error);

    }

  );