The camera position is not updated in real time.

[Alecapra96]

import { OrbitControls } from "@playcanvas/react/scripts";
import { Application, Entity } from "@playcanvas/react";
import { FILLMODE_FILL_WINDOW, RESOLUTION_AUTO } from "playcanvas";

export function App() {
  return (
    <Application
      fillMode={FILLMODE_FILL_WINDOW}
      resolutionMode={RESOLUTION_AUTO}
    >
      <Entity name="camera" position={[11, 0, 2]}>
        <Camera />
        <OrbitControls />
      </Entity>
      <Entity name="box" scale={[4, 4, 4]}>
        <Render type="box" />
      </Entity>
    </Application>
  );
}

export default App;

If I change the position of <Entity name="camera" position={[11, 0, 2]}> It doesn't take effect until I refresh the page.
The solution I found is:

// src/app.tsx
import { useState } from "react";
import { Application, Entity } from "@playcanvas/react";
import { Camera, Render } from "@playcanvas/react/components";
import { OrbitControls } from "@playcanvas/react/scripts";
import { FILLMODE_FILL_WINDOW, RESOLUTION_AUTO } from "playcanvas";

export function App() {
  // Camera position presets
  const presets: Record<string, [number, number, number]> = {
    front: [0, 0, 4],
    side: [4, 0, 0],
    top: [0, 4, 0],
    iso: [2, 2, 2],
  };

  // State for the current camera position
  const [camPos, setCamPos] = useState<[number, number, number]>(presets.front);

  return (
    <div className="w-full h-full dark">
      <Application
        fillMode={FILLMODE_FILL_WINDOW}
        resolutionMode={RESOLUTION_AUTO}
      >
        {/* Key based on position forces Entity remount */}
        <Entity key={camPos.join(",")} name="camera" position={camPos}>
          <Camera />
          <OrbitControls />
        </Entity>

        <Entity name="box" scale={[4, 4, 4]}>
          <Render type="box" />
        </Entity>
      </Application>

      {/* UI controls to change the camera position */}
      <div className="absolute top-4 left-4 flex space-x-2 z-10">
        {Object.entries(presets).map(([label, coords]) => (
          <button
            key={label}
            onClick={() => setCamPos(coords)}
            className="px-4 py-2 bg-blue-600 text-white rounded shadow hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300"
          >
            {label}
          </button>
        ))}
      </div>
    </div>
  );
}

export default App;

But it's not the best, and if I want to make animations with the camera or transitions from front to back, I don't know how to do it.

Dependencies :

"dependencies": {
"@playcanvas/react": "^0.3.0",
"@preact/preset-vite": "^2.10.1",
"@tailwindcss/vite": "^4.1.4",
"lucide-react": "^0.475.0",
"playcanvas": "2.3.3",
"preact": "^10.26.5",
"tailwindcss": "^4.1.4"
},

BTW playanvas/react 0.3 dont work with the last of playcanvas

[marklundin]

I will take a look. This may be because the OrbitControls takes control and overrides the camera position