React-three-fiber unable to rotate camera no matter what

[morsmodr]

    <Canvas
      invalidateFrameloop
      colorManagement
      shadowMap
      onCreated={({ camera, gl, scene }) => {
        gl.setPixelRatio(window.devicePixelRatio);
        gl.outputEncoding = sRGBEncoding;
        gl.physicallyCorrectLights = true;
        gl.shadowMap.enabled = true;
        gl.shadowMap.type = PCFSoftShadowMap;
        gl.toneMapping = ACESFilmicToneMapping;
        console.log({ camera });
        const yAxis = new Vector3(0, 1, 0);
        const xAxis = new Vector3(1, 0, 0);
        camera.setRotationFromAxisAngle(yAxis, 60);
        camera.lookAt([0, -50, 0]);
        // camera.rotateY(Math.PI);
        camera.updateProjectionMatrix();
      }}
    >
      <PerspectiveCamera
        makeDefault
        // rotation={[Math.PI, 0, 0]}
        fov={75}
        position={[240, -420, 240]}
        near={1}
        far={1000}
      ></PerspectiveCamera>
      <Suspense fallback="loading">
        <Model {...props} {...position} />
      </Suspense>
    </Canvas>

I have this above code but for some reason the camera is still looking at the model straight ahead. I want it to look at the model a little from the top. I tried adding rotation through props and through the onCreated function as well, but still no dice. Not sure what simple thing I am missing here.

I refactored the code to be like this, where camera is its own function component. With this the camera is set to center (inside) of the object. None of the values seems to have been applied through the useEffect

function SceneCamera() {
 const { camera } = useThree();

 useEffect(() => {
  camera.fov = 75;
  camera.near = 1;
  camera.far = 1000;
  camera.position.set([240, -420, 180]);
  camera.rotateY(60);
  camera.updateProjectionMatrix();
 }, []);
 return <PerspectiveCamera makeDefault></PerspectiveCamera>;
 }

 <Canvas
   invalidateFrameloop
   colorManagement
   shadowMap
   onCreated={({ gl }) => {
     gl.setPixelRatio(window.devicePixelRatio);
     gl.outputEncoding = sRGBEncoding;
     gl.physicallyCorrectLights = true;
     gl.shadowMap.enabled = true;
     gl.shadowMap.type = PCFSoftShadowMap;
     gl.toneMapping = ACESFilmicToneMapping;
   }}
 >
  <SceneCamera />
  <Suspense fallback="loading">
    <Model {...props} {...position} />
  </Suspense>
 </Canvas>

No dice 🤷‍♂️
The strange thing with rotation in props like this is that everything except rotation is applied. Whether I use it like this
rotation={[0, 0, Math.PI]}
or
rotation={[0, Math.PI, 0]}
or
rotateY={180}

It is all the same, no impact whatsoever 🤷‍♂️

function SceneCamera() {

return (
 <PerspectiveCamera
  makeDefault
  rotation={[0, 0, Math.PI]}
  fov={75}
  position={[240, -420, 240]}
  near={1}
  far={1000}
  ></PerspectiveCamera>
 );
}

What am I missing to factor in?

[drcmda]

do you use controls? they will immediately overwrite all your transforms, that's what they're made for. other than that you have to google "threejs can't rotate camera", there must be a reason - this is a threejs thing, but don't really know what it could be other than controls.

[drcmda]

tried it real quick and rotations work fine

function Test() {
  const camera = useThree(state => state.camera)
  useEffect(() => {
    camera.rotation.set(0, 0.5, 0)
    camera.updateProjectionMatrix()
  }, [])
  return null
}

<Canvas>
  <Test />