JSFiddle - React, Tailwind, and code Playground

by grano

HTML

<script id="frag" type="x-shader/x-fragment">
			uniform float mNear;
			uniform float mFar;
			uniform float opacity;

			void main() {
				float depth = gl_FragCoord.z / gl_FragCoord.w;
				float color = smoothstep( mNear, mFar, depth );
        //        float color = depth;
				gl_FragColor = vec4( vec3( color ), opacity );
			}
</script>
<script id="vert" type="x-shader/x-vertex">
	void main() {
		gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
	}
</script>
<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>

JavaScript

let camera, scene, renderer, composer;

init();
animate();

function init() {
	camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.01, 10000 );
	camera.position.set( 140, 140, 140 );
	camera.lookAt( 0, -10, 0 );	
  
	scene = new THREE.Scene();
  
  const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2);
  directionalLight.position.set(2, 2, 2);
  scene.add(directionalLight);
  
  	const normalBox = new THREE.Mesh(new THREE.BoxGeometry(10, 10, 10), new THREE.MeshBasicMaterial({color: "red"}));
  normalBox.position.set(1,50,60);
  scene.add(normalBox);

	const blueBox = new THREE.Mesh(new THREE.BoxGeometry(10, 10, 10), new THREE.MeshBasicMaterial({color: "blue"}));
  blueBox.position.set(1,50,80);
  scene.add(blueBox);
  
  const greenBox = new THREE.Mesh(new THREE.BoxGeometry(10, 10, 10), new THREE.MeshBasicMaterial({color: "green"}));
  greenBox.position.set(1,20,20);
  scene.add(greenBox);
  
  const plane = new THREE.Mesh(new THREE.PlaneGeometry(10, 10), new THREE.MeshBasicMaterial({color: "green"}));
  plane.position.set(1,100,-100);
  scene.add(plane);
  
  // points
  
  // points
  const SIZE = 10000;
	const LENGTH = 5000000;
	const vertices = [];
  for (let i = 0; i < LENGTH; i++) {
    const x = SIZE * (Math.random() - 0.5);
    const y = SIZE * (Math.random() - 0.5);
    const z = SIZE * (Math.random() - 0.5);
    vertices.push(x, y, z);
  }
  const geometry = new THREE.BufferGeometry();
  geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));

  const material = new THREE.PointsMaterial({
    size: 1,
    color: 0xffffff,
  });
  const mesh = new THREE.Points(geometry, material);
  scene.add(mesh);

	// mask
//	var depthShader = THREE.ShaderLib['depth'];
	var uniforms =  {

			"mNear": { type: "f", value: 1.0 },
			"mFar" : { type: "f", value: 2000.0 },
			"opacity" : { type: "f", value: 1.0 }

		};
    
    
  var maskMaterial = new THREE.ShaderMaterial({
    uniforms,
   ...