CODEWITHSUNDEEP
javascriptthree.js
Sekoul
Sekoul

Reputation: 1371

three.js - textures not loading

CONTEXT

I'm trying to recreate the example shown here using jsfiddle. I'm using this code to load the array of textures:

        var r = "https://github.com/timoxley/threejs/tree/master/examples/textures/cube/Park3Med/";
        var urls = [
            r + "px.jpg", r + "nx.jpg",
            r + "py.jpg", r + "ny.jpg",
            r + "pz.jpg", r + "nz.jpg"
        ];

I am only trying to recreate the texture, not the ply. Is there any reason why this wouldn't be working as I've set it up?

Upvotes: 2

Views: 793

Answers (2)

Radio
Radio

Reputation: 2863

The accepted answer is correct in stating the error, but misses a simple solution. You can load cross origin image data with Three.js. You just need to set it up properly. Here's the example fiddle with the fix: https://jsfiddle.net/1dy343xy/

The code change:

    var loader = new THREE.CubeTextureLoader();

    loader.setCrossOrigin( 'anonymous' );

    var textureCube = loader.load( urls );

Also note you were pointing to bad urls. You need to use git raw urls for what you're doing, although I don't know if it meets git ToS.

Upvotes: 3

Modig
Modig

Reputation: 1036

It has to do with security. You could serve your project on an apache or node server. And you will not have this problem anymore.

Upvotes: 1

Related Questions