Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
8ae73dd
Modernize tooling: Rollup 4, gl-matrix 3 imports, ESLint, Prettier
K-Adam Oct 23, 2026
9ab8490
Format with Prettier and trim comments
K-Adam Oct 23, 2026
8c4f3ed
Restructure into npm workspace
K-Adam Oct 23, 2026
5ea8aea
Format c3r-three with Prettier
K-Adam Oct 23, 2026
a70ab05
Build with Vite, build dist in CI
K-Adam Oct 23, 2026
0c341db
Port c3r-three to three r186
K-Adam Oct 23, 2026
f0714cb
Convert examples to ES modules and Vite
K-Adam Oct 23, 2026
6abfc10
Port c3r to TypeScript
K-Adam Oct 23, 2026
333d861
Port c3r-three to TypeScript
K-Adam Oct 23, 2026
f06bcd8
Replace ESLint with tsc checks
K-Adam Oct 23, 2026
e8f9a4d
Fix seams between mesh polygons
K-Adam Oct 23, 2026
a221d23
Ship c3r as ESM with a single browser bundle
K-Adam Oct 24, 2026
64bb0e7
Fix rendering bugs and add tests
K-Adam Oct 24, 2026
baa28a4
Add WebGL vs C3R screenshot test
K-Adam Oct 24, 2026
1a4c4a6
Add Prettier pre-commit hook and VS Code format on save
K-Adam Oct 24, 2026
13c5137
Reformat with Prettier defaults
K-Adam Oct 24, 2026
5680f28
Simplify docs
K-Adam Oct 24, 2026
253ead1
Replace CSSClass with a single adopted stylesheet
K-Adam Oct 24, 2026
8da2751
Center FPS example skybox on camera
K-Adam Oct 24, 2026
3205c2b
Make physics example rope visible
K-Adam Oct 24, 2026
964da78
Simplify cube example mesh and camera setup
K-Adam Oct 24, 2026
843641b
Support rendering static HTML from Node
K-Adam Oct 24, 2026
d2a7169
Apply materials as shared stylesheet classes
K-Adam Oct 25, 2026
09217ce
Move camera projection into CSS classes
K-Adam Oct 25, 2026
0791523
Apply material and camera on assignment
K-Adam Oct 25, 2026
76495a1
Apply matrix on assignment
K-Adam Oct 25, 2026
ac695f0
Restrict matrix setter to groups
K-Adam Oct 25, 2026
4b56477
Apply all properties on assignment
K-Adam Oct 25, 2026
cff5891
Run checks before release
K-Adam Oct 25, 2026
47c2a78
Modernize examples
K-Adam Oct 25, 2026
2199364
Clip polygons below the 3d layer
K-Adam Oct 25, 2026
ee0f72e
Fix element style overrides and add Material.doubleSided
K-Adam Oct 25, 2026
bf6e18e
Polyfill Symbol.dispose before its first use
K-Adam Oct 25, 2026
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions .babelrc

This file was deleted.

1 change: 1 addition & 0 deletions .gitattributes
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
* text=auto eol=lf
26 changes: 26 additions & 0 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
name: CI

on:
push:
branches: [master]
pull_request:

permissions:
contents: read

jobs:
check:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 24
cache: npm
- run: npm ci
- run: npm run typecheck
- run: npm run format:check
- run: npx playwright install --with-deps chromium
- run: npm test
- run: npm run build
- run: node examples/node-render.mjs > /dev/null
46 changes: 46 additions & 0 deletions .github/workflows/release.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
name: Release

on:
push:
tags: ["v*"]

concurrency:
group: pages
cancel-in-progress: false

jobs:
build:
runs-on: ubuntu-latest
permissions:
contents: write
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 24
cache: npm
- run: npm ci
- run: npm run typecheck
- run: npm run format:check
- run: npx playwright install --with-deps chromium
- run: npm test
- run: npm run build
- uses: actions/upload-pages-artifact@v3
with:
path: examples/dist
- run: gh release create "$GITHUB_REF_NAME" packages/c3r/dist/*.js packages/c3r-three/dist/*.js --generate-notes
env:
GH_TOKEN: ${{ github.token }}

deploy:
needs: build
runs-on: ubuntu-latest
permissions:
pages: write
id-token: write
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
steps:
- id: deployment
uses: actions/deploy-pages@v4
6 changes: 3 additions & 3 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@

# Dependency directories
node_modules/
package-lock.json
dist/
__screenshots__/
.vitest/
1 change: 1 addition & 0 deletions .husky/pre-commit
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
npx lint-staged
3 changes: 3 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
**/dist/
package-lock.json
examples/public/
1 change: 1 addition & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{}
3 changes: 3 additions & 0 deletions .vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"recommendations": ["esbenp.prettier-vscode"]
}
4 changes: 4 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
26 changes: 20 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,27 @@
# CSS 3D Renderer

**C3R.js** is a lightweight library for displaying 3D scenes with CSS. It is designed to be used as a CSS3D backend for existing libraries. It provides classes to construct textured polygons, nest 3D transformed elements and handle camera.
Display textured 3D scenes with plain DOM elements and CSS transforms.

## Usage
| Package | Description |
| --------------------------------- | ---------------------------------------------------- |
| [`c3r`](packages/c3r) | The library |
| [`c3r-three`](packages/c3r-three) | three.js renderer (r160+) with geometry and textures |
| [`c3r-examples`](examples) | Standalone and ported three.js examples |

Just include `C3R.standalone.js` to your project, or include both `C3R.min.js` and `glMatrix`
Try the examples live [here](https://k-adam.github.io/CSS3D-Renderer/).

## Examples
## Install

The example projects be found in the *examples* directory. You can try them out live [here](https://k-adam.github.io/CSS3D-Renderer/examples/)
`npm install c3r`, or `npm install c3r-three three` for three.js. Prebuilt files are on [GitHub Releases](https://github.com/K-Adam/CSS3D-Renderer/releases).

I replaced the original CSS3D renderer of Three.js with a **C3R.js** based implementation, which supports buffergeometry and textures as well. It can be found at *examples/js/renderers/CSS3DRenderer.js*
## Development

Requires Node 24+. The packages are written in TypeScript.

```sh
npm install
npm run build # packages/*/dist, with type declarations
npm run dev # serve the examples
npm run typecheck # tsc in strict mode, also the linter
npm run format
```
Loading
Loading