JSFiddle - React, Tailwind, and code Playground

by Paul West

CSS

body {
  margin: 0;
  background-color: #000;
  color: #fff;
  font-family: Monospace;
  font-size: 13px;
  line-height: 24px;
  overscroll-behavior: none;
}

JavaScript

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

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

window.addEventListener("resize", onWindowResize);

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

let globalUniforms = {
  time: {value: 0},
  aspect: {value: innerWidth / innerHeight},
  resolution: {value: new THREE.Vector2(innerWidth, innerHeight)}
}

const EARTH_RADIUS = 2;
let g = new THREE.IcosahedronGeometry(EARTH_RADIUS, 10);
let m = new THREE.MeshBasicMaterial({
	color: 0x7f7f7f,
	//map: new THREE.TextureLoader().load("https://threejs.org/examples/textures/uv_grid_opengl.jpg"),
  wireframe: true
})
let o = new THREE.Mesh(g, m);
scene.add(o);



// <BACKGROUND>
let rt = new THREE.WebGLRenderTarget(innerWidth, innerHeight);
scene.background = rt.texture;
let bCam = new THREE.Camera();
let bScn = new THREE.Scene();
let bQuad = new THREE.Mesh(
  new THREE.PlaneGeometry(2, 2),
  new THREE.ShaderMaterial({
    uniforms: {
      time: globalUniforms.time, 
      aspect: globalUniforms.aspect,
      resolution: globalUniforms.resolution
    },
    vertexShader: `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
    }`,
    fragmentShader: `
    uniform float time;
    uniform float aspect;
    varying vec2 vUv;
    
    // shadertoy
    
    //
    // Description : Array and textureless GLSL 2D/3D/4D simplex 
    //							 noise functions.
    //			Author : Ian McEwan, Ashima Arts.
    //	Maintainer : ijm
    //		 Lastmod : 20110822 (ijm)
    //		 License : Copyright (C) 2011 Ashima...