从 Blender 加载 Three.js 中的多个对象

Posted 2023-02-27

【中文标题】从 Blender 加载 Three.js 中的多个对象

【英文标题】：Loading multiple objects in Three.js from Blender

【发布时间】：2013-11-09 03:51:11

【问题描述】：

我有一个非常复杂的形状（穿着打扮的女孩），它在 Blender 中被分解成不同的对象，并使用 JSON 加载器加载到 Three.js 中（我做了一个小技巧，它使用压缩文件而不是 JSON 文件，因为有很多顶点）。

由于我想从网页动态更改连衣裙的样式，我想知道如何在场景中显示/隐藏不同的部分（例如袖子）。

我尝试遍历THREE.Mesh，但没有孩子。

当我使用 JSON 导出器从 Blender 导出时，我看不到任何涉及 JSON 中对象名称的内容。结构丢失了吗？

【问题讨论】：

我看到了这个问题并注意到你让 openctm 可以与 Blender 一起工作。我想知道您是否可以回答我的问题：***.com/questions/23073947/…。在我看来，openctm 脚本不适用于 Blender 2.7。

类似问题，得到一个model.js，一旦我加载它就无法分离网格......例如，我在一个文件中有5个对象但无法单独访问它们：myobject.children“item1 " 似乎无法解决

【参考方案1】：

如果您使用包含大量顶点的网格，我建议您使用 openCTM webGL 加载程序而不是 zip hacking。这是加载程序的链接：http://threejs.org/examples/webgl_loader_ctm.html 这款网格压缩工具采用 LZMA 压缩方式，可以将文件大小减少 93%...

关于 JSONLoader，使用数组可能会有所帮助：

var meshes = [];
...
var loader = new THREE.JSONLoader();
var onGeometry = function(geom)

    var mesh = new THREE.SceneUtils.createMultiMaterialObject(geom, [material]);
    meshes.push( mesh );
    ...
    scene.add(mesh);
;

loader.load("yourfile.js", onGeometry);

希望对你有帮助

【讨论】：

嘿 Qt，谢谢，但我试图了解如何从单个文件加载所有对象，就像它们在 Blender 中一样。我必须加载的对象数量将 1）在我的代码中造成混乱，2）在加载时有更大的开销。

是的，我做到了。最后我按照你的建议做了，我改变了我的工作流程以减少网格。并使用 OpenCTM。谢谢！

很高兴听到这个消息。祝你的项目好运。

我认为这并不能真正回答问题。如果yourfile.js 包含多个网格怎么办？

当加载一个包含多个网格的json文件时，这个数组肯定不起作用@r72。

【参考方案2】：

可以从 Blender 导出的 json 文件中加载具有多个网格的整个场景并分别处理它们！

您可以在我的answer of this post 上了解从 Blender 导出整个场景的完整过程以及处理导出网格的正确方法。

因此，您可以使用getObjectByName 方法获取不同的网格并分别操作它们。但重要的是要知道加载的对象不再是 Geometry。它现在被标记为 Scene 类型，必须以不同的方式处理。

加载代码必须如下所示：

    loader = new THREE.JSONLoader();
    loader.load( "obj/Books.json", function ( loadedObj ) 
        var surface = loadedObj.getObjectByName("Surface");
        var outline = loadedObj.getObjectByName("Outline");
        var mask = loadedObj.getObjectByName("Mask");
        scene.add(surface);
        scene.add(outline);
        scene.add(mask);
     );

此外，您可以使用THREE.MeshFaceMaterial 处理单个网格的多种材质，如下代码所示：

var mat1 = new THREE.MeshLambertMaterial(  map: texture1  );
var mat2 = new THREE.MeshLambertMaterial(  map: texture2  );
var materials = [mat1, mat2];
var faceMat = new THREE.MeshFaceMaterial(materials);
mesh = new THREE.Mesh( geometry, faceMat );
scene.add( mesh );

希望这会有所帮助:)