@dcwsky/threecss2drender

threejs offical apply CSS2DRender.js with npm

Usage no npm install needed!

<script type="module">
  import dcwskyThreecss2drender from 'https://cdn.skypack.dev/@dcwsky/threecss2drender';
</script>

README

three-css2drender

threejs offical apply CSS2DRender.js with npm

install

npm i --save @dcwsky/threecss2drender

usage


import * as THREE from 'three'
import {CSS2DRenderer, CSS2DObject} from '@dcwsky/threecss2drender'


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

}