Having trouble loading texture locally in THREE.js?

Question

Having trouble loading texture locally in THREE.js?

Here's the scenario: I have a local file where I attempt to load a texture using the following code:

var texture = THREE.ImageUtils.loadTexture( 'image.jpg' );
var cubeGeo = new THREE.CubeGeometry( 50, 50, 50 );
var cubeMat = new THREE.MeshBasicMaterial( { map: texture } );
var cube = new THREE.Mesh( cubeGeo, cubeMat );
scene.add( cube );

However, when I try to run this code on my computer, the image does not appear (the cube remains black). Strangely, when I move the entire folder to a server and access it from there, the image is displayed as expected.

My question is, why does the code work when the files are hosted on a server but not when they are stored locally on my computer? All necessary files have been copied over properly. I even tried using an absolute path but still no luck. Is there a specific setting that needs to be adjusted on my computer for this to work? I am currently running Windows 7 with Chrome version 32.0.1700.76 m and using THREE.js r64 without any additional libraries or plugins.

javascript image three.js textures local

Answer 1

Answer №1

The issue you are experiencing is a result of security restrictions that need to be addressed.

To resolve this problem, it is recommended to run a local server.

For detailed information on how to set up and run things locally with three.js, visit the wiki article at How to Run Things Locally.

Using version r.112 of three.js

Answer 2

The issue you are experiencing is a result of security restrictions that need to be addressed.

To resolve this problem, it is recommended to run a local server.

For detailed information on how to set up and run things locally with three.js, visit the wiki article at How to Run Things Locally.

Using version r.112 of three.js

Answer 3

Answer №2

If you are looking to incorporate textures into your project, a useful method is to convert images into base64 strings and then assign them directly to your variables.

Take a look at this example: https://codepen.io/tamlyn/pen/RNrQVq

var texture = new THREE.Texture();
texture.image = image;
image.onload = function() {
texture.needsUpdate = true;
};

The 'image' variable in the code snippet above is extracted from the base64 string.

You have the option to create a res.js file and store all your textures there :) This approach may not be ideal as it requires re-conversion of images to base64 when changes are made, but it is compatible with any browser, including Microsoft Edge.

Answer 4

If you are looking to incorporate textures into your project, a useful method is to convert images into base64 strings and then assign them directly to your variables.

Take a look at this example: https://codepen.io/tamlyn/pen/RNrQVq

var texture = new THREE.Texture();
texture.image = image;
image.onload = function() {
texture.needsUpdate = true;
};

The 'image' variable in the code snippet above is extracted from the base64 string.

You have the option to create a res.js file and store all your textures there :) This approach may not be ideal as it requires re-conversion of images to base64 when changes are made, but it is compatible with any browser, including Microsoft Edge.

Answer 5

Answer №3

If you're feeling lost on this topic (I definitely was at first), one way to clarify things is by setting up a local server. I personally used node - http://nodejs.org/download/ to get node).

Once you have that sorted, navigate to your project directory and enter the following command in the terminal:

npm install http-server -g

To start the server, simply type:

http-server

You can then access your project through the default local page

http://localhost:8080/

You should now be able to view your project there.

Answer 6

If you're feeling lost on this topic (I definitely was at first), one way to clarify things is by setting up a local server. I personally used node - http://nodejs.org/download/ to get node).

Once you have that sorted, navigate to your project directory and enter the following command in the terminal:

npm install http-server -g

To start the server, simply type:

http-server

You can then access your project through the default local page

http://localhost:8080/

You should now be able to view your project there.

Answer 7

Answer №4

Seems like I'm fashionably late to the gathering, as usual.

Surprisingly, you can achieve this without the need for setting up a node server, unless, of course, you require a backend for other reasons.

The trick is to load your local image into the browser by converting it into a Base64 string using the FileReader object.

Once you have converted the image to a Base64 string, you have the option to either save it to sessionStorage (which is limited to around ~4 Mb on average) or keep the string stored in a variable while your "app" is active.

You can then transform the base64 string into a three.js texture and apply it to an object within your scene. It's important to note the asynchronous render call in the example below; The scene must be rendered once the texture has fully loaded, or else it won't be displayed properly.

In the following example, I am loading the three.texture using my image that has been uploaded to sessionStorage.

TEXTURE = THREE.ImageUtils.loadTexture(
      sessionStorage.getItem('myBase64Img');
      {},
      function () { renderScene(); /* async call after texture is loaded */ }
    );

Cheers!

Answer 8

Seems like I'm fashionably late to the gathering, as usual.

Surprisingly, you can achieve this without the need for setting up a node server, unless, of course, you require a backend for other reasons.

The trick is to load your local image into the browser by converting it into a Base64 string using the FileReader object.

Once you have converted the image to a Base64 string, you have the option to either save it to sessionStorage (which is limited to around ~4 Mb on average) or keep the string stored in a variable while your "app" is active.

You can then transform the base64 string into a three.js texture and apply it to an object within your scene. It's important to note the asynchronous render call in the example below; The scene must be rendered once the texture has fully loaded, or else it won't be displayed properly.

In the following example, I am loading the three.texture using my image that has been uploaded to sessionStorage.

TEXTURE = THREE.ImageUtils.loadTexture(
      sessionStorage.getItem('myBase64Img');
      {},
      function () { renderScene(); /* async call after texture is loaded */ }
    );

Cheers!

Having trouble loading texture locally in THREE.js?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

ngAnimateSwap - animations do not function as intended when boolean expressions are utilized

Maintaining DOM modifications once a link has been clicked and the Back button is pressed

Working with an undefined object in jQuery

Is it possible for me to create a nested component without having to make a new file

Trouble with the datepicker

"Composing perfect sentences: The art of incorporating quotes

Deploying scripts after CloudFormation deployment

Using jQuery to create a Select All Checkbox that toggles a specific class

Encountering error when using require() with Firebase in Express

Update the sum upon deleting a feature in an HTML and JavaScript form

After being redirected from another page using history() in React, the state is initially set to null but later gets updated to the correct value - Firebase integration

What could be the reason for ng-init failing to activate the $watch listener?

Exploring the behavior of Object.assign in for loops and forEach loops

Utilizing jQuery to manage asynchronous tasks, such as executing AJAX requests, handling promises, and using deferred

The font family specified in the Materia UI theme is experiencing compatibility issues on browsers that are not Chrome

I'm struggling to make this script replace the values within the table

Ways to resolve the issue of my sidebar displaying at the bottom of the page on smaller screens

What is the best way to locate the closest element using JavaScript?

Tips for achieving a blurred background image effect when hovering, while keeping the text unaffected

Using Vue.js to invoke an external JavaScript function for search functionality