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;
}

a {
	color: #ff0;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

button {
	cursor: pointer;
	text-transform: uppercase;
}

#info {
	position: absolute;
	top: 0px;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	text-align: center;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	z-index: 1; /* TODO Solve this in HTML */
}

a, button, input, select {
	pointer-events: auto;
}

.dg.ac {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	z-index: 2 !important; /* TODO Solve this in HTML */
}

#overlay {
	position: absolute;
	font-size: 16px;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background: rgba(0,0,0,0.7);
}

	#overlay button {
		background: transparent;
		border: 0;
		border: 1px solid rgb(255, 255, 255);
		border-radius: 4px;
		color: #ffffff;
		padding: 12px 18px;
		text-transform: uppercase;
		cursor: pointer;
	}

#notSupported {
	width: 50%;
	margin: auto;
	background-color: #f00;
	margin-top: 20px;
	padding: 10px;
}

    © 2021 GitHub, Inc.
    Terms
    Privacy
    Security
    Status
    Docs

    Contact GitHub
    Pricing
    API
    Training
    Blog
    About

Loading complete

JavaScript

console.clear();

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

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

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

let g = new THREE.PlaneGeometry(15, 10);
g.rotateX(-Math.PI * 0.5);
let uniforms = {
	planeMouseUv: {value: new THREE.Vector2()},
  planeAspect: {value: new THREE.Vector2(g.parameters.width, g.parameters.height)}
}
console.log(uniforms)
let m = new THREE.MeshBasicMaterial({
	map: new THREE.TextureLoader().load("https://threejs.org/examples/textures/uv_grid_opengl.jpg"),
  onBeforeCompile: shader => {
  	shader.uniforms.planeMouseUv = uniforms.planeMouseUv;
    shader.uniforms.planeAspect = uniforms.planeAspect;
    shader.fragmentShader = `
    	#define ss(a, b, c) smoothstep(a, b, c)
    	uniform vec2 planeMouseUv;
      uniform vec2 planeAspect;
      ${shader.fragmentShader}
    `.replace(
    	`#include <dithering_fragment>`,
      `#include <dithering_fragment>
      	
        vec2 aspect = vec2(planeAspect.x / planeAspect.y, 1.);
      	vec2 pUv = vUv * aspect;
        vec2 mUv = planeMouseUv * aspect;
        
        float fe = length(fwidth(pUv)) * planeAspect.y * 0.5;
        
        float dist = distance(pUv, mUv) * planeAspect.y; // plane's height is the base
        float radius = 0.4;
        float thickness = 0.1;
        float circ = ss(radius - fe, radius, dist) - ss(radius + thickness, radius + thickness + fe, dist);
        
        gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.5, 1, 1), circ);
      
      `
    );
   ...