Three.js 加载多个分离的对象/JSONLoader [英] Three.js load multiple separated objects / JSONLoader

问题描述

是否可以加载从 Blender 导出的场景(例如两个不同的立方体)到 json 并识别它们?

is it possible to load a scene (e.g. two different cubes) exported from blender to json and identify them?

我需要区分它们，例如使一个旋转，另一个移动.

I need to distinguish between them e.g. to make one rotating and the other moving.

先谢谢你！

丹佛

编辑+++

感谢您的回答！

因此，如果我在一个 JSON 文件中加载两个多维数据集:

So if I load two cubes in one JSON file:

loader.load("untitled1.js", function(geometry, materials) {  
        mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial(materials));
        mesh.scale.set( 10, 10, 10 );
        mesh.position.y = 0;
        mesh.position.x = 0;
        scene.add( mesh );       
});

如何移动第一个立方体?

How can I move first cube?

mesh.getObjectById(0).position.x = 15;

似乎不起作用.

谢谢！

推荐答案

是的，可以从 Blender 导出的 json 文件中加载整个场景！

我通过以下过程实现了这一点:(使用three.js r80)

1. 首先，您必须在 Blender 中为不同的对象命名，如下图所示.
2. 然后，您可以使用适用于 Blender 的 Three.js json 导出器插件导出文件，但要注意标记 Scene 复选框，如下所示:

1. 使用此选项，您的 json 文件现在包含 Blender 的 Outliner 上的所有网格，因为您可以使用任何文本编辑器进行验证.是否选择了网格并不重要.

2. 重要的是要知道根(或父)对象不再是几何.它现在被标记为 Object 类型.要访问子对象(Mesh 类型)，您可以在 root 对象上使用 getObjectByName 方法，如下面的代码所示:

1. Using this option your json file now contains all the meshes on the Blender's Outliner, as you can verify using any text editor. It doesn't matter if the meshes were selected or not.

2. It is important to know that the root (or parent) object isn't a Geometry anymore. It is labeled with the Object type by now. To access the children objects (of Mesh type) you can use the getObjectByName method on the root object like in the following code:

jsonloader.load( "obj/Books.json", function ( loadedObj ) {
    var surface = loadedObj.getObjectByName("Surface");
    var outline = loadedObj.getObjectByName("Outline");
    var mask = loadedObj.getObjectByName("Mask");
    // Watch the objects properties on console:
    console.log(loadedObj);
    console.log(surface);
    console.log(outline);
    console.log(mask);
} );

如果我们检查浏览器的控制台，我们可以看到分配的正确对象.从现在开始，您可以独立操作子对象(移动、旋转、更改材质等)

If we check the browser's console, we can see the proper objects assigned. And from now, you can manipulate the children objects independently (move, rotate, change materials, etc.)

这篇关于Three.js 加载多个分离的对象/JSONLoader的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！