JSFiddle - React, Tailwind, and code Playground

by grano

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>
<script src='https://threejs.org/examples/js/postprocessing/EffectComposer.js'></script>
<script src='https://threejs.org/examples/js/postprocessing/RenderPass.js'></script>
<script src='https://threejs.org/examples/js/postprocessing/ShaderPass.js'></script>
<script src='https://threejs.org/examples/js/shaders/CopyShader.js'></script>
<script src="https://threejs.org/examples/js/shaders/LuminosityHighPassShader.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/UnrealBloomPass.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

 <script type="x-shader/x-vertex" id="vertexshader">
  varying vec2 vUv;
  void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  }
</script>
<script type="x-shader/x-fragment" id="fragmentshader">
  uniform sampler2D baseTexture;
  uniform sampler2D bloomTexture;
  varying vec2 vUv;
  void main() {
    gl_FragColor = ( texture2D( baseTexture, vUv ) + vec4( 1.0 ) * texture2D( bloomTexture, vUv ) );
  }
</script>

JavaScript

let camera, scene, renderer;

init();
animate();

function init() {
	camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.01, 1000 );
	camera.position.set( 140, 140, 140 );
//	camera.lookAt( 0, -10, 0 );	
  
	scene = new THREE.Scene();
      
  renderer = new THREE.WebGLRenderer();
	renderer.autoClear = false;
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );
  
  const originalBox = new THREE.Mesh(new THREE.BoxGeometry(5, 5, 5), new THREE.MeshBasicMaterial({color: "blue"}));
  originalBox.position.set(0,0,0);
  scene.add(originalBox);

  
  setInterval(() => {
  console.log('!!')
	  createBox()  
  }, 500)

  
 	const controls = new THREE.OrbitControls( camera, renderer.domElement );
  controls.target.set( 0, 0, 0 );
}

function createBox() {
		let randX = Math.random();
    let randZ = Math.random();

		if(Math.random() < 0.5){
      randX = randX * 1;
    }else{
      randX = randX * -1;
    }
    
  if(Math.random() < 0.5){
      randZ = randZ * 1;
    }else{
      randZ = randZ * -1;
    }

	
  const posX = Math.sin(randX)  * 120;
  const posY = 3;
  const posZ = Math.cos(randX) * 120;

  const normalBox = new THREE.Mesh(new THREE.BoxGeometry(10, 10, 10), new THREE.MeshBasicMaterial({color: "red"}));
  normalBox.position.set(posX,posY,posZ);
  scene.add(normalBox);
}


function animate() {
/*   renderer.clear();
  
  camera.layers.set(1);  
  uniforms.globalBloom.value = 1;
  bloomComposer.render();  
  uniforms.globalBloom.value = 0;
  finalComposer.render();
  
  
  renderer.clearDepth();
  camera.layers.set(0);
   */ 
   renderer.render( scene, camera );
  
	requestAnimationFrame( animate );

}