JSFiddle - React, Tailwind, and code Playground

by lighty1235

HTML

<body>
  <div id="canvas"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" integrity="sha512-dLxUelApnYxpLt6K2iomGngnHO83iUvZytA3YjDUCjT0HDOHKXnVYdf3hU4JjM8uEhxf9nD1/ey98U3t2vZ0qQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!--    <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/postprocessing.min.js"></script> -->
<!--   https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js -->
</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 "https://github.com/vanruesc/postprocessing/tree/main/src/core/EffectComposer.js";

import { EffectPass } from "https://github.com/vanruesc/postprocessing/tree/main/src/passes/EffectPass.js";

import { RenderPass } from "https://github.com/vanruesc/postprocessing/tree/main/src/passes/RenderPass.js";

import { BloomEffect } from 
"https://github.com/vanruesc/postprocessing/tree/main/src/effects/BloomEffect.js";


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


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


window.addEventListener('resize', function () {
     let width = window.innerWidth;
     let height = window.innerHeight;
     renderer.setSize(width,height);
     camera.aspect = width / height;
     camera.updateProjectionMatrix();
});




// let controls = new  OrbitControls(camera,renderer.domElement);

let ADD = 0.01;

const geometry = new THREE.BoxGeometry( 5,5,5 );
const material = new  THREE.MeshNormalMaterial({wireframe: true});
const mesh = new THREE.Mesh(geometry,material);
scene.add(mesh);


 const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
composer.addPass(new EffectPass(camera, new BloomEffect({
     luminanceThreshold: 0.0,
     luminanceSmoothing: 0.0,
     height: 100
}))); 

const clock = new THREE.Clock();
camera.position.z = 20;

const animate = function () {
     requestAnimationFrame( animate );
  composer.render(clock.getDelta());
     renderer.render( scene, camera );
};

animate();