私はサーバーがモデルファイルを解析し、頂点データをソケットを使用してクライアントに送信するサーバークライアントシステムを持っています。私の問題は、モデルにテクスチャが含まれている場合に発生します。テクスチャ（pngファイル）をバイト配列に読み込み、ソケットを使用してクライアントに送信できます。しかし、私はどのようにバイト配列からTHREE.Textureを作成するのか分かりません。ファイルパスではなくバイト配列からTHREE.Textureを構築することは可能ですか？
ここで私の質問ですが、それはバイト配列からTHREE.Textureを構築することは可能ですか？どうすればそれを達成できますか？
また、サーバーからクライアントにテクスチャを送信するためのより良いアプローチを提案することもできます。
ありがとうございました。
がよりelegant-ありブロブを使用して、このためのソリューション：
// assuming `byteArray` came in from the websocket
var texture = new THREE.Texture();
var imageBlob = new Blob([byteArray.buffer], {type: "image/png"});
var url = URL.createObjectUrl(imageBlob);
var image = new Image();
image.src = url;
image.onload = function() {
texture.image = image;
texture.needsUpdate = true;
};
あなたは今、あなたが欲しいwhereeverあなたが使用することができ、適切なURL（blob:http://example.com/$uuidのようなもの）を持っています。これの大きな利点は、データをbase64に変換するのにかかる時間を節約でき、数百キロバイトの長さのbase64-URL文字列を表示しようとするときにdevtoolsをクラッシュさせないことです。
しかし、もう1つのオプション（残念ながらまだ広くはあまりサポートされていません）：createImageBitmap()です。それで、私は次のように簡単になります：
var texture = new THREE.Texture();
var imageBlob = new Blob([byteArray.buffer], {type: "image/png"});
createImageBitmap(imageBlob).then(function(imageBitmap) {
texture.image = imageBitmap;
texture.needsUpdate = true;
});
ウェブ上での調査をしたところ、私はそれを行う方法を見つけました。バイト配列からデータuriを作成してTHREE.TextureLoaderに渡す必要があります。ここではそれを行うためのコードがある -
let data_uri = "data:image/png;base64," + convert_to_base64_string(my_byte_array);
// instantiate a loader
let loader_t = new THREE.TextureLoader();
loader_t.load(
// resource URL
data_uri,
// Function when resource is loaded
function (texture) {
let plane = scene.getObjectByName("test-texture");
plane.material.map = texture;
plane.material.needsUpdate = true;
},
// Function called when download progresses
function (xhr) {
console.log((xhr.loaded/xhr.total * 100) + '% loaded');
},
// Function called when download errors
function (xhr) {
console.log('An error happened');
}
);
あなたには、いくつかの手順を実行する必要があり：
変換は、base64にバイト：JOUは、base64件のデータで画像を作成するhttps://github.com/beatgammit/base64-js
のようなライブラリを使用することができます。
var image = new Image();
image.src = "data:image/png;base64," + myBase64Datas;
イメージからテクスチャを作成します。
var texture = new THREE.Texture();
texture.image = image;
image.onload = function() {
texture.needsUpdate = true;
};
あなたが悩みを持っている場合は、このようなオンラインBASE64ビューアでbase64でのByteArrayからの変換を確認することができます：あなたはすでにのWebSocketからのByteArrayをお持ちの場合は http://codebeautify.org/base64-to-image-converter