r3f canvas rotate

I created a simple scene in portrait and landscape on the phone. I rotated the canvas. When I added camera-control, the interaction was in the opposite direction. I didn’t know how to solve it. Thanks

You shouldn’t need to rotate canvas - this would confuse pointer-event calculations. Why and how are you rotating it?


Because I find it troublesome to ask users to turn off portrait lock,So I rotated the canvas using css
function Scene() {
const set = useThree((state) => state.set);
const { size, camera, raycaster } = useThree();
useEffect(() => {
if (isMobile) {
set({ size: { width: window.innerHeight, height: window.innerWidth } });
}
}, );

useEffect(() => {
function handleMouseMove(event) {

  const x = event.clientY;
  const y = size.width - event.clientX;

  const normalizedX = (x / size.height) * 2 - 1;
  const normalizedY = -(y / size.width) * 2 + 1;


  raycaster.setFromCamera({ x: normalizedX, y: normalizedY }, camera);
}

window.addEventListener("touchmove", handleMouseMove);

return () => {
  window.removeEventListener("touchmove", handleMouseMove);
};

}, [size, camera, raycaster]);

return
}

function App() {
return (
<div
className=“page-root”
style={
isMobile
? {
transform: “rotate(90deg)”,
transformOrigin: “0px 0px 0px”,
margin: “0px 0px 0px 375px”,
width: “667px”,
height: “375px”,
}
: {}
}
>


<spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
<pointLight position={[-10, -10, -10]} />
<perspectiveCamera
makeDefault
fov={75}
aspect={(window.innerHeight / window.innerWidth) * -1}
position={[0, 0, 5]}
/>

  </Canvas>
</div>

);
}