# three.css

> A CSS renderer for three.js in CommonJS format

Latest version **1.0.0** (published 2016-02-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install three.css
pnpm add three.css
yarn add three.css
bun add three.css
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2016-02-26 |
| First published | 2016-02-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Andrei Kashcha |
| Maintainers | anvaka |
| Keywords | css, renderer, three.js |

## Links

- npm: https://www.npmjs.com/package/three.css
- Repository: https://github.com/anvaka/three.css
- Homepage: https://github.com/anvaka/three.css#readme
- Issues: https://github.com/anvaka/three.css/issues
- npm.io page: https://npm.io/package/three.css

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2016-02-26

## README

# three.css

A CSS renderer for three.js in CommonJS format

# usage

To create a CSS renderer and then render the scene:

``` js
var THREE = require('three');
var CSS3D = require('three.css');

var cssScene = new THREE.Scene();
var cssRenderer = new CSS3D.Renderer();
cssRenderer.setSize(sceneWidth, sceneHeight);

var container = cssRenderer.domElement;
container.style.position = 'absolute';
container.style.top = 0;
container.style.margin = 0;
container.style.padding = 0;

document.body.appendChild(cssRenderer.domElement);

// render loop
requestAnimationFrame(animate);

function animate() {
  requestAnimationFrame(animate);

  cssRenderer.render(cssScene, camera);
  // ...
}
```

To add objects to the scene:

``` js
  var css3dObject = new CSS3D.Object(domElement);
  cssScene.add(css3dObject);
```

# license

MIT

---
_Source: https://npm.io/package/three.css · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._