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/[email protected]/build/three.module.js";
import {
  OrbitControls
} from "https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 8, 13).setLength(15);
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 light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.setScalar(1);
scene.add(light, new THREE.AmbientLight(0xffffff, 1.5));

scene.add(new THREE.GridHelper())

let g = new THREE.IcosahedronGeometry(5, 0);
g.rotateX(-Math.PI * 0.5);
let uniforms = {
	planeMousePos: {value: new THREE.Vector2()}
}
//console.log(uniforms)
let m = new THREE.MeshStandardMaterial({
	color:0xff007f,
  roughness: 0.6,
  metalness: 0.5,
  onBeforeCompile: shader => {
  	shader.uniforms.planeMousePos = uniforms.planeMousePos;
    shader.vertexShader = `
    	varying vec3 vPos;
      ${shader.vertexShader}
    `.replace(
    	`#include <begin_vertex>`,
      `#include <begin_vertex>
      	vPos = transformed;
      `
    );
    //console.log(shader.vertexShader);
    shader.fragmentShader = `
    	#define ss(a, b, c) smoothstep(a, b, c)
    	uniform vec2 planeMousePos;
      varying vec3 vPos;
      ${shader.fragmentShader}
    `.replace(
    	`#include <dithering_fragment>`,
      `#include <dithering_fragment>
      	vec3 col = vec3(0.5, 1, 1);
        float e = fwidth(vPos.y) * 2.;
        float f = ss(e, 0., abs(vPos.y - planeMousePos.y));
        gl_FragColor.rgb = mix(gl_FragColor.rgb, col, f);
      
      `
    );
    //console.log(shader.fragmentShader);
  }
});
let plane = new THREE.Mesh(g, m);
scene.add(plane);

let mouse = new THREE.Vector3();
let...