three.js - jsfiddle でテクスチャをロードする方法

Question

jsfiddle で THREE.ImageUtils.loadTexture() を使用する方法。デモ [ http://jsfiddle.net/georgeneil/cfrsj/10/ ] を作成しました。ここでは、テクスチャを表示できません。ポイントを黒くレンダリングしています。

Answer 1

画像をbase64 でエンコードできます。次に、コードに文字列を追加します。

更新された jsfiddle: http://jsfiddle.net/cfrsj/11/

Answer 2

問題は、外部でホストされているテクスチャを使用できないことです。平面にテクスチャを配置するために作成したコードを次に示します。このコードは、doob 氏のプロジェクトの 1 つから採用したと思います。

img = new Image();
texture = new THREE.Texture(img); 
    img.onload = function() {
    texture.needsUpdate = true;
    makeParticle();
    };
img.src = "http://www.aerotwist.com/tutorials/creating-particles-with-three-js/images/particle.png";

geometry = new THREE.PlaneGeometry( 438, 695, 200 );
material = new THREE.MeshBasicMaterial( {map: texture} );