JSFiddle - React, Tailwind, and code Playground

by Browork

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

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


let scene = new THREE.Scene( );


let camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.setScalar( 10 );
camera.lookAt( scene.position );


let renderer = new THREE.WebGLRenderer( )
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

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

scene.add( new THREE.GridHelper( 10, 10 ) );

// ambient
scene.add( new THREE.AmbientLight( 0xEEEEEE ) );

// light
let light = new THREE.DirectionalLight( 0xffffff, 0.5 );
light.position.set( 20, 20, 0 );
scene.add( light );

let boxGeom = new THREE.BoxBufferGeometry( 2, 2, 10 );

let shaderMat = function ( maxDist, hotspot ) {
  let uniforms = {
                maxDist: { type: 'float', value: maxDist },
                hotspot: { type: 'vec3', value: hotspot },
                u_resolution: { type: 'vec2', value: new THREE.Vector2( window.innerWidth, window.innerHeight ) }
            }

  return new THREE.ShaderMaterial( {
    uniforms: uniforms,
    fragmentShader: fragShader(),
    vertexShader: vertShader()
  } )
}

let vertShader = function(){
	return `
  varying vec4 vwPos;
  void main() {
  
  vwPos = modelMatrix * vec4(position, 1.); // world position
  gl_Position = projectionMatrix *
                modelViewMatrix *
                vec4(position,1.0);
}`
}

let fragShader = function ( ) {
return `#ifdef GL_ES
precision mediump float;
#endif

#define PI 3.14159265359

uniform float maxDist;
uniform vec3 hotspot;
uniform vec2 u_resolution;

varying vec4 vwPos;

void main() {
    vec3 P1 = vwPos.xyz;
    vec3 P2 = hotspot;

    float dist = distance( P1, P2 );
    
    vec3 colorA = vec3(1.000,0.000,0.000);
    vec3 colorB = vec3(0.000,0.000,1.000);

    float d = clamp( 1. /...