無法加載紋理

我正在努力解決紋理加載問題。我看到的只是一個黑色的球體。 :(無法加載紋理

任何幫助將是真棒，讓我的不對勁瀏覽器下載的圖像，在控制檯上沒有任何問題

經過與相同的結果每一個瀏覽器 OS：！？。10.8.2的Mac

這裏是我的代碼：

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

來源

2012-12-07 user1018074

要調用

renderer.render(scene, camera);

只有一次，並可能在紋理完成加載之前。

添加動畫循環。

function animate() { 

    requestAnimationFrame(animate); 

    renderer.render(scene, camera); 

} 

animate();

來源

2012-12-07 22:16:57 WestLangley

謝謝，工作。我很粗心...... – user1018074

無法加載紋理

回答

相關問題