は、キャンバス上の画像を描画し、まずテクスチャとして

Question

を返す、私はそれを明確に、それは私が既存のプロジェクトを撮影した

three.js &をキャンバスに来るとき、私は全くの初心者だということをしたいのですがテキストを書くのではなく、テクスチャにイメージを描画するなどのマイナーな変更を加えようとしています。私は、テクスチャに背景色を設定し、その上に透明なPNG画像を描画しようとします。

私が修正しようとしている方法は、おそらくここで説明できないほど多くのことをやっている別の関数で使うテクスチャを返します。

私はいくつかのアプローチを試みましたが、私が望む振る舞いを得ることができません。このアプローチでは

アプローチ＃1

、私は背景色を取得していますが、私は、画像をいくつか行った後

   var ts = calc_texture_size(size + size * 2 * margin) * 2; 
       canvas.width = canvas.height = ts; 
       context.fillStyle = back_color; 
       context.fillRect(0, 0, canvas.width, canvas.height); 
       var img = new Image(); 
       function drawIcon() { 
        context.drawImage(img,0,0); 
       } 
       img.onload = drawIcon(); 
       img.src = "img/test.png"; 

       var texture = new THREE.Texture(canvas); 
       texture.needsUpdate = true; 
       return texture; 

アプローチ＃2

を表示し得ていないのです私はTextureLoaderを使うはずだったようですが、キャンバス上に色や形を描く方法を理解できませんでした。この場合、画像は背景色なしで単独で表示されます。

var imgTex = new new THREE.TextureLoader().load("img/test.png",function(t){ 
        texture.map = imgTex; 
       }); 
       texture.needsUpdate = true; 
       return texture; 

どのように私は成功した色の背景の上に画像を描画し、他の関数で使用するためにテクスチャとしてそれを返すことができますか？

Answer 1

あなたの問題は、昨日回答した質問のように、JavaScriptイベントの処理に関連しています。How to make a Json model auto-rotates in the scene?あなたは "onload"を持つことはできませんし、あなたのために変数を返すことを期待してください - 変数は、コールバックが実行されるまで定義されません。代わりに、コールバックに作業を延期するか、変数が定義されるまで変数をポーリングします。

しかし、あなたの質問に、より具体的に：アプローチ＃1で

、あなたは、GPUに埋め戻さ質感を送る、それに追加のコンテンツをレンダリングしますが、後にGPUに送られたテクスチャを更新していません画像がロードされました。 texture.needsUpdate = true;をdrawIcon()に移動すると、おそらくここで解決されます。テストされていない例：

var ts = calc_texture_size(size + size * 2 * margin) * 2; 
var img = new Image(); 
var texture = new THREE.Texture(canvas); 

canvas.width = canvas.height = ts; 
context.fillStyle = back_color; 
context.fillRect(0, 0, canvas.width, canvas.height); 
img.onload = function() { 
    context.drawImage(img,0,0); 
    texture.needsUpdate = true; 
}; 
img.src = "img/test.png"; 
return texture; 

NB：それは見ていませんが、あなたは常に、drawIcon()はそのtexture変数へのアクセス権を持っている...物事をより明確にするためにJavaScriptでのスコープの開始時に、あなたのvar変数を定義する必要がありますそれはがそれの後に定義する表示されますが、それはJavaScriptがどのように動作するかではありませんので、あなたのコード例からのそれのように：。var変数は、常に彼らが定義されている範囲にグローバルで

をアプローチ＃2を使用すると、必要テクスチャにペイントする少し余分な仕事、テクスチャをキャンバスに戻して、得られたキャンバスをGPUに送信します。 ImageLoaderとのドキュメントには、TextureLoaderから取得した画像にペイントする方法がまとめられています。

var ts = calc_texture_size(size + size * 2 * margin) * 2; 
canvas.width = canvas.height = ts; 
context.fillStyle = back_color; 
context.fillRect(0, 0, canvas.width, canvas.height); 

var textureLoader = new THREE.TextureLoader().load(
    "img/test.png", 
    function(texture) { 
     var image = texture.image; 
     context.drawImage(texture.image, 0, 0 0); 
     var texture = new THREE.Texture(canvas); 
     texture.needsUpdate = true; 
     // Now do something with texture, like assigning it 
     // to your material 
    } 
); 

はNB：あなたがペイントする必要がある画像が、その後小さい場合、データのURLのを使用して忘れてはいけない二つのアプローチを組み合わせる

、それは（も全くテストされていない）、このようなものでなければなりませんこれをコードに "data：" URLとして含めることができます。これにより、サーバーに移動してイベントハンドラにロードするのを待つ必要がなくなります。例：MDN。