JSFiddle - React, Tailwind, and code Playground

by otaviogood

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>

<script id="vertex_shader" type="x-shader/x-vertex">

#define NVERTS 4

varying vec3 vNormal;
varying vec3 vViewPosition;

void main() {

	vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );

	vNormal = normalize( normalMatrix * normal );

	vViewPosition = -mvPosition.xyz;

	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

}

</script>

<script id="fragment_shader" type="x-shader/x-fragment">

uniform vec3 color;

uniform vec3 iResolution;
uniform vec4 iMouse;
uniform float iGlobalTime;

varying vec3 vNormal;				// in camera space
varying vec3 vViewPosition;			// in camera space
    // ==============================================================
    vec3 saturate(vec3 a)
{
	return clamp(a, 0.0, 1.0);
}
vec2 saturate(vec2 a)
{
	return clamp(a, 0.0, 1.0);
}
float saturate(float a)
{
	return clamp(a, 0.0, 1.0);
}

    // otavio's noise functions
float Hash2d(vec2 uv)
{
    float f = uv.x + uv.y * 37.0;
    return fract(sin(f)*104003.9);
}
float Hash3d(vec3 uv)
{
    float f = uv.x + uv.y * 37.0 + uv.z * 521.0;
    return fract(sin(f)*110003.9);
}
float mixP(float f0, float f1, float a)
{
    return mix(f0, f1, a*a*(3.0-2.0*a));
}
const vec2 zeroOne = vec2(0.0, 1.0);
float noise2d(vec2 uv)
{
    vec2 fr = fract(uv.xy);
    vec2 fl = floor(uv.xy);
    float h00 = Hash2d(fl);
    float h10 = Hash2d(fl + zeroOne.yx);
    float h01 = Hash2d(fl + zeroOne);
    float h11 = Hash2d(fl + zeroOne.yy);
    return mixP(mixP(h00, h10, fr.x), mixP(h01, h11, fr.x), fr.y);
}
float noise(vec3 uv)
{
    vec3 fr = fract(uv.xyz);
    vec3 fl = floor(uv.xyz);
    float h000 = Hash3d(fl);
    float h100 = Hash3d(fl + zeroOne.yxx);
    float h010 = Hash3d(fl + zeroOne.xyx);
    float h110 = Hash3d(fl + zeroOne.yyx);
    float h001 = Hash3d(fl + zeroOne.xxy);
    float h101 = Hash3d(fl + zeroOne.yxy);
    float...

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

var renderer, scene, camera, clock;
var material, mesh, uniforms, attributes;
var mouseX = 100,
    mouseY = 100,
    mouseWheel = 1.0;

init();
animate();

function init() {

	// renderer
	renderer = new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

	// scene
	scene = new THREE.Scene();

	// camera
//var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
	camera.position.set( 0, 0, 60 );

	// axes
	//scene.add( new THREE.AxisHelper( 20 ) );

	// uniforms
	uniforms = {
		color: { type: "c", value: new THREE.Color( 0xaaaadd ) },

		iResolution: { type: "v3", value: new THREE.Vector3(500.0,400.0, 0.0) },
		iGlobalTime: { type: "f", value: 1.0 },
		iMouse: { type: "v4", value: new THREE.Vector4(5.0,40.0, 0.0, 0.0) },
	};

	// attributes
	attributes = {
	};

	// material
	material = new THREE.ShaderMaterial( {
		attributes      : attributes,
		uniforms        : uniforms,
		vertexShader    : document.getElementById( 'vertex_shader' ).textContent,
		fragmentShader  : document.getElementById( 'fragment_shader' ).textContent
	} );
    
	// plane geometry
	var geometry = new THREE.PlaneGeometry( 40, 40 );

	// plane
	mesh = new THREE.Mesh( geometry, material );
	scene.add( mesh );
    
        document.addEventListener('mousemove', onMouseMove, false);
    document.addEventListener('mousewheel', onMouseWheel, false);
    clock = new THREE.Clock();

}

function animate() {
    time = clock.getElapsedTime();
    delta = clock.getDelta();

    uniforms.iGlobalTime.value = time;
    //uniforms.cameraPos.value = camera.position;
    //uniforms.iGlobalTime.needsUpdate = true; // doesn't seem to be needed.?
    uniforms.iMouse.value = new THREE.Vector4(mouseX*400.01,mouseY*400.01, 400.0);
    uniforms.iMouse.needsUpdate;
    uniforms.needsUpdate =...