JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"></div>

<script id="vertexShader" type="x-shader/x-vertex">
  void main()	{

            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

        }
	</script>
<script id="fragmentShader" type="x-shader/x-fragment">
  uniform vec3 uColor;

        void main()	{
        
            gl_FragColor = vec4( uColor, 1.0 );
            
        }
    </script>

<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

<script type="importmap">
  {
            "imports": {
                "three": "https://unpkg.com/three@0.150.0/build/three.module.js",
                "three/addons/": "https://unpkg.com/three@0.150.0/examples/jsm/"
            }
        }
    </script>

<script type="module" src="scripts/main.js"></script>

CSS

body {
  margin: 0;
}

JavaScript

import * as THREE from 'three';
import {
  OrbitControls
} from 'three/addons/controls/OrbitControls';

const container = document.getElementById('container');

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 2);

const renderer = new THREE.WebGLRenderer({
  antialias: true,
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

const geometry = new THREE.PlaneGeometry(1, 1);

const uniformsA = {
  uColor: {
    value: new THREE.Color(0xff0000)
  },
};

const uniformsB = {
  uColor: {
    value: new THREE.Color(0x00ff00)
  },
};

const uniformsC = {
  uColor: {
    value: new THREE.Color(0x0000ff)
  },
};

const material = new THREE.ShaderMaterial({
  uniforms: uniformsA,
  vertexShader: document.getElementById('vertexShader').textContent,
  fragmentShader: document.getElementById('fragmentShader').textContent,
  side: THREE.DoubleSide,
});

const mesh = new THREE.Mesh(geometry, material);
mesh.position.x = -1.5;
scene.add(mesh);

const mesh2 = new THREE.Mesh(geometry, material.clone());
mesh2.material.uniforms = uniformsB;
scene.add(mesh2);

const mesh3 = new THREE.Mesh(geometry, material.clone());
mesh3.material.uniforms = uniformsC;
mesh3.position.x = 1.5;
scene.add(mesh3);

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

  renderer.setSize(window.innerWidth, window.innerHeight);
});

renderer.setAnimationLoop(() => {
  controls.update();

  renderer.render(scene, camera);
});