JSFiddle - React, Tailwind, and code Playground

HTML

<html>
   <head>
      <title>threejs - material</title>
      <style>
         body{
         margin: 0;
         overflow: hidden;
         }
         body {
           margin: 0;
         },
         #canvas_A {
           width: 100vw;
           height: 100vh;
           display: block;
         }
      </style>
   </head>
   <body>
      <div id="Canvas_A"></div>
      <!-- <canvas id="Canvas_A"></canvas> -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.js"></script>
   </body>
</html>

JavaScript

const vertexShader = `uniform float a11;
uniform float a12;
uniform float a21;
uniform float a22;
uniform float delta;
void main()
{
    vec3 p = position.xyz;
    float new_x = p.x*a11 + p.y*a12;
    float new_y = p.x*a21 + p.y*a22;

    gl_Position = projectionMatrix * modelViewMatrix * vec4(new_x, new_y, p.z, 1.0);
}`


var container = document.getElementById('Canvas_A');


var CANVAS_WIDTH = 800;
var CANVAS_HEIGHT = 400;

//RENDERER
var renderer = new THREE.WebGLRenderer();
//renderer.setClearColor(0xffffff);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(CANVAS_WIDTH, CANVAS_HEIGHT);
container.appendChild(renderer.domElement);


const fov = 75;
const aspect = 2; // the canvas default
const near = 0.1;
const far = 100;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = -8;
camera.position.y = 4;

const scene = new THREE.Scene();

{
    const color = 0xFFFFFF;
    const intensity = 1;
    const light = new THREE.DirectionalLight(color, intensity);
    light.position.set(-1, 2, 4);
    scene.add(light);
}

var customUniforms = {
    delta: {
        value: 0
    },
    a11: {
        value: 0
    },
    a12: {
        value: 0
    },
    a21: {
        value: 0
    },
    a22: {
        value: 0
    }
};
var mytransMaterial = new THREE.ShaderMaterial({
    uniforms: customUniforms,
    vertexShader: vertexShader,
});



var geometry = new THREE.BoxBufferGeometry(1, 1, 1, 0, 0, 0);
var mesh = new THREE.Mesh(geometry, mytransMaterial);
mesh.position.z = -5;
mesh.position.x = 0;


const geometry_cube = new THREE.Geometry();
geometry_cube.vertices.push(
    new THREE.Vector3(-1, -1, 1), // 0
    new THREE.Vector3(1, -1, 1), // 1
    new THREE.Vector3(-1, 1, 1), // 2
    new THREE.Vector3(1, 1, 1), // 3
    new THREE.Vector3(-1, -1, -1), // 4
    new THREE.Vector3(1, -1, -1), // 5
    new THREE.Vector3(-1, 1, -1), // 6
    new THREE.Vector3(1, 1, -1), // 7
);

/*
     6----7
    /|   /|
   2----3 |
   | |  | |
...