CODEWITHSUNDEEP
three.jstexturesloading
user1018074
user1018074

Reputation: 99

Cannot load textures

I'm struggleing with texture load issues. All I see is a black sphere. :(

Any help would be awesome! Do i make something wrong? Browser downloads the image, no issues on the console.

Checked in every browser with the same result. OS: Mac 10.8.2

Here is my code:

<html>
<head>
    <script src="js/jquery-1.8.3.min.js"></script>  
    <script src="js/three.min.js"></script>
</head>

<body>

    <div id="container">

    </div>


    <script>
        function addSpaceSphere( ){
            // set up the sphere vars
            var radius = 125,
            segments = 16,
            rings = 16;

            var material = new THREE.MeshPhongMaterial({
                color:0xFFFFFF,
                map: THREE.ImageUtils.loadTexture( 'textures/SPACE014S.png' )  ,
            });

            var sphere = new THREE.Mesh(
                new THREE.SphereGeometry(
                    radius,
                    segments,
                    rings
                ),
                material
            );


            // add the sphere to the scene
            scene.add(sphere);
        }

        function addLights(){
            // create a point light
            var ambient = new THREE.AmbientLight( 0xFFFFFF );
            scene.add( ambient );


            // create a point light
            var pointLight = new THREE.PointLight(0xFFFFFF);

            // set its position
            pointLight.position.x = 10;
            pointLight.position.y = 50;
            pointLight.position.z = 130;

            // add to the scene
            scene.add(pointLight);
        }

        function createScene(){
            // add the camera to the scene
            scene.add(camera);

            // the camera starts at 0,0,0
            // so pull it back
            camera.position.x = 0;
            camera.position.y = 0;
            camera.position.z = 300;

            // start the renderer
            renderer.setSize(WIDTH, HEIGHT);

            $container.append(renderer.domElement);

            addSpaceSphere( );

            addLights();

            renderer.render(scene, camera); 
        }

        function onWindowResize( event ) {
            var newEarthContainerWidth = earthContainer.offsetWidth;
            var newWindowHeight = window.innerHeight;
            var newScale = newEarthContainerWidth / earthContainerWidth;

            sphere.geometry.__dirtyVertices = true;

            sphere.scale.x = sphere.scale.y = sphere.scale.z = newScale;

            renderer.setSize( newEarthContainerWidth, newWindowHeight );

            camera.aspect = newEarthContainerWidth / newWindowHeight;
            camera.updateProjectionMatrix();
            camera.radius = ( newEarthContainerWidth + newWindowHeight ) / 4;
        }

        var WIDTH = window.innerWidth;
        var HEIGHT = window.innerHeight;

        var VIEW_ANGLE = 45,
            ASPECT = WIDTH / HEIGHT,
            NEAR = 0.1,
            FAR = 10000;

        var $container = $('#container');

        // create a WebGL renderer, camera
        // and a scene
        //var renderer = new THREE.CanvasRenderer();
        var renderer = new THREE.WebGLRenderer();
        var camera = new THREE.PerspectiveCamera(
            VIEW_ANGLE, ASPECT, NEAR, FAR
        );

        var scene = new THREE.Scene();

        createScene();      

        window.addEventListener( 'resize', onWindowResize, false );
    </script>
</body>

Upvotes: 0

Views: 165

Answers (1)

WestLangley
WestLangley

Reputation: 104763

You are calling 

renderer.render( scene, camera );

only once, and probably before the texture completes loading.

Add an animation loop.

function animate() {

    requestAnimationFrame( animate );

    renderer.render( scene, camera );

}

animate();

Upvotes: 1

Related Questions