JSFiddle - React, Tailwind, and code Playground

HTML

<div id="important-text">
  I am important text!
</div>

CSS

body {
  margin: 0;
  background-color: red;
}

#important-text {
  color: blue;
  position: fixed;
  left: 20%;
  top: 45%;
  z-index: -1;
  font-size: 50px;
}

JavaScript

// Try r137 and r138
import * as THREE from 'https://unpkg.com/[email protected]/build/three.module.js';


const DO_COPY_STEP = true;
const COPY_MATERIAL_TRANSPARENT = false;


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

const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const geometry = new THREE.PlaneGeometry( 1, 1);
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00, transparent: true, opacity: 0.5 } );
const plane = new THREE.Mesh( geometry, material );
scene.add( plane );

camera.position.z = 1;

const renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight);

const copyQuad = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), new THREE.MeshBasicMaterial({ map: renderTarget.texture, transparent: COPY_MATERIAL_TRANSPARENT }));
const copyScene = new THREE.Scene();
copyScene.add(copyQuad);
const copyCamera = new THREE.OrthographicCamera(-0.5, 0.5, 0.5, -0.5, 1, 100);
copyCamera.position.z = 1;


if (DO_COPY_STEP) {
	renderer.setRenderTarget(renderTarget);
	renderer.render( scene, camera );
	renderer.setRenderTarget(null);
	renderer.render(copyScene, copyCamera);
} else {
	renderer.render( scene, camera );
}