javascript add texture on the floor from computer onclick

Question

I am trying to put a texture on my floor using <input type="file" onchange=function()> but always I see just black texture. Don't know, how to put my .jpg file from computer as a texture on my floor. Any help?

here is my code

javascript:

  function preview_image(event) {
    var reader = new FileReader();
    reader.onload = function() {
      var floorTexture = THREE.ImageUtils.loadTexture(reader);
      floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
      floorTexture.repeat.set(10, 10);
      var floorMaterial = new THREE.MeshBasicMaterial({
        map: floorTexture,
        side: THREE.DoubleSide
      });
      var floorGeometry = new THREE.PlaneGeometry(100, 100, 10, 10);
      var floor = new THREE.Mesh(floorGeometry, floorMaterial);
      floor.position.set(0, 0, 0);
      floor.rotation.set(0, 0, 0);
      scene.add(floor);

      var output = floorTexture;
      output.src = reader.result;
    }
    reader.readAsDataURL(event.target.files[0]);
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>
<input type="file" accept="image/jpeg, image/png" onchange="preview_image(event)" /> <img id="output_image" />

Answer 1

There's a few things going on here. THREE.ImageUtils.loadTexture has been deprecated.I used THREE.TextureLoader() instead. I also added camera, and set the z position. The texture info to load is reader.result, not just reader. Here's a working snippet:

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, .1, 50);
camera.position.z = 30;

var renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

function preview_image(event) {
    var reader = new FileReader();
    reader.onload = function() {
        // instantiate a loader
        var loader = new THREE.TextureLoader();
        // load a resource
        loader.load(
            // resource URL
            reader.result,
            // onLoad callback
            function(floorTexture) {
                floorTexture.needsUpdate = true;
                var floorMaterial = new THREE.MeshBasicMaterial({ map: floorTexture, side: THREE.DoubleSide });
                var floorGeometry = new THREE.PlaneGeometry(10, 10, 10);
                var floor = new THREE.Mesh(floorGeometry, floorMaterial);
                scene.add(floor);
                renderer.render(scene, camera);
            },
            // onProgress callback currently not supported
            undefined,
            // onError callback
            function(err) {
                console.error('An error happened.');
            }
        );
    }
    reader.readAsDataURL(event.target.files[0]);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>
    <input type="file" accept="image/jpeg, image/png" onchange="javascrpit:preview_image(event)" /> <img id="output_image" />