Three.js materialLoader 不加载嵌入的纹理图像答案

【问题标题】：Three.js materialLoader doesn't load embedded texture imageThree.js materialLoader 不加载嵌入的纹理图像
【发布时间】：2018-04-20 11:33:48
【问题描述】：

我正在使用 material.toJSON() 提供的方法导出 three.js 材料，结果如下：

{
"metadata":{"version":4.5,"type":"Material","generator":"Material.toJSON"},
"uuid":"8E6F9A32-1952-4E12-A099-632637DBD732",
"type":"MeshStandardMaterial",
"color":11141120,
"roughness":1,
"metalness":0.5,
"emissive":0,
"map":"876D3309-43AD-4EEE-946F-A8AE8BA53C9E",
"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,

"textures":[
    {
        "uuid":"876D3309-43AD-4EEE-946F-A8AE8BA53C9E",
        "name":"",
        "mapping":300,
        "repeat":[1,1],
        "offset":[0,0],
        "center":[0,0],
        "rotation":0,
        "wrap":[1001,1001],
        "minFilter":1008,
        "magFilter":1006,
        "anisotropy":1,
        "flipY":true,
        "image":"C6B4FEDA-8E7E-490A-A1AD-866ECE36E952"}],

"images":[
{
    "uuid":"C6B4FEDA-8E7E-490A-A1AD-866ECE36E952",
    "url":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAEACAYAAADFkM5nAAAg[...]"
}]}

我尝试使用 MaterialLoader 作为示例建议

https://threejs.org/docs/#api/loaders/MaterialLoader

但在解析时我总是收到此错误

THREE.MaterialLoader：未定义的纹理 876D3309-43AD-4EEE-946F-A8AE8BA53C9E

如果我希望 MaterialLoader 使用嵌入式资源，那我错了吗？我做错了还是错过了什么？如何将 json 文件中的图像也加载到相关纹理中？

谢谢！

这里有一个小提琴： http://jsfiddle.net/akmcv7Lh/211/

【问题讨论】：

标签： javascript json three.js textures

【解决方案1】：

请注意MaterialLoader 无法加载纹理。它期望在加载像ObjectLoader 这样的JSON文件之前通过MaterialLoader.setTextures() 设置纹理：

const loader = new MaterialLoader();
loader.setTextures( textures );

所以MaterialLoader 只能在各自的材质没有纹理的情况下用作独立加载器。否则，您必须像 ObjectLoader 那样在应用级别准备纹理。

【讨论】：