THREE.js, Textur wird nicht auf einem Sprite angezeigt

Question

Ich versuche, das Beispiel canves/lines.js zu ändern und strukturierte Sprites anstelle von Punkten anzuzeigen. Ich lade eine Textur aus einer PNG-Datei und habe reguläre Punkte durch Sprites ersetzt. Sie zeigen es nicht.

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

      } 

was mache ich falsch?

Answer 1

Alles, was ich getan habe, war korrekt, es gibt ein Problem beim Lesen von Texturen vom lokalen Computer. Die Lösung besteht darin, dem Web-Server ODER entsprechende Privilegien zuzuweisen, damit Chrome oder andere Browser lokale Dateien lesen können. Im Falle von Chrome können Sie eine Verknüpfung wie folgt erstellen:

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