graphoarty

// don't show the menu bar
win.setMenu(null);

graphoarty

// global mesh holder
var mesh = null;

graphoarty

function createMeshWithMaterial(texturePath) {

    var loader = new THREE.TextureLoader();

    loader.load(

        url = texturePath,

        onLoad = function (texture) {

graphoarty

// The dragover event is fired when an element or text selection is being dragged over a valid drop target
document.addEventListener('dragover', function (event) {

    // The Event interface's preventDefault() method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.
    event.preventDefault();

    // The DataTransfer.dropEffect property controls the feedback (typically visual) the user is given during a drag and drop operation. It will affect which cursor is displayed while dragging. For example, when the user hovers over a target drop element, the browser's cursor may indicate which type of operation will occur. (docs)
    event.dataTransfer.dropEffect = 'copy';

});

graphoarty

// The drop event is fired when an element or text selection is dropped on a valid drop target.
document.addEventListener('drop', function (event) {

    event.preventDefault();

    // After a drop occurs, you get access to the dataTransfer property through the event that you catch in your callback
    // The dataTransfer property contains all of the files that you dropped (yes, you can drop multiple files) and the path property in the files contains the full path to the dropped file which we are going to use to create the material
    createMeshWithMaterial(event.dataTransfer.files[0].path);

    document.body.style.opacity = 1;

graphoarty

if(mesh != null){
    scene.remove(mesh);
}

graphoarty

<div style="position: absolute; left: 0; top: 0; padding: 20px; display: flex; flex-direction: row;">
    <div><a class="waves-effect waves-light btn">Select File</a></div>
    <div style="margin-left: 20px;"><h6 style="color: white;">Select a File or Drop it here</h6></div>
</div>

graphoarty

<div>
    <a id="select-file-button" class="waves-effect waves-light btn">Select File</a>
    <input type="file" id="select-file-input" style="display: none;">
</div>

graphoarty

$('#select-file-button').click(function () {
    $('#select-file-input').click();
});

graphoarty

<script>
    if (typeof module === 'object') {
        window.module = module;
        module = undefined;
    }
</script>

<script src="./js/jquery-2.2.4.min.js"></script>
<script src="./js/materialize.min.js"></script>
<script src="./js/three.min.js"></script>