如何使用 Three.js 将多个 3D 对象链接到列表按钮？

Question

我对 Three.js 感到困惑，因为我从上周才开始使用它。 我的流程似乎没有错，但错误：Three.js:5630 THREE.Object3D.add: object not an instance of THREE.Object3D。 models/wolf.obj 仍然出现。 我的想法是每个被推入屏幕的 wolf 对象，都会生成一个 wolf 按钮来与之链接。各位大神能不能给点解决办法。关于我的问题？太感谢了！！ 我的代码如下：

<script>

        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);


window.addEventListener('resize',function(){
    var width = (window.innerWidth);
    var height = window.innerHeight;
    renderer.setSize(width,height);
    camera.aspect = width/height;
    camera.updateProjectionMatrix();
})
controls  = new THREE.OrbitControls(camera,renderer.domElement);

var index = 0;
var files = ['models/deer.obj','models/wolf.obj'];

var objLoader = new THREE.OBJLoader();

function loadNextFile() {
var name='';
  if (index > files.length - 1) return;

  objLoader.load(files[index], function(object) {

    // scene.add(object);
    console.log(index);
    var menuItems = document.createElement('button');
            console.log(files[index]);
            name = name + files[index];
            menuItems.name = name;
            menuItems.innerHTML = name;
            menuItems.addEventListener('click', onClick);
            rightMenu.appendChild(menuItems);
    index++;
    loadNextFile();

  });

}

loadNextFile();
</script>

function onClick(event){
    var name = event.target.name.trim();
    alert(event.target.name.trim());
     // console.log(event.target.name);
    files.forEach(function(obj){
        console.log("name= "+event.target.name);
        console.log("obj= "+obj);

        if (obj = name) scene.add(obj);
        else scene.remove(obj);
    });
}

Answer 1

您不会在任何地方存储回调到objLoader 的结果。 files 是一个字符串数组，而不是你加载的东西的数组。

我可能会做点别的。例如

const files = ['models/deer.obj','models/wolf.obj'];
const loadedObjects = [];

const objLoader = new THREE.OBJLoader();

function loadNextFile() {
  if (files.length === 0) {
    return;
  }
  const filename = files.shift();
  objLoader.load(filename, function(object) {
    loadedObjects.push(object);
    const menuItems = document.createElement('button');
    menuItems.textContent = filename;
    menuItems.addEventListener('click', makeOnClick(object));
    rightMenu.appendChild(menuItems);
    loadNextFile();
  });
}

loadNextFile();

function makeOnClick(object) {
  return function(event) {
    for (const obj of loadedFiles) {
        if (object === obj) {
            scene.add(obj);
        } else {
            scene.remove(obj);
        }
    }
  };
}