紋理精靈在three.js中全是黑色

我開始使用three.js，並且我已經停留在一個簡單的情況：在精靈上顯示圖像。我只能得到一個黑色的面寫的文檔中的線以下：紋理精靈在three.js中全是黑色

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset=utf-8> 
     <title>TEST Sprite</title> 
     <style> 
      body { margin: 0; background-color:#000; } 
      canvas { width: 100%; height: 100%; } 
      #glRender { 
       position:absolute; 
       top: 50px; 
       left: 200px; 
       min-width: 200px; 
       width: 50%; 
       min-height: 200px; 
       z-index: 1; 
       height: 50%; 
       border: 10px solid #38272C; 
      }   

     </style> 
    </head> 
    <body> 
     <div id="glRender"></div> 
     <script src="http://threejs.org/build/three.js"></script> 
     <script> 
      var scene = new THREE.Scene(); 
      var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 
      var renderer = new THREE.WebGLRenderer(); 
      renderer.setSize(window.innerWidth/2, window.innerHeight/2); 

      container = document.getElementById('glRender'); 
      document.body.appendChild(container); 
      container.appendChild(renderer.domElement); 

      // A simple cube 
      var geometry = new THREE.BoxGeometry(1, 1, 1); 
      var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); 
      var cube = new THREE.Mesh(geometry, material); 
      scene.add(cube); 

      // completely black... 
      var photoTexLoad = new THREE.TextureLoader().load('http://s2.favim.com/610/150817/plage-summer-Favim.com-3137863.jpg'); 
      var matPhoto = new THREE.SpriteMaterial({ map: photoTexLoad, color: 0xffffff }); 
      var sprite = new THREE.Sprite(matPhoto); 
      sprite.scale.set(2, 2, 2); 
      sprite.position.set(1, 0, 0.5); 
      scene.add(sprite); 

      camera.position.z = 5; 

      function render() { 
       requestAnimationFrame(render); 
       cube.rotation.x += 0.01; 
       cube.rotation.y += 0.1; 
       renderer.render(scene, camera); 
      } 

      render(); 

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

我得到的紡紗綠色立方體黑色平面相交。我錯過了什麼讓飛機上顯示圖像？

來源

2017-04-02 tetorea

我剛發現我得了「CORS」的問題中的問題突出three.js: texture goes all black

該代碼工作正常，但我不能嘗試從外部網站或直接在我的電腦上加載圖像，只有我的本地主機上的文件。使用啓動瀏覽器的桌面快捷方式使用谷歌瀏覽器的特定實例：「C：\ Program Files（x86）\ Google \ Chrome \ Application \ chrome.exe」--args - user-data-dir =「C：/ Chrome開發會話」 - 禁用網絡安全

來源

2017-04-02 20:40:04 tetorea

.TextureLoader().load()是異步的。試圖在調用它之後立即應用它，這很可能是因爲紋理未完成加載而導致代碼中出現黑色平面。

你可以解決這個問題：

傳遞一個回調.load作爲第二個參數。（一旦紋理加載完成後它被稱爲）：

var matPhoto, 
    sprite, 
    texloader = new THREE.TextureLoader(); 

texloader.load('http://s2.favim.com/610/150817/plage-summer-Favim.com-3137863.jpg', 
    function(tex) { 
    matPhoto = new THREE.SpriteMaterial({ map: tex, color: 0xffffff }); 
    sprite = new THREE.Sprite(matPhoto); 
    //...etc... 
    } 
);

設置一個事件偵聽器：

var texloader = new THREE.TextureLoader(); 

texloader.load('http://s2.favim.com/610/150817/plage-summer-Favim.com-3137863.jpg'); 

textureLoader.addEventListener('load', function(event){ 

    // event.content holds the texture---------------v 
    matPhoto = new THREE.SpriteMaterial({ map: event.content, color: 0xffffff }); = event.content; 

});

來源

2017-04-02 08:55:31 Pineda

謝謝你的提示。我想我已經嘗試過，但沒有結果。我現在再試一次，但我仍然得到黑色飛機。這個代碼在你身邊？我正在使用chrome並在邊緣進行測試。 – tetorea

紋理精靈在three.js中全是黑色

回答

相關問題