three.js dev template - module

HTML

<canvas id="canvas" width="320" height="240"></canvas>
<script id="vertex-shader" type="text/glsl">

  void main()	{
            gl_Position = vec4(position.xyz, 1.0);
    
        }
      </script>
<script id="fragment-shader" type="text/glsl">
  #ifdef GL_ES
        precision highp float;
        #endif

        void main( void ) {
            gl_FragColor = vec4( 0.5, 0.5, 0.5, 1.0 );

        }
      </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>

CSS

body {
          margin: 0;
          padding: 0;
          width: 100vw;
          height: 100vh;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        canvas {
          position: absolute;
        }

JavaScript

var scene, camera, renderer, geometry, canvasElm, square, shapeMesh;
canvasElm = document.getElementById('canvas');


function init(c) {
    scene = new THREE.Scene();

    camera = new THREE.OrthographicCamera(0, canvasElm.width, 0, canvasElm.height, -1, 1);
    camera.zoom = 1;

    renderer = new THREE.WebGLRenderer({ canvas: c, antialias: true, alpha: true });
}

function createShape() {
    var sqLength = 80;
    var squareShape = new THREE.Shape()
        .moveTo(0, 0)
        .lineTo(0, sqLength)
        .lineTo(sqLength, sqLength)
        .lineTo(sqLength, 0)
        .lineTo(0, 0);

    var material = new THREE.MeshBasicMaterial({ color: 0x7f7f7f, side: THREE.DoubleSide});
     
    var geometryTwo = new THREE.ShapeGeometry(squareShape)
    shapeMesh = new THREE.Mesh(geometryTwo, material);
    scene.add(shapeMesh);
}

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

function onWindowResize() {
    camera.aspect = canvasElm.width / canvasElm.height;
    camera.updateProjectionMatrix();
    renderer.setSize(canvasElm.width, canvasElm.height);
}
window.addEventListener('resize', onWindowResize, false);

init(canvasElm);
createShape();
animate();