I am trying to put an image on an object, like this:

var texture = new THREE.TextureLoader().load( 'crate.gif' );
var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
var material = new THREE.MeshBasicMaterial( { map: texture } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

I have "crate.gif" in my local folder, but it does not appear on the box.

I am expected to either run a web server, or I can use a data url, because local image loading does not work, as re-iterated by the developer.

• Running a web server is an unacceptable work-around and will not be considered.
• I may be willing to do the chore of converting every single image into Base64, but I don't know how to integrate that solution.

I realize the image may not be displaying because it hasn't loaded before being called. What is the easiest way to load an image?

I am trying to put an image on an object, like this:

var texture = new THREE.TextureLoader().load( 'crate.gif' );
var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
var material = new THREE.MeshBasicMaterial( { map: texture } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

I have "crate.gif" in my local folder, but it does not appear on the box.

I am expected to either run a web server, or I can use a data url, because local image loading does not work, as re-iterated by the developer.

• Running a web server is an unacceptable work-around and will not be considered.
• I may be willing to do the chore of converting every single image into Base64, but I don't know how to integrate that solution.

I realize the image may not be displaying because it hasn't loaded before being called. What is the easiest way to load an image?

• javascript
• three.js
• base64

• Does this answer your question? Cross-origin image load denied on a local image with THREE.js on Chrome – M - Commented Feb 13, 2020 at 7:00
• 1 Question has been asked multiple times before: stackoverflow./questions/22845141/… – M - Commented Feb 13, 2020 at 7:05
• threejs/docs/#manual/en/introduction/… – manthrax Commented Feb 19, 2020 at 21:59
• @Marquizzo no, running a server is explicitly forbidden in the question – cubetronic Commented Feb 28, 2020 at 19:19

2 Answers 2

It is just as easy as using a Data URI in place of an image filename, if it's done right:

var geometry = new THREE.SphereGeometry(0.5, 32, 32);
var texture = new THREE.TextureLoader().load( "data:image/jpeg;base64,/9j/4AAQSkZJRgA--(truncated-for-example)--BAgEASABIAAD" );
var material = new THREE.MeshBasicMaterial( { map: texture } );
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Another way to load an image as a texture is with a require and using a relative path of your image:

I'm using React and works for me.

const textureImage = require('../assets/images/image.png');
const texture = new THREE.TextureLoader().load(textureImage);
const geometry = geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
const material = new THREE.MeshBasicMaterial( { map: texture } );
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);