JSFiddle - React, Tailwind, and code Playground

by Paul West

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

console.clear();

import * as THREE from "https://cdn.skypack.dev/three@0.135.0";
import {OrbitControls} from "https://cdn.skypack.dev/three@0.135.0/examples/jsm/controls/OrbitControls";
import {ImprovedNoise} from "https://cdn.skypack.dev/three@0.135.0/examples/jsm/math/ImprovedNoise";

THREE.BufferGeometry.prototype.toQuads = ToQuads;

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

const perlin = new ImprovedNoise();

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

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

let step = 20;
for(let z = -4; z <= 4; z ++){
	for(let x = -4; x <= 4; x++){
  	let p = createPlane(step, Math.random() * 0x7f7f7f + 0x7f7f7f);
    setNoise(p.geometry, new THREE.Vector2(x, z), 20, 3);
    p.geometry.rotateX(Math.PI * 0.5);
    p.position.set(x, 0, z).multiplyScalar(step);
    scene.add(p);
  }
}

renderer.setAnimationLoop( _ => {
	renderer.render(scene, camera);
})

function createPlane( step, color){
  let g = new THREE.PlaneGeometry(step, step, 100, 100).toQuads();
  let m = new THREE.LineBasicMaterial({color: color});
  let l = new THREE.LineSegments(g, m);
  return l;
}

function setNoise(g, uvShift, multiplier, amplitude){
	let pos = g.attributes.position;
  let uv = g.attributes.uv;
  let vec2 = new THREE.Vector2();
  for(let i = 0; i < pos.count; i++){
    vec2.fromBufferAttribute(uv, i).add(uvShift).multiplyScalar(multiplier);
    let noise = 0;
    let q = 1;
    for(let i = 0; i < 4; i++){
    	noise += perlin.noise(vec2.x / q, vec2.y / q, 0) * (q / amplitude);
      q += 5;
    }
    pos.setZ(i, noise/*perlin.noise(vec2.x, vec2.y, 0) * amplitude */);
  }
}


function ToQuads() {
	let g = this;
  let p = g.parameters;
  let segmentsX =...