JSFiddle - React, Tailwind, and code Playground

by lighty1235

HTML

<script>
	let simplex_noise = `
  // Original noise code from https://www.shadertoy.com/view/4sc3z2
  #define MOD3 vec3(.1031,.11369,.13787)
  vec3 hash33(vec3 p3)
  {
    p3 = fract(p3 * MOD3);
      p3 += dot(p3, p3.yxz+19.19);
      return -1.0 + 2.0 * fract(vec3((p3.x + p3.y)*p3.z, (p3.x+p3.z)*p3.y, (p3.y+p3.z)*p3.x));
  }
  float simplex_noise(vec3 p)
  {
      const float K1 = 0.333333333;
      const float K2 = 0.166666667;

      vec3 i = floor(p + (p.x + p.y + p.z) * K1);
      vec3 d0 = p - (i - (i.x + i.y + i.z) * K2);

      vec3 e = step(vec3(0.0), d0 - d0.yzx);
    vec3 i1 = e * (1.0 - e.zxy);
    vec3 i2 = 1.0 - e.zxy * (1.0 - e);

      vec3 d1 = d0 - (i1 - 1.0 * K2);
      vec3 d2 = d0 - (i2 - 2.0 * K2);
      vec3 d3 = d0 - (1.0 - 3.0 * K2);

      vec4 h = max(0.6 - vec4(dot(d0, d0), dot(d1, d1), dot(d2, d2), dot(d3, d3)), 0.0);
      vec4 n = h * h * h * h * vec4(dot(d0, hash33(i)), dot(d1, hash33(i + i1)), dot(d2, hash33(i + i2)), dot(d3, hash33(i + 1.0)));

      return dot(vec4(31.316), n);
  }
  `;
</script>

CSS

body {
  overflow: hidden;
  margin: 0;
}

#gui {
  position: absolute;
  top: 2px;
  left: 2px;
}

JavaScript

console.clear();
const params = {
  exposure: 1.5,
  bloomStrength: 4,
  bloomThreshold: 0.1,
  bloomRadius: 0.7
};
import * as THREE from "https://threejs.org/build/three.module.js";
import {
  GUI
} from 'https://threejs.org/examples/jsm/libs/dat.gui.module.js';

import {
  OrbitControls
} from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
import {
  BufferGeometryUtils
} from "https://threejs.org/examples/jsm/utils/BufferGeometryUtils.js";

import {
  EffectComposer
} from "https://threejs.org/examples/jsm/postprocessing/EffectComposer.js";
import {
  RenderPass
} from "https://threejs.org/examples/jsm/postprocessing/RenderPass.js";
import {
  ShaderPass
} from "https://threejs.org/examples/jsm/postprocessing/ShaderPass.js";
import {
  UnrealBloomPass
} from "https://threejs.org/examples/jsm/postprocessing/UnrealBloomPass.js";

import {
  CopyShader
} from 'https://threejs.org/examples/jsm/shaders/CopyShader.js';
import {
  FXAAShader
} from 'https://threejs.org/examples/jsm/shaders/FXAAShader.js';

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(
  30,
  innerWidth / innerHeight,
  0.1,
  100
);
camera.position.set(19, 5, 5);
let renderer = new THREE.WebGLRenderer({
  antialias: false
});
renderer.setSize(innerWidth, innerHeight);
renderer.toneMapping = THREE.ReinhardToneMapping;
renderer.toneMappingExposure = Math.pow(params.exposure, 4.0);
document.body.appendChild(renderer.domElement);

let controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(5, 0, 5);
controls.update();

let light = new THREE.PointLight(0x3200ff, 2);
light.position.set(5, 5, 5);
let lightBottom = new THREE.DirectionalLight(0xff167f, 0.75);
lightBottom.position.y = -1;

scene.add(light, lightBottom);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));

let uniforms = {
  globalBloom: {
    value: 0
  },
  time: {
    value: 0
  }
}

// 10 steps
let geoms = [];
for (let i = 1; i < 11; i++) {
  let r = 0.025;
  let gH =...