JSFiddle - React, Tailwind, and code Playground

by mika i.

HTML

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

CSS

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

#overlay {
  position:fixed;
  top: 0;
  left: 0;
  background: rgba(255, 0, 0, 0.5);
  width: 250px;
  height: 150px;
}

JavaScript

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;

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)
  
  // follow with div
  plane.updateWorldMatrix()
  plane.getWorldPosition(tempV)
  tempV.project(camera)
  const x = (tempV.x *  .5 + .5) * container.clientWidth
  const y = (tempV.y * -.5 + .5) * container.clientHeight
  div.style.transform = `translate(-50%, -50%) translate(${x}px,${y}px) `

	renderer.render( scene, camera );
}
animate();