Возможно ли построить THREE.Texture из массива байтов, а не путь к файлу?

Question

У меня есть серверная клиентская система, где сервер анализирует файл модели и отправляет данные вершин клиенту с помощью сокета. Моя проблема возникает, когда модель содержит текстуру. Я могу прочитать текстуру (файл png) в массив байтов и отправить ее клиенту с помощью сокета. Но я не знаю, как мне создать THREE.Texture из массива байтов.

Итак, вот мой вопрос: возможно ли построить массив байтов THREE.Texture? Как я могу это достичь?

Кроме того, вы можете предложить другой лучший подход для отправки текстуры с сервера на клиент.

Спасибо.

Answer 1

Если у вас уже есть ByteArray от WebSocket есть более elegant- решение этой помощи Blobs:

// 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; 
}; 

теперь у вас есть правильный URL (что-то вроде blob:http://example.com/$uuid), который можно использовать везде, где вы хотите. Главным преимуществом этого является то, что вы сохраняете время, необходимое для преобразования данных в base64, и это не приводит к сбою devtools, когда они пытаются показать вам длину в сотни килобайт строки base64-url.

Но есть еще один вариант (к сожалению, пока не очень широко поддерживается): 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; 
}); 

Answer 2

Хорошо, после некоторых исследований в Интернете я нашел способ сделать это. Мне нужно создать данные 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'); 
      } 
     ); 

Answer 3

вы должны выполнить несколько шагов:

конвертировать байты в base64: Jou можно использовать библиотеку как https://github.com/beatgammit/base64-js

создать изображение с base64 DATAS:

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

Если у вас возникли проблемы, вы можете проверить преобразование из ByteArray в base64 с онлайн-просмотра base64, как это: http://codebeautify.org/base64-to-image-converter