Question

我正在使用three.js，我将网格（.obj），材质（.mtl）和几个纹理放在一个JSON对象中。

网格和材质来自Blender的wavefront obj export。

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

支持自己，这会变得很丑陋。您需要monkeypatch MTLLoader并拦截对这些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 - 我用它来支持拖放 - 但我不确定它是否足以被官方支持。

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

1 个答案: