<div id="holder"></div>
 body {
            margin: 0;
            overflow: hidden;
            background-color: black;
        }

        #holder {
            border: 10px dashed #ccc;
            width: 150px;
            height: 150px;
            margin: 20px auto;
            
        }

        #holder.hover {
            border: 10px dashed #333;
        }
// global variables
var renderer;
var scene;
var camera;

var control;

function init() {
    setupDragDrop();
    setupScene();
}

function setupDragDrop() {
    var holder = document.getElementById('holder');
    // check if filereader is available
    if (typeof window.FileReader === 'undefined') {
        console.error("Filereader not supported");
    }

    holder.ondragover = function () {
        this.className = 'hover';
        return false;
    };
    holder.ondragend = function () {
        this.className = '';
        return false;
    };

    holder.ondrop = function (e) {
        this.className = '';
        e.preventDefault();

        var file = e.dataTransfer.files[0],
        reader = new FileReader();
        reader.onload = function (event) {
            console.log(event.target);
            console.log(event);
            holder.style.background = 'url(' + event.target.result + ') no-repeat center';

            var image = document.createElement('img');
            image.src = event.target.result;
            var texture = new THREE.Texture(image);
            texture.needsUpdate = true;

            scene.getObjectByName('cube').material.map = texture;
        };
        reader.readAsDataURL(file);

        return false;
    }

}

function setupScene() {

    // create a scene, that will hold all our elements such as objects, cameras and lights.
    scene = new THREE.Scene();

    // create a camera, which defines where we're looking at.
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / (window.innerHeight / 1.5), 0.1, 1000);

    // create a render, sets the background color and the size
    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(0x000000, 1.0);
    renderer.setSize(window.innerWidth, (window.innerHeight / 1.5));

    // create a cube and add to scene
    // var texture = new THREE.TextureLoader().load("./debug.png");
    // var cubeGeometry = new THREE.BoxGeometry(10 * Math.random(), 10 * Math.random(), 10 * Math.random());
    // var cubeMaterial = new THREE.MeshBasicMaterial( { map: texture} );
   
    // var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
    // cube.name = 'cube';
    // scene.add(cube);
    var cubeGeometry = new THREE.BoxGeometry(10 * Math.random(), 10 * Math.random(), 10 * Math.random());
  var texture = new THREE.TextureLoader().load("https://images.unsplash.com/photo-1597450172974-cd95bf7619e2?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ");
        var cubeMaterial = new THREE.MeshBasicMaterial({ map: texture });
        
        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        cube.name = 'cube';
        scene.add(cube);

    // position and point the camera to the center of the scene
    camera.position.x = 15;
    camera.position.y = 16;
    camera.position.z = 13;
    camera.lookAt(scene.position);

    // add the output of the renderer to the html element
    document.body.appendChild(renderer.domElement);

    control = new function () {
        this.rotationSpeed = 0.005;
        this.scale = 1;
    };
    addControls(control);

    // call the render function
    render();
}

function addControls(controlObject) {
    var gui = new dat.GUI();
    gui.add(controlObject, 'rotationSpeed', -0.1, 0.1);
    gui.add(controlObject, 'scale', 0.01, 2);
}

function render() {
    renderer.render(scene, camera);
    scene.getObjectByName('cube').rotation.x += control.rotationSpeed;
    scene.getObjectByName('cube').scale.set(control.scale, control.scale, control.scale);

    requestAnimationFrame(render);
}

// calls the init function when the window is done loading.
window.onload = init;

  
  
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/three.js/r120/three.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js