Three.JS-如何從數據URL加載材質的紋理？

Question

我正在使用three.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進行猴子補丁並攔截那些URL的請求，然后將它們替換為Data 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 );

};

我已經提出了一種不太麻煩的方法 -我使用它來支持拖放-但不確定它是否足夠普遍以得到正式支持。