JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims/dist/es-module-shims.js"></script>
    
<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three/build/three.module.js",
			"three/addons/": "https://unpkg.com/three/examples/jsm/"
		}
	}
</script>

<script id="vertex_shader" type="x-shader/x-vertex">

varying vec2 vUv;
varying vec3 vNormal;
varying vec3 vViewPosition;

void main() {

	vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );

	vUv = uv;
	vNormal = normalize( normalMatrix * normal );
	vViewPosition = -mvPosition.xyz;

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

}

</script>

<script id="fragment_shader" type="x-shader/x-fragment">

uniform sampler2D tex;
uniform sampler2D tex2;

varying vec2 vUv;
varying vec3 vNormal;
varying vec3 vViewPosition;

void main() {

	vec4 tColor = texture2D( tex, vUv );
	vec4 tColor2 = texture2D( tex2, vUv );

	// hack in a fake pointlight at camera location, plus ambient
	vec3 normal = normalize( vNormal );
	vec3 lightDir = normalize( vViewPosition );

	float dotProduct = max( dot( normal, lightDir ), 0.0 ) + 0.2;

	gl_FragColor = vec4( mix( tColor.rgb, tColor2.rgb, tColor2.a ) * dotProduct, 1.0 );

}

</script>

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

// three.js Custom ShaderMaterial with Multiple Textures

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

let mesh, renderer, scene, camera, controls;

init();
animate();

function init() {

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

	// scene
	scene = new THREE.Scene();
	
	// camera
	camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
	camera.position.set( 200, 0, 200 );

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

	// no lights in this example; fake them in the shader
	
	// cube geometry
	const geometry = new THREE.BoxGeometry( 70, 70, 70 );

	// texture
	const texture = new THREE.CanvasTexture( generateTexture() );
	const texture2 = new THREE.CanvasTexture( generateTexture2() ); // texture background is transparent

	// uniforms
	const uniforms = {
		tex: { value: texture },
		tex2: { value: texture2 }
	};

	// material
	const material = new THREE.ShaderMaterial( {
		uniforms        : uniforms,
		vertexShader    : document.getElementById( 'vertex_shader' ).textContent,
		fragmentShader  : document.getElementById( 'fragment_shader' ).textContent
	} );
    
	// cube
	mesh = new THREE.Mesh( geometry, material );
	scene.add( mesh );

}

function animate() {

	requestAnimationFrame( animate );

    mesh.rotation.x += 0.001;
    mesh.rotation.y += 0.002;
    mesh.rotation.z += 0.003;

	renderer.render( scene, camera );

}

// Utility
// ---------------------------------------------------------------------------------

function generateTexture() {

	// draw a circle in the center of the canvas
	const size = 256;

	// create canvas
	const canvas = document.createElement( 'canvas' );
	canvas.width = size;
	canvas.height = size;

	// get context
	const context = canvas.getContext( '2d' );

	// draw...