JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<script src="https://cdn.rawgit.com/mrdoob/three.js/r104/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r104/examples/js/controls/OrbitControls.js"></script>
 <script src="https://threejs.org/examples/js/geometries/DecalGeometry.js"></script>
  <script src="https://cdn.rawgit.com/mrdoob/three.js/r104/examples/js/loaders/GLTFLoader.js"></script>
  <script src="https://cdn.glitch.com/27780c96-8860-401c-a4e0-26a8674900ba%2FSPE.min.js?1557346589871"></script>
  <script src="https://stemkoski.github.io/Three.js/js/Stats.js"></script>
  <!-- ---------------- Custom Shader Code ------------------------ -->
<script id="vertexShader" type="x-shader/x-vertex">
varying vec2 vUv;
void main() 
{ 
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>

<!-- fragment shader a.k.a. pixel shader -->
<script id="fragmentShader" type="x-shader/x-vertex">
#define PI 3.14159265359
uniform sampler2D baseTexture;
uniform float baseSpeed;
uniform sampler2D noiseTexture;
uniform float noiseScale;
uniform float alpha;
uniform float time;
mat2 rotate2d(float _angle){
    return mat2(cos(_angle),-sin(_angle),
                sin(_angle),cos(_angle));
}


varying vec2 vUv;
void main() 
{
	vec2 uvTimeShift = vUv + vec2( -0.7, 1.5 ) * time * baseSpeed;	
	vec4 noiseGeneratorTimeShift = texture2D( noiseTexture, uvTimeShift );
	vec2 uvNoiseTimeShift = vUv + noiseScale * vec2( noiseGeneratorTimeShift.r, noiseGeneratorTimeShift.b );
	vec4 baseColor = texture2D( baseTexture, uvNoiseTimeShift );

	baseColor.a = alpha;
   vec2 st = vec2(vUv).xy;
     st -= vec2(0.5);
    // rotate the space
    st = rotate2d( time*PI ) * st;
    // move it back to the original place
    st += vec2(0.5);
   
    vec2 st2 = vec2(vUv).xy;
     st2 -= vec2(0.5);
    // rotate the space
    st2 = rotate2d( time*PI/2. ) * st2;
    // move it back to the original place
    st2 += vec2(0.5);
    
	gl_FragColor = texture2D( baseTexture,...

CSS

body {
    padding: 0;
    margin: 0;
}
canvas {
  display: block;
}

JavaScript

// a basic three.js scene

var container, renderer, scene, camera, controls;
var clock = new THREE.Clock();
var stats;
init();
initParticles();
animate();

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer({
        antialias: false
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor("gray");
    container = document.createElement('div');
    document.body.appendChild(container);
    container.appendChild(renderer.domElement);

    // scene
    scene = new THREE.Scene();
//scene.background = new THREE.Color("gray").multiplyScalar(.086);
   //scene.fog = new THREE.FogExp2(new THREE.Color("gray").multiplyScalar(.086), 0.002);
  
  	stats = new Stats();
	stats.domElement.style.position = 'absolute';
	stats.domElement.style.top = '0px';
	stats.domElement.style.zIndex = 100;
	container.appendChild( stats.domElement );
  
    // camera
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(13.183094570780751,  495.8805571153824, 658.7326309607532);
    camera.lookAt(scene.position);

    // (camera) controls
    // mouse controls: left button to rotate, 
    //    mouse wheel to zoom, right button to pan
    controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.target.y = 100
controls.target.z = 500
 controls.minPolarAngle = Math.PI / 2;
    controls.maxPolarAngle = Math.PI / 2;
    
    // light    
    var light = new THREE.PointLight(0xffffff);
    light.position.set(100, 250, 250);
    scene.add(light);

var textureLoader = new THREE.TextureLoader();
THREE.TextureLoader.crossOrigin = '';
var mtcp = textureLoader.load('https://cdn.glitch.com/936ab9e3-541f-4e60-bab4-b2b5d163d73f%2F12719.jpg?1556847569879')


var norm = textureLoader.load('https://cdn.glitch.com/936ab9e3-541f-4e60-bab4-b2b5d163d73f%2F8325-normal.jpg?1556847316865')

norm.repeat.set(15, 15)
norm.wrapS = THREE.RepeatWrapping
norm.wrapT =...