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' );
var texture = new THREE.Texture( image );
image.onload = function() {
texture.needsUpdate = true;
};
userImage = $("#userImage")[0];
if (userImage.files && userImage.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
image.src = e.target.result;
};
reader.readAsDataURL(userImage.files[0]);
}
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);
}
});