GoKawiilPolyCSS
A CSS polygon mesh library. A 3D engine for the DOM. Renders OBJ/MTL, GLB and VOX as real HTML elements transformed with CSS matrix3d(...) . Supports colors, textures, lighting, shadows, shapes and animations. Works with React, Vue or plain JavaScript.
Visit polycss.com for docs and model examples.
Installation
# Vanilla npm install @layoutit/polycss # React npm install @layoutit/polycss-react # Vue npm install @layoutit/polycss-vue
You can also load PolyCSS directly from a CDN. Here is a minimal custom-element scene:
< script type =" module " src =" https://esm.sh/@layoutit/polycss/elements " > </ script > < poly-camera rot-x =" 65 " rot-y =" 45 " > < poly-scene > < poly-orbit-controls drag wheel > </ poly-orbit-controls > < poly-box size =" 100 " color =" #ffd166 " > </ poly-box > </ poly-scene > </ poly-camera >
Framework Components
React and Vue expose the same component model. <PolyCamera> owns the viewpoint, <PolyScene> owns lighting and atlas options, and <PolyMesh> loads or receives polygon data.
import { PolyCamera , PolyScene , PolyOrbitControls , PolyMesh } from "@layoutit/polycss-react" ; export default function App ( ) { return ( < PolyCamera rotX = { 65 } rotY = { 45 } > < PolyScene textureLighting = "dynamic" > < PolyOrbitControls drag wheel /> < PolyMesh src = "/gallery/obj/cottage.obj" mtl = "/gallery/obj/cottage.mtl" /> </ PolyScene > </ PolyCamera > ) ; }
... continue reading