three.jsでPointsMaterialを使用してイメージをロード

Question

私はthree.js（r75）を学習しており、イメージをロードしてシェーダまたはパーティクルとして使用しようとしています。画像はレンダリング後に読み込まれているように見えます。

私はVM（VirtualBox、Win10ベース）でUbuntuを使用しており、Python3とFlaskでローカルホストサーバーを実行しています。私はまた、すべてのフレームワークを取り除き、PythonのSimpleHTTPServerを使ってテストしました。 Chromeのフラグ 'Override software rendering list'を使用して3Dアクセラレーションが有効になり、すべてのサンプルが機能しています。

スカイボックスを手に入れようと動いてから、Aerotwistのチュートリアル（https://aerotwist.com/tutorials/creating-particles-with-three-js/）を使ってパーティクルをレンダリングしていますが、イメージを適用しようとすると、私のスカイボックスとまったく同じ問題が発生します。このチュートリアルでは、画像を適用するまでは問題ありませんでした。

私には空白の画面（私のコンテナの黒い背景）が見えます。

ステッピングスルー時にファイルを見ると、レンダリングが完了した後（画像番号：renderer.render(scene, camera)）画像がロードされているように見えますが、間違っている可能性があります。開発ツールにはエラーは表示されません。

THREE.ImageUtils.loadTexture()またはTHREE.TextureLoader.load()がデフォルトで画像の読み込みを処理するという印象を受けました。画像はMeshLambertMaterialにマップされると表示されます。

この問題を抱えているのは唯一の人物です（？！） - プリロードについてのチュートリアルや、Googleやスタックオーバーフローによるものではありません。誰かが私が間違っていることを示唆したり、 、 お願いします？

ありがとうございました！ :)

これはコードです。

; 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()後animation();を追加し、万全を期すために、以下の

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

を簡単にあなたが知っているとき！私の質問にいくつかの配慮をした人のおかげです。