Three.js: Load image texture failed but no log.

Created on 28 Apr 2017 · 7Comments · Source: mrdoob/three.js

Description of the problem

The image not being loaded and also no console point out what's wrong.

Browser

[ ] Chrome

OS

[ ] macOS

<html>
    <head>
        <title>My first Three.js app</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="./three.min.js"></script>
        <script>




            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000 );
            camera.lookAt(new THREE.Vector3(0, 0, 0));
            var renderer = new THREE.WebGLRenderer({ alpha: false });
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );



            var geometry1 = new THREE.BoxGeometry( 12, 1, 1 );
            var material1 = new THREE.MeshBasicMaterial( { color: 0x00FFCC } );
            var cube1 = new THREE.Mesh( geometry1, material1 );

            scene.add( cube1 );

            var geometry2 = new THREE.BoxGeometry( 10, 1, 1 );
            var material2 = new THREE.MeshBasicMaterial( { color: 0xCCFF33 } );
            var cube2 = new THREE.Mesh( geometry2, material2 );

            scene.add( cube2 );


            var geometry3 = new THREE.CircleBufferGeometry( 3, 32 );
            var material3 = new THREE.MeshBasicMaterial( { color: 0xCCFFCC   } );
            var circle3 = new THREE.Mesh( geometry3, material3 );
            scene.add( circle3 );


            var geometry4 = new THREE.BoxBufferGeometry( 10, 1, 1 );
            material4 = new THREE.MeshLambertMaterial({ map: new THREE.TextureLoader().load("http://imgur.com/Fwd8FLb") });
            var cube4 = new THREE.Mesh( geometry4, material4 );
            scene.add( cube4 );





            var light = new THREE.AmbientLight( 0x404040 ); // soft white light
            scene.add( light );

            camera.position.z = 5;



            var geometry = new THREE.BoxGeometry( 2, 1, 1 );

            material = new THREE.MeshLambertMaterial({ map: new THREE.TextureLoader().load("http://imgur.com/Fwd8FLb") });
            var cube = new THREE.Mesh( geometry, material );
            scene.add( cube );




            var render = function () {
                requestAnimationFrame( render );

                cube.rotation.x += 0.01;
                cube.rotation.y += 0.01;

                cube1.rotation.x += 0.02;
                cube1.rotation.y += 0.02;

                cube2.rotation.x += 0.03;
                cube2.rotation.y += 0.03;

                renderer.render(scene, camera);
            };

setTimeout(() => {render();},500)

        </script>
    </body>
</html>

Question

Source

EasonWang01

All 7 comments

@EasonWang01 if you want help, please ask over on the forum, or on Stackoverflow.

looeee on 28 Apr 2017

Already http://stackoverflow.com/questions/43628794/three-js-load-image-as-texture-not-render

And the point now is why no console error for it ,it's not an question intent for help.

EasonWang01 on 28 Apr 2017

I think this maybe silently fails due to a SOP issue. Try to the texture like this:

new THREE.TextureLoader().setCrossOrigin( true ).load( 'https://i.imgur.com/Fwd8FLb.jpg' );

Mugen87 on 28 Apr 2017

No,imgur.com not restrict for CORS.

EasonWang01 on 28 Apr 2017

Have you tried the posted code? I've replaced the URL with a correct https variant of your image. Your initial URL (http://imgur.com/Fwd8FLb) loads the entire website. This one is correct: https://i.imgur.com/Fwd8FLb.jpg

Mugen87 on 28 Apr 2017

thanks it's CORS issue, hope .setCrossOrigin can be mention in error message.

EasonWang01 on 28 Apr 2017

👎1