JSFiddle - React, Tailwind, and code Playground

by grano

HTML

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

CSS

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

canvas {
  width: 100%;
  height: 100%;
  display: block;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, 1, 1, 1000);
camera.position.set(13, 25, 38);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
var canvas = renderer.domElement
document.body.appendChild(canvas);

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

var geometry = new THREE.PlaneBufferGeometry( 80, 40 );
geometry.computeBoundingBox();
var material = new THREE.ShaderMaterial({
  uniforms: {
    color1: {
      value: new THREE.Color("rgba(0, 0, 0, 1)")
    },
    color2: {
      value: new THREE.Color("rgba(200,200,200, 0.5)")
    },
    bboxMin: {
      value: geometry.boundingBox.min
    },
    bboxMax: {
      value: geometry.boundingBox.max
    },
    edgeOffset: {
      value: 10.0
    }
  },
  vertexShader: `
    uniform vec3 bboxMin;
    uniform vec3 bboxMax;
    uniform float edgeOffset;
  
    varying vec2 vUv;
    varying float aspect;
    varying vec2 edgeAspect;

    void main() {
      vUv.x = (position.x - bboxMin.x) / (bboxMax.x - bboxMin.x);
      vUv.y = (position.y - bboxMin.y) / (bboxMax.y - bboxMin.y);
      edgeAspect.y = edgeOffset / (bboxMax.y - bboxMin.y);
      edgeAspect.x = edgeOffset / (bboxMax.x - bboxMin.x);
			gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
    }
  `,
  fragmentShader: `
  	uniform vec3 color1;
    uniform vec3 color2;
  
    varying vec2 vUv;
    varying vec2 edgeAspect;
    
    void main() {
      
      float r=length(max(abs(0.5-vUv.xy)-0.1,0.));
//      float r=0.3;
			vec4 f=vec4(r,r,r,1.);
      
      gl_FragColor = f;
    }
  `,
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);



render();

function resize(renderer) {
  const canvas = renderer.domElement;
  const width = canvas.clientWidth;
  const height = canvas.clientHeight;
  const needResize = canvas.width !== width || canvas.height !== height;
  if (needResize) {
    renderer.setSize(width, height, false);
...