Projections

polycss uses CSS 3D perspective to project the scene. The perspective attribute on <poly-scene> (or perspective prop on PolyScene / PolyCamera) controls the depth illusion, and rot-x / rot-y control the camera angle.

Live demo — camera controls

Use the sliders below to explore how perspective, rotX, and rotY interact.

Loading…

Vanilla JS React Vue

Perspective depth

Higher perspective values feel flatter (more isometric-like); lower values exaggerate depth. A value of false gives orthographic projection (no perspective distortion).

Vanilla JS

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

<!-- Standard perspective -->
<poly-scene perspective="1000" rot-x="65" rot-y="45">
  <poly-mesh src="/cottage.glb"></poly-mesh>
</poly-scene>

<!-- Very flat / near-isometric -->
<poly-scene perspective="8000" rot-x="65" rot-y="45">
  <poly-mesh src="/cottage.glb"></poly-mesh>
</poly-scene>

<!-- Orthographic -->
<poly-scene perspective="false" rot-x="65" rot-y="45">
  <poly-mesh src="/cottage.glb"></poly-mesh>
</poly-scene>

React

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

// Standard perspective
<PolyScene perspective={1000} rotX={65} rotY={45}>
  <PolyMesh src="/cottage.glb" />
</PolyScene>

// Very flat / near-isometric
<PolyScene perspective={8000} rotX={65} rotY={45}>
  <PolyMesh src="/cottage.glb" />
</PolyScene>

// Orthographic
<PolyScene perspective={false} rotX={65} rotY={45}>
  <PolyMesh src="/cottage.glb" />
</PolyScene>

Vue

<template>
  <!-- Standard perspective -->
  <PolyScene :perspective="1000" :rot-x="65" :rot-y="45">
    <PolyMesh src="/cottage.glb" />
  </PolyScene>
</template>

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

Camera angles

Use rot-x and rot-y (vanilla) / rotX and rotY (React, Vue) to position the camera:

• rotX — vertical tilt. 90 is straight-down top view; 0 is horizontal.
• rotY — horizontal rotation (0–360). Controls which face of the scene is forward.

<!-- Vanilla -->
<poly-scene rot-x="65" rot-y="45">…</poly-scene>   <!-- Classic isometric angle -->
<poly-scene rot-x="80" rot-y="45">…</poly-scene>   <!-- More top-down (map view) -->
<poly-scene rot-x="20" rot-y="0">…</poly-scene>    <!-- Front-facing -->

// React
<PolyScene rotX={65} rotY={45}>…</PolyScene>
<PolyScene rotX={80} rotY={45}>…</PolyScene>
<PolyScene rotX={20} rotY={0}>…</PolyScene>

When to adjust perspective

• High perspective (≥ 4000): Near-isometric feel, minimal depth distortion. Good for architectural renders or strategy-game-style views.
• Low perspective (500–1000): Strong depth foreshortening. Good for dramatic close-up shots or first-person-adjacent views.
• Orthographic (false): Perfect isometric, no depth distortion at all. Good when you need pixel-perfect isometric scenes.

Related

• PolyScene — Full perspective, rotX, rotY prop reference.
• PolyCamera — Imperative camera control.
• Performance — Merge modes and DOM tuning.