Question

我正在努力解决纹理加载问题。我所看到的只是一个黑色的球体。：（

任何帮助都会很棒！我做错了吗？浏览器下载图像，控制台上没有问题。

在每个浏览器中检查相同的结果。操作系统：Mac 10.8.2

这是我的代码：

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

Answer 1

您正在致电

renderer.render( scene, camera );

只有一次，可能在纹理完成加载之前。

添加动画循环。

function animate() {

    requestAnimationFrame( animate );

    renderer.render( scene, camera );

}

animate();

无法加载纹理

1 个答案: