Blender 导出到 JSON 以获取 THREE.js 缺少的材料

Posted 2023-03-23

【中文标题】Blender 导出到 JSON 以获取 THREE.js 缺少的材料

【英文标题】：Blender export to JSON for THREE.js missing Materials

【发布时间】：2018-05-19 21:54:48

【问题描述】：

早安，

我正在尝试将我在 Blender 中制作的模型导出为 JSON 格式，以便我可以在我的 THREE.js Web 应用程序中使用它。一切正常，除了它似乎没有正确导出材料。在 Blender 中，我的模型是彩色的，但是当使用 THREE.js 在网络浏览器中查看时，模型是灰色的。

以下是两个输出的样子： https://i.stack.imgur.com/4zIMG.png

这是将 JSON 文件加载到程序中的代码：

var loader = new THREE.JSONLoader();
loader.load("../tankSingleObject2.json", addModel );
function addModel(geometry, materials) 
    var mesh = new THREE.Mesh (geometry, materials);
    scene.add(mesh);
    mesh.position.z = -2;

这是 JSON 文件的样子：

"vertices":[0.202124,0.554841,0.275849,0.402124,0.554841,0.275849,0.202124,0.554841,0.0758486,0.402124,0.554841,0.0758486,-0.404745,0.554792,0.279759,-0.204745,0.554792,0.279759,-0.404745,0.554792,0.0797591,-0.204745,0.554792,0.0797591,-0.61,0.0287037,0.321036,-0.61,0.528704,0.321036,-0.61,0.0287037,0.0030361,-0.61,0.528704,0.00303607,0.61,0.0287037,0.321036,0.61,0.528704,0.321036,0.61,0.0287037,0.0030361,0.61,0.528704,0.00303607,-0.594359,0.529223,0.305839,-0.594359,0.529223,0.0182327,0.594359,0.529223,0.0182327,0.594359,0.529223,0.305839,-0.594359,0.0387877,0.30584,-0.594359,0.0387877,0.0182327,0.594359,0.0387877,0.0182327,0.594359,0.0387877,0.30584,0,0.118215,0.0370853,0,0.318215,0.137085,0.019509,0.118215,0.0390067,0.0382684,0.118215,0.0446973,0.055557,0.118215,0.0539383,0.0707107,0.118215,0.0663746,0.083147,0.118215,0.0815282,0.0923879,0.118215,0.0988169,0.0980785,0.118215,0.117576,0.1,0.118215,0.137085,0.0980785,0.118215,0.156594,0.092388,0.118215,0.175354,0.083147,0.118215,0.192642,0.0707107,0.118215,0.207796,0.055557,0.118215,0.220232,0.0382683,0.118215,0.229473,0.019509,0.118215,0.235164,-2.98023e-08,0.118215,0.237085,-0.0195091,0.118215,0.235164,-0.0382684,0.118215,0.229473,-0.0555571,0.118215,0.220232,-0.0707107,0.118215,0.207796,-0.083147,0.118215,0.192642,-0.092388,0.118215,0.175354,-0.0980785,0.118215,0.156594,-0.1,0.118215,0.137085,-0.0980785,0.118215,0.117576,-0.0923879,0.118215,0.0988168,-0.0831469,0.118215,0.0815281,-0.0707106,0.118215,0.0663745,-0.0555569,0.118215,0.0539382,-0.0382682,0.118215,0.0446972,-0.0195089,0.118215,0.0390067,0.612,0.5154,-8.9407e-08,-0.612,0.5154,2.98023e-08,0.612,0.5514,-8.9407e-08,-0.612,0.5514,2.98023e-08,0.612,0.515076,0.327056,-0.612,0.515076,0.327056,0.612,0.551076,0.327056,-0.612,0.551076,0.327056,0.612,0,-5.96046e-08,-0.612,0,5.96046e-08,0.612,0.036,-5.96046e-08,-0.612,0.036,5.96046e-08,0.612,-0.000323951,0.327056,-0.612,-0.000323951,0.327056,0.612,0.035676,0.327056,-0.612,0.035676,0.327056],
"faces":[3,0,1,3,2,0,3,4,5,7,6,0,3,8,9,11,10,1,3,10,11,15,14,1,3,14,15,13,12,1,3,12,13,9,8,1,3,10,14,12,8,1,3,13,15,18,19,1,3,19,18,22,23,1,3,11,9,16,17,1,3,9,13,19,16,1,3,15,11,17,18,1,3,22,21,20,23,1,3,17,16,20,21,1,3,16,19,23,20,1,3,18,17,21,22,1,2,24,25,26,2,2,26,25,27,2,2,27,25,28,2,2,28,25,29,2,2,29,25,30,2,2,30,25,31,2,2,31,25,32,2,2,32,25,33,2,2,33,25,34,2,2,34,25,35,2,2,35,25,36,2,2,36,25,37,2,2,37,25,38,2,2,38,25,39,2,2,39,25,40,2,2,40,25,41,2,2,41,25,42,2,2,42,25,43,2,2,43,25,44,2,2,44,25,45,2,2,45,25,46,2,2,46,25,47,2,2,47,25,48,2,2,48,25,49,2,2,49,25,50,2,2,50,25,51,2,2,51,25,52,2,2,52,25,53,2,2,53,25,54,2,2,54,25,55,2,2,55,25,56,2,2,56,25,24,2,2,56,24,26,2,2,26,27,28,2,2,28,29,30,2,2,30,31,32,2,2,32,33,34,2,2,34,35,36,2,2,36,37,38,2,2,38,39,40,2,2,40,41,42,2,2,42,43,44,2,2,44,45,46,2,2,46,47,48,2,2,48,49,50,2,2,50,51,52,2,2,52,53,54,2,2,54,55,56,2,2,56,26,28,2,2,28,30,32,2,2,32,34,36,2,2,36,38,40,2,2,40,42,44,2,2,44,46,48,2,2,48,50,52,2,2,52,54,56,2,2,56,28,32,2,2,32,36,40,2,2,40,44,48,2,2,48,52,56,2,2,56,32,40,2,2,40,48,56,2,3,57,58,60,59,3,3,61,62,64,63,3,3,57,59,63,61,3,3,60,58,62,64,3,3,65,66,68,67,3,3,69,70,72,71,3,3,65,67,71,69,3,3,68,66,70,72,3],
"metadata":
    "generator":"io_three",
    "version":3,
    "type":"Geometry",
    "materials":4,
    "faces":86,
    "vertices":73
,
"materials":[
    "depthTest":true,
    "DbgIndex":0,
    "wireframe":false,
    "opacity":1,
    "blending":1,
    "shading":"phong",
    "doubleSided":false,
    "DbgName":"Material.007",
    "specularCoef":50,
    "colorEmissive":[0,0,0],
    "depthWrite":true,
    "transparent":false,
    "colorSpecular":[0.5,0.5,0.5],
    "DbgColor":15658734,
    "colorDiffuse":[0.64,0.64,0.64],
    "visible":true
,
    "depthTest":true,
    "DbgIndex":1,
    "wireframe":false,
    "opacity":1,
    "blending":1,
    "shading":"phong",
    "doubleSided":false,
    "DbgName":"Material.006",
    "specularCoef":50,
    "colorEmissive":[0,0,0],
    "depthWrite":true,
    "transparent":false,
    "colorSpecular":[0.5,0.5,0.5],
    "DbgColor":15597568,
    "colorDiffuse":[0.64,0.64,0.64],
    "visible":true
,
    "depthTest":true,
    "DbgIndex":2,
    "wireframe":false,
    "opacity":1,
    "blending":1,
    "shading":"phong",
    "doubleSided":false,
    "DbgName":"Material.005",
    "specularCoef":50,
    "colorEmissive":[0,0,0],
    "depthWrite":true,
    "transparent":false,
    "colorSpecular":[0.5,0.5,0.5],
    "DbgColor":60928,
    "colorDiffuse":[0.64,0.64,0.64],
    "visible":true
,
    "depthTest":true,
    "DbgIndex":3,
    "wireframe":false,
    "opacity":1,
    "blending":1,
    "shading":"phong",
    "doubleSided":false,
    "DbgName":"Material",
    "specularCoef":50,
    "colorEmissive":[0,0,0],
    "depthWrite":true,
    "transparent":false,
    "colorSpecular":[0.5,0.5,0.5],
    "DbgColor":238,
    "colorDiffuse":[0.64,0.64,0.64],
    "visible":true
]

Blender 文件可以在这里查看：https://www.dropbox.com/s/q9u7kr6rqqciknh/tankSingleObject1.blend?dl=0

提前感谢您的帮助！

【问题讨论】：

你能把.blend 文件贴在某个地方吗？

据我所知，*** 不允许我将 .blend 文件嵌入此处。

正确，它没有。但我认为如果没有那个抱歉，我们将无能为力。可以使用 Google Drive、Dropbox 或类似服务。

我已更新问题以包含指向 Dropbox 文件的链接。

好吧，我没有一个好的答案，但我怀疑 three.js 导出器在使用 BSDF 材料时遇到了问题……可能想在 three.js GitHub 存储库上提交一个错误。另外，你在用latest version of the three.js blender exporter吗？

【参考方案1】：

幸运的是，在搞砸之后，我能够找到解决方案。对于处于同一条船上的其他人，请从 Cycles 切换到 Blender Renderer。