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(10);
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 = {
	rectSize: {value: new THREE.Vector2(8, 3)},
  rectWidth: {value: 0.5}
}
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.rectSize = uniforms.rectSize;
    shader.uniforms.rectWidth = uniforms.rectWidth;
    shader.vertexShader = `
    	varying vec2 vPos;
      ${shader.vertexShader}
    `.replace(
    	`#include <fog_vertex>`,
      `#include <fog_vertex>
      	vPos = position.xz;
      `
    );
    //console.log(shader.vertexShader);
    shader.fragmentShader = `
    	#define ss(a, b, c) smoothstep(a, b, c)
      uniform vec2 rectSize;
      uniform float rectWidth;
			varying vec2 vPos;
      ${shader.fragmentShader}
    `.replace(
    	`#include <dithering_fragment>`,
      `#include <dithering_fragment>
      	
       	vec2 hSize = rectSize * 0.5;
        vec2 rPos = abs(vPos) - hSize;
        
        float rect = float(abs(max(rPos.x,rPos.y)) < rectWidth * 0.5);
        
        gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(1), rect * 0.5);
      
      `
    );
    //console.log(shader.fragmentShader);
  }
});
m.defines = {
	"USE_UV" : " " // just in case
}
let plane = new THREE.Mesh(g,...