Question

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

我在VM（VirtualBox，Win10基础）上使用Ubuntu并通过Python3和Flask运行本地主机服务器。我也尝试取出所有框架内容并使用Python SimpleHTTPServer进行测试。通过Chrome标记＆＃39;覆盖软件渲染列表＆＃39;来启用3D加速。所有的例子都在起作用。

我已经开始试图让天空盒工作了，我正在按照Aerotwist的教程https://aerotwist.com/tutorials/creating-particles-with-three-js/来渲染粒子 - 但是当我尝试应用图像时，我得到了完全相同的问题。我的天空盒子。该教程很适合应用图像。

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

在单步执行时观看文件加载，它似乎是在完成渲染（renderer.render(scene, camera)）后加载图像（状态200） - 但我可能错了。开发工具中没有显示错误。

我的印象是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

所以我猜答案很明显！

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

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

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

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

当你知道时很容易！感谢任何提出我问题的人。

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

1 个答案: