# three-css2drender

> threejs offical apply CSS2DRender.js with npm

Latest version **1.0.0** (published 2018-06-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install three-css2drender
pnpm add three-css2drender
yarn add three-css2drender
bun add three-css2drender
```

## 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 | 2018-06-06 |
| First published | 2018-06-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 4.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | tomyl |
| Maintainers | tomyl |
| Keywords | css2drender, CSS2DRender, three-CSS2DRender, threejs, three.js |

## Links

- npm: https://www.npmjs.com/package/three-css2drender
- Repository: https://github.com/cs64188/three-css2drender
- Issues: https://github.com/cs64188/three-css2drender/issues
- npm.io page: https://npm.io/package/three-css2drender

## Recent versions

- 1.0.0 (latest) — 2018-06-06

## README

## three-css2drender

threejs offical apply CSS2DRender.js with npm

## install

`npm i --save three-css2drender`

## usage

```js

import * as THREE from 'three'
import {CSS2DRenderer, CSS2DObject} from 'three-css2drender'


let scene = new THREE.Scene()

// init CSS2DRenderer
labelRenderer = new CSS2DRenderer();
labelRenderer.setSize( window.innerWidth, window.innerHeight );
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = '0';
labelRenderer.domElement.style.pointerEvents = 'none';
document.getElementById( 'container' ).appendChild( labelRenderer.domElement );

// add label object
var text = document.createElement( 'div' );
text.className = 'label';
text.style.color = 'rgb(' + atom[ 3 ][ 0 ] + ',' + atom[ 3 ][ 1 ] + ',' + atom[ 3 ][ 2 ] + ')';
text.textContent = atom[ 4 ] + 'Test';

var label = new CSS2DObject( text );
label.position.copy( object.position );
object.add( label );

...

function onWindowResize() {

  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize( window.innerWidth, window.innerHeight );
  labelRenderer.setSize( window.innerWidth, window.innerHeight );

  render();

}

function animate() {

  requestAnimationFrame( animate );
  renderer.render( scene, camera );
  labelRenderer.render( scene, camera );

}

```

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