Three.JS - 如何从数据 URL 加载材质纹理？

Question

我使用了三个.js，我将一个网格 (.obj)、一个材质 (.mtl) 和几个纹理放在一个 JSON 对象中。

网格和材质来自 Blender 的波前 obj 导出。

JSON（截断）：

{
    "data": {
        "type": "b64obj",
        "material": "--Long base64-encoded Material data--",
        "mesh": "--Long base64-encoded Mesh data--",
        "textures": {
            "texture.jpg": "base64-encoded image",
            "anothertexture.jpg": "base64-encoded image",
        }
    }
}

这是加载它的例程（没有 base64 解码部分）：

var mtlLoader = new THREE.MTLLoader();
var materials = mtlLoader.parse(data.material);
materials.preload();

var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
var object = objLoader.parse(data.mesh);
renderObj(object); //start using it inside the application once it is there

.mtl 指的是图像文件，MTLLoader 会期望它们在硬盘上。我如何告诉使用内部带有纹理的对象？

Answer 1

振作起来，这会变得很糟糕。您需要对 MTLLoader 进行monkeypatch 并拦截对这些 URL 的请求，将它们替换为您的数据 URI。

var json = JSON.parse(myJSON);

var _loadTexture = THREE.MTLLoader.MaterialCreator.prototype.loadTexture;

THREE.MTLLoader.MaterialCreator.prototype.loadTexture = function ( url, mapping, onLoad, onProgress, onError ) {

  url = json.data.textures[ url ] || url;
  return _loadTexture( url, mapping, onLoad, onProgress, onError );

};

我有 proposed a less hacky way of doing this——我用它来支持拖放——但我不确定它是否足够普遍以得到官方支持。