>

three.js를 사용하여"제곱"과"구체"의 두 가지 모양을 사용하여 다음을 시도하고 있습니다.

각 객체에는 연관된 버튼이 있습니다. 사용자가 버튼을 클릭하면 해당 모양이 장면에 추가되지만 장면에는 한 번에 1 개의 사각형과 1 개의 구만있을 수 있습니다.

사용자가 새로운 사각형을 추가하면 이전 사각형을 대체해야합니다. 아래 코드 에서이 작업을 수행하는 데 문제가있는 것 같습니다. 현재 사각형 및 구 개체를 성공적으로 추가 할 수 있지만 다른 사각형을 추가하기 위해 클릭하면 현재 사각형이 바뀌지 않습니다.

고맙습니다, 감사합니다!

<html>
  <head>
    <title>My second three.js app</title>
    <style>
      body { margin: 0; }
      canvas { width: 100%; height: 100% }
    </style>
  </head>
  <body>
    <button id="button1">Square1</button>
    <button id="button2">Square2</button>
    <button id="button3">Sphere</button>
    <script src="js/three.js"></script>
    <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 );
  loader.load( ‘square1.glb’, function ( geometry ) {
    geometry.scene.traverse( function ( node ) {
        if ( node.isMesh ){
            square = node;
            square.material.map.anisotropy = maxAnisotropy;
        }
    document.getElementById("button1").addEventListener("click", function(){
      scene.remove(square);
      scene.add(square);
    });
  });
  loader.load( ‘square2.glb’, function ( geometry ) {
    geometry.scene.traverse( function ( node ) {
      if ( node.isMesh ){
          square = node;
          square.material.map.anisotropy = maxAnisotropy;
      }
    document.getElementById("button2").addEventListener("click", function(){
      scene.remove(square);
      scene.add(square);
    });
  });
  loader.load( ‘sphere.glb’, function ( geometry ) {
    geometry.scene.traverse( function ( node ) {
      if ( node.isMesh ){
          sphere = node;
          sphere.material.map.anisotropy = maxAnisotropy;
      }
    document.getElementById("button3").addEventListener("click", function(){
    scene.add(sphere);
    });
  });
  var animate = function () {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
  };
  animate();
</script>
  </body>
</html>


  • 답변 # 1

    <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();
    
    

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

  • 이전 php - 파일 및 폴더 이름 바꾸기 오류
  • 다음 SQL에 여러 값이있는 열에 조건부 집계를 사용하는 방법