如何在 Three.JS 中将一个 OBJ 对象换成另一个？答案

【问题标题】：How do I swap an OBJ object for another in Three.JS?如何在 Three.JS 中将一个 OBJ 对象换成另一个？
【发布时间】：2016-08-03 16:32:06
【问题描述】：

我正在使用 ThreeJS 将 OBJ 加载到网页中，我已经成功完成，但现在我想在我的页面上添加按钮，将显示的 OBJ 文件换成不同的。我尝试在加载对象时为其命名：

object.name = "selectedObject";

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

scene.remove(selectedObject);

并附加新对象：

scene.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 );

感谢任何帮助，谢谢！

【问题讨论】：

标签： javascript jquery three.js loader .obj

【解决方案1】：

嗯，有很多方法可以解决这个问题。归结为您的代码需要考虑已加载的内容。你可以遍历一个场景，但是你自己捕获并列出你的 obj 文件到特定的列表中要干净得多，尤其是在以后实现像光线投射这样的东西时。

如果我计划将来支持其他网格类型并想要一个单一的接口，我会编写一些函数，甚至可能是一个类。重要的是，您不会将网格名称作为参数传递给 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 中的每个对象。

【讨论】：