Graphics Reference
In-Depth Information
var texture = new
THREE.Texture(image);
texture.needsUpdate = true;
scene.getObjectByName('cube').material.map
= texture;
};
reader.readAsDataURL(file);
return false;
The first thing that happens is that we call
e.preventDefault()
. We need
to do this to make sure that the browser doesn't just show the file, since that
is its normal behavior. Next, we look at the event and retrieve the dropped file
using
e.dataTransfer.files[0]
. We can't really do much with the file
itself, since Three.js can't work directly with those, so we have to convert it
to an
img
element. For this, we use a
FileReader
object. When the reader
is done loading, we use the content to create this
img
element. This element
is then used to create the
THREE.Texture
object, which we set as material
for our box.
How it works...
Drag and drop functionality isn't something that is supported by Three.js out of the
box. As we saw in the previous section, we use the standard HTML5 drag and drop
related events. A good overview of what events are available can be found in the
