使用React状态变化，我做了这个解决方案。
首先，你已经将每个房间定位在一个固定的点上。你需要旋转房间，这意味着你需要改变它们的位置。
为此，我改变了房间组件中的固定点，以从 prop 中获取。
例如：对于8号房间，

export function Room8({position,...props}) {
  const { nodes, materials } = useGLTF('./models/room8.glb')
  return (
    <group castShadow receiveShadow {...props} dispose={null}>
      <group castShadow receiveShadow position={position} rotation={[Math.PI, 0, Math.PI]}>
    ...your code
    </group>
  </group>
  )
}

对所有房间执行此操作。
然后将这些位置作为数组添加到PartOne.js中

const positions= useMemo(()=>[
    [0,0,0],
    [-4, -2.7, 0],
    [-0.5, -2.7, 3.6],
    [-7.6, -5.5, 0],
    [-4.5, -5.5, 3.6],
    [-0.4, -5.5, 7.2],
    [-7.6, -8.3, 3.55],
    [-4, -8.3, 7.2]
]);

单位：PartOne.js
添加一个状态以使您的房间井然有序。

const [rooms,setRooms]=useState(
    [RoomOne,Room2,Room3,Room4,Room5,Room6,Room7,Room8]
);

添加按钮并旋转房间阵列，

<button onClick={()=>{
   let arr=[...rooms];
   arr.unshift(arr.pop())
   console.log("arr::",arr)
   setRooms(arr)
}}>Rotate +1</button>

在画布内呈现状态rooms，

<Canvas shadows camera={{ fov:70, position: [0,0,30] }} >
    <Suspense fallback={null}  >
       <ambientLight intensity={0.3} />
       <directionalLight castShadow receiveShadow intensity={2} position={[80,80,80]} />
     {rooms.map((room,roomIndex)=>room({position:positions[roomIndex]}))}
       <ContactShadows />
    </Suspense>
    <OrbitControls enablePan={true} enableZoom={true} enableRotate={true} />
 </Canvas>

添加以上变更的沙盒供您参考，
Code Sandbox