c3r-three

A CSS renderer for three.js, built on C3R. Like three's own CSS3DRenderer it renders CSS3DObject and CSS3DSprite, but it also renders meshes and sprites with colors and textures.

Requires three.js r160 or newer. TypeScript declarations are included; install @types/three alongside.

Usage

npm install c3r-three three

import { C3RRenderer, CSS3DObject } from "c3r-three";

const renderer = new C3RRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

renderer.render(scene, camera);

Until setSize() the scenes fill the window and follow it, like a C3R Container.

CSS3DObject and CSS3DSprite are re-exported from three/addons, so their elements receive pointer events as with three's renderer.

Perspective and orthographic cameras are supported, including zoom. Material color, map (image or canvas, with repeat and offset, its alpha always; a color tints it with Filter.tint), opacity (when transparent) and side (BackSide shows both sides) are applied, and a material's style is removed on its dispose(). renderer.dispose() removes every rendered scene, and renderer.toHTML() (async) exports them.

new C3RRenderer({ shading: true }) shades Lambert, Phong and Standard materials by the scene's visible AmbientLights and first DirectionalLight, in grayscale: smooth from the geometry's normals, or flat with flatShading. MeshBasicMaterial stays unlit. specular: true adds Phong materials' highlights, without specularMap, and each camera turn then restyles every polygon with one. Shadows are left out.

Not supported yet: ImageBitmap maps such as GLTFLoader's, flipY: false, and map rotation and center.

Node

Set up a DOM with image loading as described in c3r, render, then export with await renderer.toHTML(). See node-render.mjs.

See the examples.