Quickstart

Get a 3D mesh rendering in your project in two steps.

1. Install the package

Vanilla JS

npm install polycss

React

npm install @polycss/react

Vue

npm install @polycss/vue

2. Add a scene and load a mesh

The scene element (<poly-scene> / PolyScene) sets up the 3D viewport — perspective, camera, lighting. The mesh element (<poly-mesh> / PolyMesh) loads an OBJ or GLB file and renders its polygons. Pass rot-x / rot-y to set the camera angle.

Vanilla JS

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

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

React

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

export function App() {
  return (
    <PolyScene rotX={65} rotY={45} perspective={1000}>
      <PolyMesh src="/cottage.glb" />
    </PolyScene>
  );
}

Vue

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

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

Live preview

Loading…

Vanilla JS React Vue

What you get

Every polygon in the loaded mesh becomes a real DOM element — an atlas-backed <div> for UV-textured and flat-color polygons, positioned with transform: matrix3d(...). You can:

• Inspect individual polygons in DevTools.
• Target them with CSS selectors.
• Attach onClick, onMouseEnter, and other standard DOM event handlers.

Related

• Core Concepts — The mental model: PolyScene, PolyMesh, Poly, polygon data, pipeline.
• PolyCamera — Camera props and usage reference.
• PolyScene — Scene props and mesh options.
• Loading Meshes — OBJ, GLB, MTL loading and UV textures.
• Gallery — Browse mesh models for inspiration.