three.js - 在 three.js 中使用 PointsMaterial 加载图像

Question

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

我在虚拟机(VirtualBox、Win10 基础)上使用 Ubuntu，并通过 Python3 和 Flask 运行本地主机服务器。我还尝试取出所有框架内容并使用 Python 的 SimpleHTTPServer 进行测试。 3D 加速是通过 Chrome 标记“覆盖软件渲染列表”启用的，所有示例都在运行。

从绑定(bind)到让天空盒工作之后，我正在学习 Aerotwist 上的教程，https://aerotwist.com/tutorials/creating-particles-with-three-js/ , 渲染粒子 - 但是当尝试应用图像时，我遇到了与我的天空盒完全相同的问题。该教程很好地应用了图像。

我所看到的只是一个空白屏幕(我的容器中有黑色背景)。

单步执行时观察文件加载，它似乎在完成渲染后加载图像(状态 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);
}

Answer 1

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

当我尝试渲染背景时，我不想让动画复杂化——我没有重新渲染我的场景。

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

我在init()之后添加了animate();，并填充了以下内容

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

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