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

Question

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

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

提前致谢!

登维

编辑+++

谢谢您的回答!

所以如果我在一个 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 );       
});

如何移动第一个立方体？

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

似乎不起作用。

谢谢!

Answer 1

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

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

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

1. 使用此选项，您的 json 文件现在包含 Blender 大纲 View 中的所有网格，您可以使用任何文本编辑器进行验证。选择或不选择网格并不重要。

2. 重要的是要知道根(或父级)对象不再是Geometry。它现在被标记为 Object 类型。要访问子对象(Mesh 类型)，您可以在 root 对象上使用 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);
   } );
   

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