Question

55

How can I load a local image in THREE.js?

rated 0 times [ 62] [ 7] / answers: 1 / hits: 7481 / 4 Years ago, thu, february 13, 2020, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kylanalis

Add To Favorites

Follow

Total Points: 438

Total Questions: 85

Total Answers: 102

Location: Barbados

Member since Sun, Nov 27, 2022

1 Year ago

kylanalis questions

1 How to pass State in Context React

Sat, Oct 2, 21, 00:00, 3 Years ago

1 How to get rid of or remove spinners/arrows in react-select?

Tue, Oct 13, 20, 00:00, 4 Years ago

1 [NodeJs][Sequelize] ReferenceError: Cannot access 'ModelName' before initialization

Sat, Apr 11, 20, 00:00, 4 Years ago

1 trigger('change') is not working on Select

Tue, Jan 7, 20, 00:00, 4 Years ago

1 How to avoid rerendering of child component

Thu, Jan 2, 20, 00:00, 4 Years ago

View All

answered 4 Years ago melinal · Accepted Answer

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);