javascript - 如何在 Three.JS 中将 OBJ 对象交换为另一个 OBJ 对象？

Question

我正在使用 ThreeJS 将 OBJ 加载到网页中，我已经成功完成了这一操作，但现在我想向我的页面添加按钮，将显示的 OBJ 文件替换为另一个文件。我尝试在加载对象时命名该对象:

object.name = "选定的对象";

这样我就可以在单击新按钮时将其从场景中删除

场景.remove(selectedObject);

并附加新对象:

场景.add(newobject);

但是我迷失了如何将其实现到通用代码中/正确的语法是什么。

这是加载模型的代码:

            var objectloading = 'obj/male02/new.obj';
var loader = new THREE.OBJLoader( manager );
            loader.load( objectloading, function ( object ) {

                object.traverse( function ( child ) {

                    if ( child instanceof THREE.Mesh ) {

                        child.material.map = texture;

                    }

                } );

                object.position.y = -30;
                scene.add( object );

            }, onProgress, onError );

感谢任何帮助，谢谢!

Answer 1

有很多方法可以解决这个问题。归根结底是您的代码需要考虑已加载的内容。您可以遍历场景，但自行捕获 obj 文件并将其列出到特定列表中要干净得多，尤其是在以后实现光线转换等功能时。

如果我计划将来支持其他网格类型并且想要一个接口(interface)，我会编写一些函数，甚至可能是一个类。重要的是，您不将网格名称作为参数传递给 scene.add 和 scene.remove，而是传递对实际对象的引用。 Three.js 这样做是为了使父对象无效并在 Three.js 库中调用对象“已删除”调度事件。

因此，出于示例目的，一种方法是将对象存储在哈希中，并使用网格的 url 作为添加和删除的参数。

var meshes = {};

addObj = function(url){
  var objectloading = url;
  var loader = new THREE.OBJLoader( manager );
  loader.load( objectloading, function ( object ) {
      object.traverse( function ( child ) {
          if ( child instanceof THREE.Mesh ) {
              child.material.map = texture;
          }
      } );
      object.position.y = -30;
      meshes[url] = object;
      scene.add(object);

  }, onProgress, onError );
}

removeObj = function(url){
  scene.remove(meshes[url]);
  delete meshes[url];
}

例如，在两个模型之间切换，

单击按钮:

removeObj('obj/male02/old.obj');
addObj('obj/male02/new.obj');

然后在另一个按钮中单击:

removeObj('obj/male02/new.obj');
addObj('obj/male02/old.obj');

虽然任何字符串都可以用于“网格”中的成员名称，但如果应用程序增长并且 url 实际上是使用 POST 请求的服务 uri，则使用 url 可能会出现问题，那么您可能需要另一层引用通常使用 UUID 赋予添加到 Three.js 的每个对象。