I'm using the three-viewport-gizmo library for my project, which works similarly to the original ViewHelper library, so I expect many to understand the context.

I have an “autoRotate” parameter in my dat.gui, which updates the OrbitControls via its update method in the animation loop. The issue arises when, for example, I click on the “y” axis of the three-viewport-gizmo from the bottom view to switch to the top view. While the main transition from top to bottom works fine, there is a sharp jump during the z-axis alignment. I discovered this happens because I call OrbitControls.update() in the animation loop. The only workaround I found is to use the check “if (!gizmo.animating) controls.update()” inside the animation function. However, I’m not sure if this check is optimal performance-wise and would like advice on a better solution.

Below is part of my code:

JAVASCRIPTCopied
useEffect(() => {
if (typeof window === ‘undefined’ || !mountRef.current) return

  const scene = new Scene()
  const renderer = new WebGLRenderer({ antialias: true })
  const fov = options.preset === 'assetgenerator' ? (0.8 * 180) / Math.PI : 60
  const camera = new PerspectiveCamera(
    fov,
    mountRef.current.clientWidth / mountRef.current.clientHeight,
    0.1,
    1000
  )
  const controls = new OrbitControls(camera, renderer.domElement)
  acticveCameraRef.current = camera
  camera.position.set(0, 0, 3)

  //scene.background = new Color(state.bgColor)
  const hemiLight = new HemisphereLight(0xffffff, 0x8d8d8d, 3)
  hemiLight.position.set(0, 20, 0)
  scene.add(hemiLight)
  scene.add(camera)

  renderer.setClearColor(0xcccccc)
  renderer.setPixelRatio(window.devicePixelRatio)
  renderer.setSize(
    mountRef.current.clientWidth,
    mountRef.current.clientHeight
  )

  pmremGenerator.current = new PMREMGenerator(renderer)
  pmremGenerator.current.compileEquirectangularShader()
  neutralEnv.current = pmremGenerator.current.fromScene(
    new RoomEnvironment()
  ).texture

  controlsRef.current = controls
  sceneRef.current = scene
  rendererRef.current = renderer
  cameraRef.current = camera
  mountRef.current.appendChild(renderer.domElement)

  const gizmo = new ViewportGizmo(camera, renderer, {
    container: mountRef.current,
    type: 'sphere',
  })
  viewHelper.current = gizmo
  gizmo.target = controls.target.set(0, 0, 0)
  camera.lookAt(controls.target)
  gizmo.addEventListener('start', () => {
    controls.enabled = false
    console.log('start')
  })
  gizmo.addEventListener('end', () => {
    controls.enabled = true
    console.log('end')
  })
  controls.addEventListener('change', () => {
    console.log('change')
    gizmo.update(false)
  })

  const handleResize = () => {
    if (!mountRef.current) return

    const { clientWidth, clientHeight } = mountRef.current
    camera.aspect = clientWidth / clientHeight
    camera.updateProjectionMatrix()
    renderer.setSize(clientWidth, clientHeight) //
    gizmo.update()
    controls.update()
  }
  window.addEventListener('resize', handleResize, false)
  setIsSceneReady(true)
  if (typeof window !== 'undefined') addGUI()

  const animate = () => {
    animationFrameIdRef.current = requestAnimationFrame(animate)
    if (!gizmo.animating) controls.update()

    renderer.clear()
    renderer.render(scene, camera)
    gizmo.render()
  }

  //addAxesHelper()
  animate()
  //if (options.kiosk) Gui.current?.close()
  return () => {
    console.log('CLEANUP')
    if (renderer) {
      renderer.dispose()
      renderer.domElement.remove()
    }
    if (animationFrameIdRef.current) {
      cancelAnimationFrame(animationFrameIdRef.current)
    }
    if (Gui.current && GuiWrap.current) {
      GuiWrap.current.removeChild(Gui.current.domElement)
      Gui.current.destroy() 
      Gui.current = null 
    }
    if (viewHelper.current) viewHelper.current.dispose()
    window.removeEventListener('resize', handleResize)
  }
}, []

For clarification, the transition works as expected:
• When I use the check (if (!gizmo.animating) controls.update()), the transition is smooth.
• Without the check (only calling controls.update()), there is a sharp jump on the z-axis.
• If I remove controls.update() entirely from the animation function, the transition is smooth but disables autoRotate.

I would appreciate any insight into what might be causing the issue and advice on the best way to handle this. Thanks!