Question

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

由于我想从网页动态改变服装的风格，我想知道如何在场景中显示/隐藏不同的部分（例如袖子）。

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

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

Answer 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);

希望这有帮助

Answer 2

可以从Blender导出的json文件加载包含多个网格的整个场景，并单独处理它们！

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

因此，您可以使用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 );

希望这会有所帮助：）

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

2 个答案: