R3f canvas rotate

Questions
1

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

2

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

3

1713146644638
1713146644638814×928 49.5 KB

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>

);
}

4

I have the same problem as you, can you solve it?

5

You shouldn’t manually rotate the camera - browser / system handles that out of the box.

If you rotate the camera manually, you’ll get undefined behaviour depending on whether or not user has unlocked screen rotation on their device (if they didn’t - the viewport will rotate, while the user does not want it to; if they did - the viewport will rotate twice.)