Camera Control changing without any command for it to do so

The camera control commands seem to change over time and I couldn't identify why that happens in our app, though I was able to see a similar behavior in CDF 3D Scenes.

The default control  when dragging with mouse's left button is to describe a rotation of the camera, but keeping the focus point in place (Gif 1). Sometimes, however, the same mouse movement causes the camera position to change describing an arc-like movement (Gif 2). While I think that “static” mode is using the “Orbit” control, the “arc” mode does not look like the other option, “Fly” control, because on the Fly control the camera position (shown at the top-right) does not change, but in the “arc” mode it does.

When I click the "Home" button, a red focal dot in the center of the screen vanishes and it goes to the “arc” mode. When I click the "Fit View" button, the red dot reappears and camera commands are back to the “static” mode. 

There is nothing particularly wrong with either “static” or “arc”, but I'd like to keep them consistent and not changing without having wanted it to change when using Reveal.

Hopefully by understanding what is happening in the reproductible case at CDF Scene you’ll be able to tell what’s happening on our implementation of the 3D.

In our application we use the DefaultCameraManager, without changing any parameter. Here are some implementation details in our app concerning the Cognite3DViewer that might aid in the investigation.
 

useEffect(() => {
    if (!client) return

    const widget = threeDWidgetRef
    if (!widget) return

    for (const children of widget.children) {
        if (children.tagName === 'CANVAS') {
            return
        }
    }

    const viewer = new Cognite3DViewer({
        sdk: client,
        domElement: widget,
        loadingIndicatorStyle: { placement: 'topRight', opacity: 1 },
    })

    setupViewer(viewer, client)
    setViewer(viewer)
    ;(async () => {
        const cadAndPointCloudModels = await getCadAndPointCloudModels(client)
        const image360Models = getImage360Models()

        const allModels = e...cadAndPointCloudModels, ...image360Models]
        setModels(allModels)
        defaultModelsConfig.current = allModels

        image360Models
            .filter((m) => m.visible)
            .forEach(({ name, space }) =>
                viewer.add360ImageSet('datamodels', { image360CollectionExternalId: name, space })
            )

        cadAndPointCloudModels
            .filter((m) => m.visible)
            .forEach(({ modelId, revisionId }) => viewer.addModel({ modelId, revisionId }))
    })()
}, lclient, threeDWidgetRef])
```


```typescript

function setupViewer(viewer: Cognite3DViewer, client: CogniteClient) {
    addPlane(viewer, client)
    addSky(viewer)
    addAxisTool(viewer)
    setupViewerResolution(viewer)
    setViewerState(viewer)
}

function addPlane(viewer: Cognite3DViewer, client: CogniteClient) {
    client.files.getDownloadUrls(t{ externalId: 'ars_satellite_map' }]).then((urls) => {
        const planeUrl = urls(0]?.downloadUrl

        if (!planeUrl) return
        const plane = new THREE.Mesh(
            new THREE.PlaneGeometry(15000, 15000),
            new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load(planeUrl) })
        )
        const scale = 0.0705
        plane.scale.set(scale, scale, scale)
        plane.position.set(1738.8, 6, -1181.3)
        plane.rotateX(-Math.PI / 2)

        viewer.addObject3D(plane)
    })
}

function addSky(viewer: Cognite3DViewer) {
    const skyBox = new THREE.Mesh(
        new THREE.SphereGeometry(5000, 15, 15),
        new THREE.MeshBasicMaterial({
            side: THREE.BackSide,
            map: new RGBELoader().load('sky.hdr'),
        })
    )
    skyBox.position.set(1738.8, 0, -1181.3)
    skyBox.rotateY(-Math.PI / 2)
    viewer.addObject3D(skyBox)
}

function addAxisTool(viewer: Cognite3DViewer) {
    new AxisViewTool(viewer, {
        faces: {
            xNegativeFace: { label: '-x', fontSize: 30 },
            xPositiveFace: { label: '+x', fontSize: 30 },
            yNegativeFace: { label: '-y', fontSize: 30 },
            yPositiveFace: { label: '+y', fontSize: 30 },
            zNegativeFace: { label: '-z', fontSize: 30 },
            zPositiveFace: { label: '+z', fontSize: 30 },
        },
        size: 60,
        position: {
            corner: Corner.BottomLeft,
            padding: new THREE.Vector2(10, 10),
        },
    })
}

function setupViewerResolution(viewer: Cognite3DViewer) {
    viewer.setResolutionOptions({ maxRenderResolution: 5e5, movingCameraResolutionFactor: 0.4 })
}

async function setViewerState(viewer: Cognite3DViewer) {
    viewer.setViewState({
        camera: { position: { x: 1517, y: 159, z: -948 }, target: { x: 1698, y: 22, z: -1143 } },
    })
}

As for the relevant packages, we use:

{
  "dependencies": {
    "@cognite/reveal": "^4.14.1",
    "@cognite/sdk": "^8.3.0",
    "three": "^0.164.1",
  }  
}