Ein Bild mit einem PointsMaterial in three.js laden

Question

Ich lerne three.js (r75) und versuche ein Bild zu laden, um es als Shader oder Partikel zu verwenden. Das Bild scheint nach dem Rendern geladen zu sein.

Ich benutze Ubuntu auf einer VM (VirtualBox, Win10 Basis) und einen lokalen Host-Server über Python3 und Flask. Ich habe auch versucht, alle Framework-Sachen herauszunehmen und mit Pythons SimpleHTTPServer getestet. Die 3D-Beschleunigung wird über das Chrome-Flag 'Software-Rendering-Liste überschreiben' aktiviert und alle Beispiele funktionieren.

Nachdem ich von einem Binding weggegangen bin, um eine Skybox zu arbeiten, folge ich einem Tutorial über Aerotwist, https://aerotwist.com/tutorials/creating-particles-with-three-js/, um Partikel zu rendern - aber wenn ich versuche, das Bild anzuwenden, bekomme ich genau das gleiche Problem wie bei meiner Skybox . Das Tutorial war bis zur Anwendung des Bildes in Ordnung.

Alles, was ich sehe, ist ein leerer Bildschirm (schwarzer Hintergrund in meinem Container).

Beobachten Dateien laden beim Durchlaufen, es scheint, das Bild (Status 200) nach dem Rendern geladen zu werden (renderer.render(scene, camera)) - aber ich könnte falsch liegen. In den Entwicklungswerkzeugen werden keine Fehler angezeigt.

Ich hatte den Eindruck, dass THREE.ImageUtils.loadTexture() oder THREE.TextureLoader.load() die Bildbelastung standardmäßig behandeln würde. Das Bild wird angezeigt, wenn es einer MeshLambertMaterial zugeordnet ist.

Scheint, die einzige Person mit diesem Problem (?!) Zu sein - keine Erwähnung in Tutorials über das Vorladen und nicht viel von Google oder Stack Overflow - kann jemand vorschlagen, was ich falsch gemacht habe oder mich auf etwas offensichtlich , Bitte?

Vielen Dank! :)

Dies ist der Code.

; function Solar3D() { 
'use strict'; 

var scene, renderer, camera, 
    container = $('#webgl-container'), 
    skyBox = null; 

init(); 

function init() { 
    renderer = new THREE.WebGLRenderer({ 
     antialias: true 
    }); 
    renderer.setClearColor(0x000000, 1); 

    var $container = $(container); 
    var containerWidth = $container.width(); 
    var containerHeight = $container.height(); 
    renderer.setSize(containerWidth, containerHeight); 
    container.append(renderer.domElement); 

    scene = new THREE.Scene(); 

    camera = new THREE.PerspectiveCamera(75, containerWidth/containerHeight, 1, 5000); 
    camera.position.set(0, 155, 32); 
    camera.lookAt(new THREE.Vector3(0, 0, 0)); 

    scene.add(particles()); 

    render(); 
} 

function particles() { 
    // https://aerotwist.com/tutorials/creating-particles-with-three-js/ 
    var particleCount = 1800, 
     particles = new THREE.Geometry(), 
     pMaterial = new THREE.PointsMaterial({ 
      color: 0xFFFFFF, 
      size: 20, 
      map: THREE.ImageUtils.loadTexture(
       '/app/static/img/particle.png'), 
      blending: THREE.AdditiveBlending, 
      transparent: true 
     }); 

    for (var p = 0; p < particleCount; p++) { 
     var pX = Math.random() * 500 - 250, 
      pY = Math.random() * 500 - 250, 
      pZ = Math.random() * 500 - 250, 
      particle = new THREE.Vector3(pX, pY, pZ); 
     particles.vertices.push(particle); 
    } 

    var particleSystem = new THREE.Points(
     particles, 
     pMaterial); 

    particleSystem.sortParticles = true; 

    return particleSystem; 
} 

function render() { 
    renderer.render(scene, camera); 
} 

function loadTexture(path) { 
    return new THREE.TextureLoader().load(path); 
} 

}

Answer 1

Also ich denke, die Antwort liegt auf der Hand!

Als ich versuchte, einen Hintergrund zu rendern, wollte ich die Dinge nicht mit Animationen komplizieren - ich habe meine Szene nicht neu gerendert.

Durch Rendern in einer Animations- (oder Aktualisierungs-) Schleife können die Bilder vollständig geladen werden, bevor sie tatsächlich gerendert werden.

Ich habe animation(); nach den init() und füllte sie mit folgenden

function animate() { 
    render(); 
    requestAnimFrame(animate); 
} 

Der Vollständigkeit - ich bin mit diesem Animationsrahmen:

window.requestAnimFrame = (function(){ 
    return window.requestAnimationFrame || 
     window.webkitRequestAnimationFrame || 
     window.mozRequestAnimationFrame || 
     window.oRequestAnimationFrame  || 
     window.msRequestAnimationFrame  || 
     function(callback){ 
      window.setTimeout(callback, 1000/60); 
     }; 
})(); 

einfach, wenn Sie wissen! Danke an alle, die meine Frage berücksichtigt haben.