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上

回答

相關問題