PolyCamera

The camera component wraps a scene and controls how it is viewed — perspective depth, rotation angles, zoom, and optional pointer-driven interaction. For most use cases, pass camera attributes directly to the scene element / PolyScene component instead. The camera wrapper is useful when you need imperative camera control (e.g., animating the camera from code or syncing it to an external state) — it’s available as a React / Vue component (<PolyCamera>); vanilla users should set the same attributes (rot-x, rot-y, perspective, zoom, interactive) directly on <poly-scene>.

Props

Prop	Type	Default	Description
`zoom`	`number`	`1`	Scales the scene. `1` is the natural size; values above 1 zoom in, below 1 zoom out.
`rotX`	`number`	`65`	Rotation around the X axis in degrees.
`rotY`	`number`	`45`	Rotation around the Y axis in degrees (0–360).
`perspective`	`number \| false`	`1000`	CSS perspective depth in pixels. Pass `false` for orthographic projection.
`interactive`	`boolean`	`false`	When `true`, users can click and drag to rotate the camera.
`animate`	`boolean \| number \| object`	`false`	Auto-rotate. `true` uses defaults, a number sets the speed, or pass `{ axis, speed, pauseOnInteraction }`.

Usage

Basic Camera

Set an initial angle and perspective.

<script type="module" src="https://esm.sh/polycss/elements"></script>

<!-- Vanilla scenes set camera attributes directly on <poly-scene>. -->
<poly-scene zoom="0.8" rot-x="70" rot-y="30">
  <poly-mesh src="/cottage.glb"></poly-mesh>
</poly-scene>

import { PolyCamera, PolyScene, PolyMesh } from "@polycss/react";

export function App() {
  return (
    <PolyCamera zoom={0.8} rotX={70} rotY={30}>
      <PolyScene>
        <PolyMesh src="/cottage.glb" />
      </PolyScene>
    </PolyCamera>
  );
}

<template>
  <PolyCamera :zoom="0.8" :rot-x="70" :rot-y="30">
    <PolyScene>
      <PolyMesh src="/cottage.glb" />
    </PolyScene>
  </PolyCamera>
</template>

<script setup lang="ts">
import { PolyCamera, PolyScene, PolyMesh } from "@polycss/vue";
</script>

Interactive Camera with Auto-rotation

<!-- Vanilla -->
<poly-scene interactive animate>
  <poly-mesh src="/cottage.glb"></poly-mesh>
</poly-scene>

// React
<PolyCamera
  interactive
  animate={{ axis: "y", speed: 0.5, pauseOnInteraction: true }}
>
  <PolyScene>
    <PolyMesh src="/cottage.glb" />
  </PolyScene>
</PolyCamera>

`useCamera` hook (React)

useCamera is used internally by <PolyCamera>. For most use cases, pass camera props directly to <PolyScene> — it accepts all of PolyCamera’s props. Use <PolyCamera> as a wrapper when you need to separate camera state from scene layout.

PolyScene — The scene component that renders meshes.
Core Concepts — Camera — Conceptual explanation of camera props.
Quickstart — Install + first scene walkthrough.