Update the initial camera rotation of the orbitControls using react three fiber?

Questions
, , , ,
1

I want to change the initial camera rotation on each new room but the orbitcontrols overwrite the camera.rotation values.
Can someone help me to set a starting rotation for the camera?

<Canvas camera={{ fov: 0, near: 0.1, far: 1000, position: customCameraPpositiion }}>

      <Suspense fallback={<Loader siteInfos={siteInfos} />}>
        <Preload all /> 
        <ambientLight />
        <Portals siteInfos={siteInfos} sitePhotos={sitePhotos} />            
      </Suspense>
    </Canvas>
2

that’s what orbit controls do, they control the camera, by overwriting its matrix every frame. instead of pulling at the camera, which you can’t if you have controls, you should alter the controls instead.

i would generally recommend throwing orbit controls out, they’re old and inflexible. use camera controls, they are much better looking (using unity damping) and can be controlled by code.

3

First i want to thank you for you response.
But it seems that with CameraControls i can’t inverse the camera rotation even with dampingFactor and the rotation speed is not included as props.
Example when i hold click and move my mouse to the left i want the camera to rotate to the right.

4

i don’t know it too well yet but i feel like it should be possible. perhaps might even be worth to ask on their github.

generally, if you have controls you normally shouldn’t pull at the camera, because two places making a tug of war pulling at the same object creates a race condition.

the solution should be one of these:

  • you make CC work somehow
  • you fork OC or CC and implement your usecase
  • you do not use controls
  • you use controls but you don’t mutate the camera but the group that contains the scene objects
5

@drcmda now i work with cameraControls instead of OrbitControls to be able to set a new camera rotation like you said.
But i don’t know how to do so, can you please give me an example here is my code:

function AnimationIn(camera:PerspectiveCamera, onClick: (arg0: number) => void ,i:number ){
  gsap.to(camera, {
    fov: 50,
    duration: 0.6,
    ease: "power1.inOut",
    onUpdate: function () {
      camera.updateProjectionMatrix();	
    },
    onComplete: function() {
      onClick(i);
      //Setting the new camera rotation
      camera.rotation.set(1,1,0)
      camera.updateProjectionMatrix();	
    }
  }) 
}
6

i think there should be no gsap. cc is animated already. remove gsap completely, allow cc to rotate and move around. otherwise i don’t see how this can work because, again, you have two places that pull on the same camera, how can a race condition ever make sense?

7

I’m still stack even with CameraControls i can’t set the initial camera rotation. here is my code:

function CameraControlsRotation (camera:PerspectiveCamera){
  //camera.rotateY(1);
  //camera.rotation.set(1,1,1);
  //camera.rotation.y=0.7
  camera.updateProjectionMatrix();
  console.log("===============",camera.rotation,"================")	
  
return(<></>)
}

<Canvas camera={{ fov: 80, near: 0.1, far: 1000, position: customCameraPpositiion }}>
          <Teste/>
        <CameraControls
          enabled={true}
          ref={cameraControlsRef}
          />
          <Suspense fallback={<Loader siteInfos={siteInfos} />}>
            <Preload all /> 
            <ambientLight />
            <Portals siteInfos={siteInfos} sitePhotos={sitePhotos} />            
          </Suspense>
        </Canvas>
8 
function CustomCameraControls(){
  const cameraControlsRef = useRef<CameraControls>(null);
  
  useEffect(() => {
    //cameraControlsRef.current?.rotate(1, 0, false)
    //cameraControlsRef.current?.moveTo(-111,100,111,true)
    cameraControlsRef.current?.lookInDirectionOf(-15, 0, -1, false)
  });
  //console.log("hello =============== ",cameraControlsRef)

  return(<CameraControls
    enabled={true}
    ref={cameraControlsRef}
    />)
}

Now it works thanks.