THREE.js，纹理不显示在sprite上

我正在尝试修改canves/lines.js示例并显示纹理的sprite而不是点。我从PNG文件加载纹理，并用精灵替换了常规点。他们不显示。THREE.js，纹理不显示在sprite上

function init() { 
      var container, separation = 100, amountX = 50, amountY = 50, 
      particles, particle,sprite; 

      var crateTexture = THREE.ImageUtils.loadTexture('images/crate.png'); 
      var crateMaterial = new THREE.SpriteMaterial({ map: crateTexture, useScreenCoordinates: false, color: 0xff0000 }); 
      container = document.createElement('div'); 
      document.body.appendChild(container); 

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

      scene = new THREE.Scene(); 

      renderer = new THREE.CanvasRenderer(); 
      renderer.setClearColor (0x5bb0d2, 1); 
      renderer.setPixelRatio(window.devicePixelRatio); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      container.appendChild(renderer.domElement); 

      // particles 

      var PI2 = Math.PI * 2; 
      var material = new THREE.SpriteCanvasMaterial({ 

       color: 0xfffffff, 
       program: function (context) { 

        context.beginPath(); 
        context.arc(0, 0, 0.5, 0, PI2, true); 
        context.fill(); 

       } 

      }); 

      var geometry = new THREE.Geometry(); 

      var x,y,z=0; 
      for (var i = 0; i < 100; i ++) { 

       particle = new THREE.Sprite(crateMaterial); 
       particle.position.x = Math.random() * 2 - 1; 
       particle.position.y = Math.random() * 2 - 1; 
       particle.position.z = Math.random() * 2 - 1; 
       particle.position.normalize(); 
       particle.position.multiplyScalar(Math.random() * 10 + 450); 
       particle.scale.x = particle.scale.y = 64; 
       scene.add(particle); 

      }

我做错了什么？

来源

2017-09-06 Rafal

我所做的一切都是正确的，从本地计算机读取纹理时存在问题。解决方案是将适当的权限分配给web serwer或允许Chrome或其他浏览器读取本地文件。在Chrome的情况下，您可以创建如下的快捷方式：

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" chrome --allow-file-access-from-files

来源

2017-09-06 20:37:10 Rafal

THREE.js，纹理不显示在sprite上

回答

相关问题