纹理精灵在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中全是黑色

回答

相关问题