在three.js中加载带有PointsMaterial的图像

我正在学习three.js（r75）并尝试加载一个图像以用作着色器或粒子。渲染后，图像似乎正在加载

我在虚拟机（VirtualBox，Win10 base）上使用Ubuntu，并通过

Python3

和

Flask

运行本地主机服务器。我还尝试了取出所有框架材料，并使用Python的

SimpleHTTPServer

进行了测试。3D加速通过Chrome标志“覆盖软件渲染列表”启用，并且所有示例都正常工作

从绑定天空盒开始，我开始学习Aerotwist的教程来渲染粒子，但是当尝试应用图像时，我遇到了与天空盒完全相同的问题。该教程可以很好地应用图像

我看到的只是一个空白屏幕（我的容器中有黑色背景）

查看文件加载在单步执行时，它似乎在完成渲染后加载图像（状态200）（

renderer.render（scene，camera）

）-但我可能错了。开发工具中没有显示错误

我的印象是

THREE.ImageUtils.loadTexture（）

或

THREE.TextureLoader.load（）

默认情况下将处理图像加载。映射到

MeshLambertMaterial

时，将显示图像

似乎是唯一一个有这个问题的人（？！）-在教程中没有提到预加载，也没有太多来自Google或Stack Overflow的内容-有人能建议我做错了什么，或者指出一些明显的问题吗

谢谢！：）

这是代码

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

；函数Solar3D（）{
"严格使用",；
var场景、渲染器、摄影机、，
容器=$（“#webgl容器”），
skyBox=null；
init（）；
函数init（）{
renderer=new THREE.WebGLRenderer({
反别名：对
});
setClearColor（0x000000，1）；
var$container=$（container）；
var containerWidth=$container.width（）；
var containerHeight=$container.height（）；
setSize（containerWidth，containerHeight）；
container.append（renderer.domeElement）；
场景=新的三个。场景（）；
摄像机=新的三个透视摄像机（75，集装箱宽度/集装箱高度，15000）；
摄像机位置设置（0、155、32）；
摄影机。注视（新的三个向量3（0，0，0））；
添加（粒子（））；
render（）；
}
函数粒子（）{
// https://aerotwist.com/tutorials/creating-particles-with-three-js/
var particleCount=1800，
粒子=新的三个。几何体（），
p材质=新的三点材质({
颜色：0xFFFFFF，
尺码：20，
地图：3.ImageUtils.loadTexture(
“/app/static/img/particle.png”），
混合：3.可加性贷款，
透明：正确
});
对于（var p=0；p

---

}所以我想答案是显而易见的

当我试图渲染背景时，我不想用动画使事情复杂化——我没有重新渲染我的场景

在动画（或更新）循环中渲染，允许在实际渲染图像之前完全加载图像

我添加了

animate（）init（）

之后添加code>，并用以下内容填充

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

为了完整性-我正在使用此动画帧：

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

当你知道的时候很容易！感谢所有考虑过我的问题的人