javascript - 为什么我的 Three.js 对象是同时显示而不是单独显示？

Question

我有两个 3d 模型，我正在尝试在它们之间切换。目前，我可以在第一页加载后单击按钮来显示两个 3D 对象中的任何一个，但是当我尝试在它们之间切换时，它们总是同时加载这两个对象。

如何解决这个问题？

$(".choice:not(a)").click(function(){


    // get the id of chosen item


    let id = $(".chosen").attr("id");
    id = id.match(/\d+$/)[0];

    let item;

        // change variables for id

        if(id == 1){

            item = 'first.mtl';
            objects = 'first.obj';

        }else if(id == 2){

            item = 'second.mtl';
            objects = 'second.obj';

        }

        // Problem is here they keep loading at the same time.


            new THREE.MTLLoader()
            .setPath( 'models/obj/' )
            .load( gun, function ( materials ) {
                materials.preload();
                new THREE.OBJLoader()
                    .setMaterials( materials )
                    .setPath( 'models/obj/' )
                    .load( objects, function ( object ) {
                        object.position.y = 0;
                        scene.add( object );

                            object.visible = botonsON;


                    }, onProgress, onError );

            } );


   });

Answer 1

您的代码正在按预期工作。对象的所有可见性属性共享相同的 bool botonsON。如果这是真的，那么您只是将它们全部显示出来。每次用户切换时您都会加载模型，这是毫无意义的。我建议您加载对象一次，将它们添加到场景中并保存到一些变量中。使其中一个在开始时不可见。每当用户点击时，只需执行

object1.visible != object1.visible
object2.visible != object2.visible