JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

<canvas class="webgl"></canvas>

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

import * as THREE from "https://threejs.org/build/three.module.js";
import {
  OrbitControls
} from "https://threejs.org/examples/jsm/controls/OrbitControls.js";

const canvas = document.querySelector('canvas.webgl')
const scene = new THREE.Scene()
const textureLoader = new THREE.TextureLoader()
const geometry = new THREE.PlaneBufferGeometry(1, 1, 32, 32)
const material = new THREE.RawShaderMaterial({
  uniforms: {
    u_resolution: {
      value: new THREE.Vector2(innerWidth, innerHeight)
    }
  },
  vertexShader: `
        uniform mat4 projectionMatrix;
        uniform mat4 viewMatrix;
        uniform mat4 modelMatrix;

        attribute vec3 position;
        attribute vec2 uv;
        
        varying vec2 vUv;

        void main()
        {
        	vUv = uv;
            gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
        }
    `,
  fragmentShader: `
        precision mediump float;
        uniform vec2 u_resolution;
        
        varying vec2 vUv;

        float circle(in vec2 _st, in float _radius){
        vec2 dist = _st;
        return 1.-smoothstep(_radius-(_radius*0.01),
                         _radius+(_radius*0.01),
                         dot(dist,dist));
        }

        void main()
        {
        		// st = vUv;
            float ratio = u_resolution.x / u_resolution.y;
            vec2 st = gl_FragCoord.xy/u_resolution.xy;
            st -= 0.5;
    				st *= 2.0;
            st.x *= ratio;
            vec3 color = vec3(1, 0.5, 0.25) * circle(st,0.9);
            gl_FragColor = vec4( color, 1.0 );
        }
    `
})

const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

window.addEventListener('resize', () => {
  // Update camera
  camera.aspect = innerWidth / innerHeight
  camera.updateProjectionMatrix()

  // Update renderer
  renderer.setSize(innerWidth, innerHeight)
})

const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1,...