Question

我正在使用three.js尝试以下方法，其中我有2种形状：“正方形”和“球形”。

每个对象都有一个与之关联的按钮。如果用户单击一个按钮，则会将相应的形状添加到场景中，但是，在任何时候，场景中只能有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>

Answer 1

请考虑跟踪// set up some variables for elements on the page const form = document.querySelector('form'); const ul = document.querySelector('ul'); const button = document.querySelector('button'); const input = document.getElementById('item'); // Fix empty array when script runs by making a conditional statement that checks if localStorage already exists //let itemsArray = localStorage.getItem('todolist') ? JSON.parse(localStorage.getItem('todolist')) : []; let todolist; if (localStorage.getItem('todolist')) { itemsArray = JSON.parse(localStorage.getItem('todolist')); } else { itemsArray = []; } localStorage.setItem('todolist', JSON.stringify(itemsArray)); const data = JSON.parse(localStorage.getItem('todolist')); //alert(typeof(data)); // function that creates an li element, sets the text of the element to the parameter, and appends the list item to the ul. const liMaker = (text) => { const li = document.createElement('li'); li.textContent = text; ul.appendChild(li); // Create a "close" button and append it to each list item var span = document.createElement("SPAN"); var txt = document.createTextNode("️"); span.className = "close"; span.appendChild(txt); li.appendChild(span); for (i = 0; i < close.length; i++) { close[i].onclick = function() { var div = this.parentElement; div.style.display = "none"; } } } // Event listener that submits the value of the input form.addEventListener('submit', function (e) { e.preventDefault(); var id = "id:" + itemsArray.length; var title = "title:" + input.value; var done = "done:" + "false"; itemsArray.push([id, title, done]); //itemsArray.push(input.value); localStorage.setItem('todolist', JSON.stringify(itemsArray)); liMaker(input.value); input.value = ""; }); data.forEach(item => { liMaker(item); }); // clear items from todolist button.addEventListener('click', function () { localStorage.removeItem("todolist"); while (ul.firstChild) { ul.removeChild(ul.firstChild); } itemsArray = []; });单击处理程序范围之外的“当前正方形”形状，以确保用于在<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 */
});

希望这会有所帮助！

three.js：在场景中添加和替换对象

1 个答案: