Three.js不顯示我的紋理

我需要製作一個帶有紋理的球。我在WebGL和Three.js上很新。問題是我看到一個白色球體，但沒有它的紋理。作爲新用戶，我無法提交圖片。Three.js不顯示我的紋理

的部分代碼是這樣的：

function init() { 

      canvas = document.getElementById('canvas'); 


      camera = new THREE.PerspectiveCamera(90, window.innerWidth/window.innerHeight, 1, 10000); 
      camera.position.z = 1000; 



      scene = new THREE.Scene(); 

          camera.lookAt (scene.position); 


          var llum = new THREE.DirectionalLight(); 
          llum.intensity=50; 


          llum.position.x=camera.position.x; 
          llum.position.y=camera.position.y; 
          llum.position.z=camera.position.z; 

          llum.lookAt(scene.position); 

          scene.add(llum); 



          var texture = THREE.ImageUtils.loadTexture('ull.jpg'); 


      texture.needsUpdate = true; 

      var material = new THREE.MeshBasicMaterial(texture); 

      var quality = 16, step = 1024/quality; 

      var geom = new THREE.SphereGeometry(500,100,100); 



      mesh = new THREE.Mesh(geom, material); 


      scene.add(mesh); 


      renderer = new THREE.WebGLRenderer({ antialias: true}); 
      renderer.setSize(window.innerWidth, window.innerHeight); 

      canvas.innerHTML = ""; 

          //Afegim al canvas el que hem de renderitzar 
      canvas.appendChild(renderer.domElement); 



      document.addEventListener('mousemove', onDocumentMouseMove, false); 


      window.addEventListener('resize', onWindowResize, false); 

     }

在此先感謝。

來源

2012-12-29 yafrack

它應該是這樣的：

var material = new THREE.MeshBasicMaterial({ map: texture });

來源

2012-12-29 12:32:14 mrdoob

該死！它只是工作。非常感謝。 – yafrack

沒有probs。請記住標記答案是正確的。 – mrdoob

因爲這是在谷歌搜索結果中，我將發佈什麼在我的情況的解決方案顯示出來的第一頁。我在正方形上畫了紋理，但實際上正方形向後旋轉，所以相機在沒有紋理的情況下看到了正方形的背部，固定旋轉後一切正常。

var geometry = new THREE.PlaneGeometry(FLOOR_SIZE, FLOOR_SIZE, 10, 10); 

    var loader = new THREE.TextureLoader(); 
    loader.load('images/floor.jpg', function (texture) { 
     var material = new THREE.MeshBasicMaterial({ 
      map: texture, 
      overdraw: 0.5 
     }); 

     var floor = new THREE.Mesh(geometry, material); 

     // ROTATION THAT MADE SQUARE INVISIBLE WAS Math.PI/2 

     floor.rotation.x = -Math.PI/2; 
     floor.position.y = -0.1; 
     scene.add(floor); 
    });

來源

2016-11-14 17:43:32 csharpfolk

Three.js不顯示我的紋理

回答

相關問題