javascript - threejs - 장면에서 객체 추가 및 교체

<button> 의 범위 밖에서 "현재 사각형"모양을 추적하는 것을 고려하십시오  핸들러를 클릭하여 scene 에서 이러한 모양을 추가하고 제거하는 논리를 확인하십시오.  예상대로 작동합니다.

구체적으로, 당신은 scene.remove() 를 호출 할 것입니다  나중에 scene.add() 라고하는 모양 객체로 호출하지 않고 현재 사각형 모양 (있는 경우)으로  포함 :

/* Current code */
document.getElementById("button1").addEventListener("click", function(){
  scene.remove(square); /* You're removing the square object here, */
  scene.add(square); /* and then adding the same square object to the scene */
});

다음과 같이 스크립트를 수정하는 것이 유용 할 것입니다 :

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 );
/*
Not sure where you get your loader object from
*/
var loader = ''; // ??
/* 
Add this to track current shapes
*/
var currentSquare = '';
var currentSphere = '';
/*
Define a general, reusable method for loading geometry
*/
function loadShape(filename, onLoaded) {
  loader.load( filename, function ( geometry ) {
        var foundMesh = '';
        geometry.scene.traverse( function ( node ) {
            if ( node.isMesh ){
                foundMesh = node;
                foundMesh.material.map.anisotropy = maxAnisotropy;
            }
        });
        if(foundMesh) {
            onLoaded(foundMesh)
        }
    }
}
/*
Use the general loader method defined above
*/
loadShape('square1.glb', function(nextSquare) {
    document.getElementById("button1").addEventListener("click", function(){
        /*
        If current square exists, remove it
        */
        if(currentSquare) {
            scene.remove(currentSquare);
        }
        /*
        Add the square for the button just clicked 
        and update currentSquare
        */
        scene.add(nextSquare);  
        currentSquare = nextSquare;
    });
})
loadShape('square2.glb', function(nextSquare) {
    document.getElementById("button2").addEventListener("click", function(){
        if(currentSquare) {
            scene.remove(currentSquare);
        }
        scene.add(nextSquare);  
        currentSquare = nextSquare;
    });
})
loadShape('sphere.glb', function(nextSphere) {
    document.getElementById("button3").addEventListener("click", function(){
        if(currentSphere) {
            scene.remove(currentSphere);
        }
        scene.add(nextSphere);  
        currentSphere = nextSphere;
    });
})
var animate = function () {
  requestAnimationFrame( animate );
  renderer.render( scene, camera );
};
animate();

이것이 도움이되기를 바랍니다!