是否可以从字节数组而不是文件路径构造 THREE.Texture？

Question

我有一个服务器客户端系统，其中服务器解析模型文件并使用套接字将顶点数据发送到客户端。当模型包含纹理时，我的问题就出现了。我可以将纹理（png 文件）读取到字节数组并使用套接字将其发送到客户端。THREE.Texture但我不知道如何从字节数组创建一个。

所以这是我的问题，是否可以THREE.Texture从字节数组构造 a ？我怎样才能实现它？

此外，您还可以建议其他更好的方法将纹理从服务器发送到客户端。

谢谢。

Answer 1

如果您已经从 websocket 获得了字节数组，则可以使用 Blob 来实现更优雅的解决方案：

// 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 所需的时间，并且当开发工具尝试向您显示 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;
});