JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 80);
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var divisionX = 110;
var divisionY = 110;
var points = [];
var whIndices = [];
for (let x = 0; x < divisionX; x++){
	for (let y = 0; y < divisionY; y++){
  	points.push(new THREE.Vector2(x, y));
    whIndices.push(x, y);
  }
}
var geom = new THREE.BufferGeometry().setFromPoints(points);
geom.addAttribute("whIndex", new THREE.BufferAttribute(new Float32Array(whIndices), 2));
geom.center();

var mat = new THREE.PointsMaterial({size: 2});

var cloud = new THREE.Points(geom, mat);

mat.onBeforeCompile = shader => {
	shader.uniforms.tex = {value: new THREE.TextureLoader().load('https://threejs.org/examples/textures/uv_grid_opengl.jpg')};
  shader.uniforms.division = {value: new THREE.Vector2(divisionX, divisionY)};
  shader.vertexShader = `
    uniform vec2 division;
    attribute vec2 whIndex;
    varying vec2 vSize;
    varying vec2 vUv;
  ` + shader.vertexShader;
  shader.vertexShader = shader.vertexShader.replace(
  	`void main() {`,
    `void main() {
    	vSize = vec2(1.) / division;
      vUv = whIndex / division;
    `
  );
  shader.fragmentShader = `
  	uniform sampler2D tex;
  	varying vec2 vSize;
    varying vec2 vUv;
  ` + shader.fragmentShader;
  shader.fragmentShader = shader.fragmentShader.replace(
  	`gl_FragColor = vec4( outgoingLight, diffuseColor.a );`,
    `
    	vec2 pUv = gl_PointCoord;
      pUv.y = 1. - pUv.y;
    	vec2 uv = vUv + vSize * pUv;
      vec4 texColor = texture2D( tex, uv );
      outgoingLight *= texColor.xyz;
      gl_FragColor = vec4( outgoingLight, texColor.a * diffuseColor.a );
    `
  );
}

scene.add(cloud);

var stats = new...