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

JavaScript

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

let scene = new THREE.Scene();
scene.background = new THREE.TextureLoader().load("https://threejs.org/examples/textures/colors.png");
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 0, 1).setLength(10);
let renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

window.addEventListener("resize", onWindowResize);

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

let g = new THREE.PlaneGeometry(10, 10);
let m = new THREE.MeshBasicMaterial({
	map: new THREE.TextureLoader().load("https://threejs.org/examples/textures/uv_grid_opengl.jpg"),
  onBeforeCompile: shader => {
  	shader.fragmentShader = `
    	  float HexDist(vec2 p) {
          p = abs(p);

            float c = dot(p, normalize(vec2(1,1.73)));
            c = max(c, p.x);

            return c;
        }

        vec4 HexCoords(vec2 uv) {
          vec2 r = vec2(1, 1.73);
            vec2 h = r*.5;

            vec2 a = mod(uv, r)-h;
            vec2 b = mod(uv-h, r)-h;

            vec2 gv = dot(a, a) < dot(b,b) ? a : b;

            float x = atan(gv.x, gv.y);
            float y = .5-HexDist(gv);
            vec2 id = uv-gv;
            return vec4(x, y, id.x,id.y);
        }
  		
      ${shader.fragmentShader}
    `.replace(
    	`vec4 diffuseColor = vec4( diffuse, opacity );`,
      `vec4 diffuseColor = vec4( diffuse, opacity );
      
      vec2 uv = vUv * 2. - 1.;
      vec3 col = vec3(0);
      float halfPI = PI * 0.5;
      uv *= mat2(cos(halfPI), -sin(halfPI), sin(halfPI), cos(halfPI));
      uv *= 4.9;

      vec4 hc = HexCoords(uv);
      
      if(hc.y < 0.05) discard;
      
      `
    );
    console.log(shader.fragmentShader);
  }
})
let o = new...