JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
    <!-- three.js container -->
    <input id="userImage" type="file" />
    <div id="container"></div>
    <script type="x-shader/x-vertex" id="vertexShader">
        varying vec2 vUv;

        void main() {
            vUv = uv;
            gl_Position = vec4(uv * 2. - vec2(1, 1), 0., 1.);
        }
    </script>
    <script type="x-shader/x-fragment" id="fragmentShader">
        precision highp float;

        varying vec2 vUv;
        uniform sampler2D texture1;
        void main() {
            gl_FragColor = texture2D(texture1, vUv.xy);
        }
    </script>
    <script>
        
    </script>
</body>

JavaScript

$("#userImage").change(function () {
    var image = document.createElement('img');
    image.onload = function () {};
    image.crossOrigin = "anonymous";
    image.src = $("#userImage").val();
    var texture = THREE.ImageUtils.loadTexture(image);

    camera = new THREE.OrthographicCamera();
    renderer = new THREE.WebGLRenderer({
        antialias: false
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    shader = new THREE.ShaderMaterial({
        vertexShader: document.getElementById('vertexShader').textContent,
        fragmentShader: document.getElementById('fragmentShader').textContent,
        uniforms: {
            texture1: {
                type: "t",
                value: texture
            }
        }
    });
    scene = new THREE.Scene();
    scene.add(new THREE.Mesh(new THREE.PlaneGeometry(1), shader));

    $('#container').append(renderer.domElement);
    animate();

    function animate() {
        requestAnimationFrame(animate);

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