Loading an image with a PointsMaterial in three.js - three.js

Question

I am learning three.js (r75) and trying to load an image to use as a shader or particle. The image appears to be loading after rendering.
I am using Ubuntu on a VM (VirtualBox, Win10 base) and running a localhost server via Python3 and Flask. I have also tried taking out all the framework stuff and tested using Python's SimpleHTTPServer. 3D acceleration is enabled via Chrome flag 'Override software rendering list' and all examples are working.
Having moved on from tying to get a sky box to work, I am following a tutorial on Aerotwist, https://aerotwist.com/tutorials/creating-particles-with-three-js/, to render particles - but when trying to apply the image, I get exactly the same issue as for my sky box. The tutorial was fine up to applying the image.
All I am seeing is a blank screen (black background in my container).
Watching files load when stepping through, it appears to be loading the image (status 200) after it's finished rendering (renderer.render(scene, camera)) - but I could be wrong. There are no errors displayed in Dev Tools.
I was under the impression that THREE.ImageUtils.loadTexture() or THREE.TextureLoader.load() would handle the image load by default. The image displays when mapped to a MeshLambertMaterial.
Appearing to be the only person with this problem (?!) - no mention in tutorials about pre-loading and not much from Google or Stack Overflow - can anyone suggest what I've done wrong or point me at something obvious, please?
Thank you! :)
This is the 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

So I guess the answer is obvious!
As I was trying to render a background, I did not want to complicate things with animation - I was not re-rendering my scene.
Rendering in an animation (or update) loop, allows the image(s) to fully load before they are actually rendered.
I added animate(); after the init(), and filled it with the following
function animate() {
render();
requestAnimFrame(animate);
}
For completeness - I am using this animation frame:
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
Easy when you know! Thanks to anyone who gave my question some consideration.