JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

<script>
	let imgData = `...

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

console.clear();
import * as THREE from "https://threejs.org/build/three.module.js";
import {BufferGeometryUtils} from "https://threejs.org/examples/jsm/utils/BufferGeometryUtils.js";
import {OrbitControls} from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
import {TWEEN} from "https://threejs.org/examples/jsm/libs/tween.module.min.js";

let scene = new THREE.Scene();
scene.background = new THREE.Color(0x404040);
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 0.1, 100);
camera.position.set(0, 7, 7);
let renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

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

//scene.add(new THREE.GridHelper());

let geoms = [];

let maxImpactAmount = 16;
// init uniforms impacts array
let impacts = [];
for (let i = 0; i < maxImpactAmount; i++) {
  impacts.push({
    impactPosition: new THREE.Vector3().setFromSphericalCoords(
      5,
      Math.PI * 0.25,
      Math.PI / 16 * i
    ),
    impactMaxRadius: 5 * THREE.Math.randFloat(0.5, 0.75),
    impactRatio: 0.25
  });
}
let uniforms = {
  impacts: {value: impacts}
}

let dummyObj = new THREE.Object3D();
let p = new THREE.Vector3();

let cnv = document.createElement("canvas");
cnv.width = 360;
cnv.height = 180;
let ctx = cnv.getContext("2d");

let img = new Image();

img.onload = () => {
	ctx.drawImage(img, 0, 0, cnv.width, cnv.height);
  let data = ctx.getImageData(0, 0, cnv.width, cnv.height).data;
  for(let y = 0; y < cnv.height; y++){
  	for (let x = 0; x < cnv.width; x++){
  		let d = data[((cnv.width*y)+x)*4+3];
      if (d < 128) continue;
      p.setFromSphericalCoords(5, THREE.MathUtils.degToRad(y),THREE.MathUtils.degToRad(x));
      dummyObj.lookAt(p);
      dummyObj.updateMatrix();
      let g =  new THREE.PlaneGeometry(0.05,0.05);
      g.applyMatrix4(dummyObj.matrix);
      g.translate(p.x, p.y, p.z);
      let centers = [
  ...