Three.js加载多个分离的对象/ JSONLoader

时间：2021-11-19 05:35:25

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

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

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

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

Thank you in advance!

先谢谢你!

Denv

edit+++

Thank you for your answer!

谢谢您的回答!

So if I load two cubes in one JSON file:

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

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;

Doesn't seems to work.

似乎没有用。

Thank you!

2 个解决方案

#1

7  

Yes, it is possible to load an entire scene from a json file exported from Blender!

I achieved that with the following process: (Using three.js r80)

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

  1. First you have to name your different objects in Blender like in the following image Outliner.

    2. 首先,您必须在Blender中为您的不同对象命名,如下图中的大纲视图。

  2. Then you can export the file using Three.js json exporter add-on for Blender, but taking care of marking the Scene checkbox like in the following:

    3. 然后你可以使用Three.js json exporter add-on为Blender导出文件,但是要注意标记Scene复选框,如下所示:

Three.js加载多个分离的对象/ JSONLoader

  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. 使用此选项,您的json文件现在包含Blender的Outliner中的所有网格,因为您可以使用任何文本编辑器进行验证。是否选择了网格无关紧要。

  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:

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

    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

#2

-1  

Each object loaded has an associated .id. So you can use the Object3D.getObjectById() to find it and apply transforms on it.

加载的每个对象都有一个关联的.id。因此,您可以使用Object3D.getObjectById()来查找它并对其应用变换。

#1

7  

Yes, it is possible to load an entire scene from a json file exported from Blender!

I achieved that with the following process: (Using three.js r80)

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

  1. First you have to name your different objects in Blender like in the following image Outliner.

    2. 首先,您必须在Blender中为您的不同对象命名,如下图中的大纲视图。

  2. Then you can export the file using Three.js json exporter add-on for Blender, but taking care of marking the Scene checkbox like in the following:

    3. 然后你可以使用Three.js json exporter add-on为Blender导出文件,但是要注意标记Scene复选框,如下所示:

Three.js加载多个分离的对象/ JSONLoader

  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. 使用此选项,您的json文件现在包含Blender的Outliner中的所有网格,因为您可以使用任何文本编辑器进行验证。是否选择了网格无关紧要。

  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:

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

    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

#2

-1  

Each object loaded has an associated .id. So you can use the Object3D.getObjectById() to find it and apply transforms on it.

加载的每个对象都有一个关联的.id。因此,您可以使用Object3D.getObjectById()来查找它并对其应用变换。

标签：

相关文章