JSFiddle - React, Tailwind, and code Playground

by lighty1235

HTML

<body>
  <div id="canvas"></div>
</body>

CSS

body {
  margin: 0;
  padding: 0;
  background: #012345;
  //overflow: hidden;
}

#canvas {
  position: absolute;
}

#testing {
  color: red;
  font-family: arial;
  position: absolute;
  top: 100px;
}

JavaScript

import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/build/three.module.js'
import { EffectComposer }  from '//cdn.skypack.dev/[email protected]/examples/jsm/postprocessing/EffectComposer?min'
import { RenderPass } from '//cdn.skypack.dev/[email protected]/examples/jsm/postprocessing/RenderPass?min'
import {UnrealBloomPass } from '//cdn.skypack.dev/[email protected]/examples/jsm/postprocessing/UnrealBloomPass.js'
import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/examples/jsm/controls/OrbitControls.js';

const scene = new THREE.Scene();
const scene1 = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 45, window.innerWidth/window.innerHeight, 0.1, 1000 );
scene.background = new THREE.Color(0xdddddd);




let renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor(0x000000);
renderer.autoClearColor = false;
document.getElementById("canvas").appendChild(renderer.domElement);

const  hlight = new THREE.AmbientLight (0x404040,100);
scene.add(hlight);
const ENTIRE_SCENE = 0, BLOOM_SCENE = 1;

const bloomLayer = new THREE.Layers();
bloomLayer.set( BLOOM_SCENE );

const params = {
     exposure: 3,
     bloomStrength: 5,
     bloomThreshold: 2,
     bloomRadius: 3,
     scene: "Scene with Glow"
};
const geometry = new THREE.BoxGeometry( 5,5,5 );
const material = new  THREE.MeshBasicMaterial({color:'blue'});
const mesh = new THREE.Mesh(geometry,material);
scene.add(mesh);

const bloomComposer = new EffectComposer( renderer );
const renderScene = new RenderPass( mesh, camera );
const bloomPass = new UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 0.5, 1, 0.0 );



bloomComposer.renderToScreen = false;
bloomComposer.addPass( renderScene );
bloomComposer.addPass( bloomPass );
bloomComposer.renderToScreen = true;


window.addEventListener('resize', function () {
     let width = window.innerWidth;
     let...