three-css2drender

three-css2drender

threejs offical apply CSS2DRender.js with npm

install

npm i --save three-css2drender

usage

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 );

}