JSFiddle - React, Tailwind, and code Playground

by mika i.

HTML

<div id="overlay">
Hello World
</div>

CSS

body { margin: 0; }
canvas { display: block; }

#overlay {
  background: rgba(255, 0, 0, 0.5);
  width: 230px;
  height: 130px;
  transform: translate(-50%, -50%) scale(1, -1);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  color: hotpink;
  background: yellow;
  border: 4px solid red;
}

JavaScript

import { CSS3DRenderer, CSS3DObject } from 'https://threejs.org/examples/jsm/renderers/CSS3DRenderer.js';

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var geometry = new THREE.PlaneGeometry(250, 150);
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var plane = new THREE.Mesh( geometry, material );
scene.add( plane );
camera.position.z = 500;

var div = document.getElementById('overlay');
var tempV = new THREE.Vector3();
var container = document.body;

var cssScene = new THREE.Scene();
var cssObject = new CSS3DObject(div);
// we reference the same position and rotation 
cssObject.position.set(plane.position.x, plane.position.y, plane.position.z);
cssObject.rotation.set(plane.rotation.x, plane.rotation.y, plane.rotation.z);
// add it to the css scene
cssScene.add(cssObject);

var cssRenderer = new CSS3DRenderer();
cssRenderer.setSize( window.innerWidth, window.innerHeight );
cssRenderer.domElement.style.position = 'absolute';
cssRenderer.domElement.style.top = 0;
document.body.appendChild( cssRenderer.domElement );
window.div = cssObject
function animate() {
	requestAnimationFrame( animate );
  var time = performance.now() * 0.001

 // move plane in 3D
  plane.position.x = Math.sin(time) * 600 
  plane.position.y = Math.sin(time*0.4) * 100 
  plane.rotation.x = Math.sin(time * 2)
  plane.rotation.z = Math.sin(time * 3.2)

  cssObject.position.set(plane.position.x, plane.position.y, plane.position.z);
 cssObject.rotation.set(plane.rotation.x, plane.rotation.y, plane.rotation.z);
  renderer.render( scene, camera );
  cssRenderer.render( cssScene, camera );


}
animate();