THREE.js、テクスチャがスプライトに表示されない

Question

私はcanves/lines.jsの例を修正し、ドットの代わりにテクスチャスプライトを表示しようとしています。私はPNGファイルからテクスチャを読み込み、通常のドットをスプライトに置き換えました。彼らは表示されません。

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); 

      } 

私は間違っていますか？

Answer 1

私がしたことはすべて正しいことでした。ローカルコンピュータからテクスチャを読むときに問題があります。解決方法は、Webサーバーに適切な権限を割り当てるか、またはChromeまたは他のブラウザがローカルファイルを読み取ることを許可することです。 Chromeの場合は、次のようなショートカットを作成することができます。

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