移除已经绘制的物体3

Removing already drawn object THREE

本文关键字：绘制      更新时间：2023-09-26

我正在尝试为样条观察编写代码。我的问题是，我已经创建了一个菜单，所以我可以在样条之间进行选择，但是当我选择下一个时，即使我试图从场景中删除，之前绘制的样条也不会消失。

<html>
  <head>
    <title> Brincando </title>
      <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
      </style>
  </head>
  <body>
    <script src="js/three.js"></script>
    <script src="js/TrackballControls.js"></script>
    <script>
      var camera, cameraControls,scene,renderer,dropdown,container,info;
      var numPoints = 100;
		
      sampleSpline = new THREE.CatmullRomCurve3([
        new THREE.Vector3(0, 0, 0),
        new THREE.Vector3(0, 200, 0),
        new THREE.Vector3(150, 150, 0),
        new THREE.Vector3(150, 50, 0),
        new THREE.Vector3(250, 100, 0),
        new THREE.Vector3(250, 300, 0)
      ]);
		
      sampleSpline2 = new THREE.CatmullRomCurve3([
        new THREE.Vector3(0, 0, 0),
        new THREE.Vector3(0, -200, 0),
        new THREE.Vector3(-150, -150, 0),
        new THREE.Vector3(-150, -50, 0),
        new THREE.Vector3(-250, -100, 0),
        new THREE.Vector3(-250, -300, 0)
      ]);
      sampleSpline.type='catmullrom';
      sampleSpline2.type='catmullrom';
		
      var splines ={
        sampleSpline: sampleSpline,
        sampleSpline2: sampleSpline2
      };
		
      var dropdown = '<select id="dropdown" onchange="addSpline(this.value)">';
      var s;
      for ( s in splines ) {
        dropdown += '<option value="' + s + '"';
        dropdown += '>' + s + '</option>';
      }
      dropdown += '</select>';
      function addSpline(){
		
        var value = document.getElementById('dropdown').value;
        var selectspline = splines[value];
		
        if(line)
        {
          scene.remove(line);
        }
		
        var material = new THREE.LineBasicMaterial({
          color: 0xff00f0,
        });
        var geometry = new THREE.Geometry();
        var splinePoints = selectspline.getPoints(numPoints);
        for(var i = 0; i < splinePoints.length; i++)
        {
          geometry.vertices.push(splinePoints[i]);  
        }
	
        var line = new THREE.Line(geometry, material);
        scene.add(line);
		
      }
		
      init();
      animate();
		
      function init()
      {
        container = document.createElement('div');
        document.body.appendChild(container);
		
        info = document.createElement('div');
        info.style.position = 'absolute';
        info.style.top = '10px';
        info.style.width = '100%';
        info.style.textAlign = 'center';
        info.innerHTML = dropdown;
        container.appendChild(info);
		
        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth,window.innerHeight);
        document.body.appendChild( renderer.domElement );
	
        camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,10000);
        camera.position.z= 700;
		
        cameraControls = new THREE.TrackballControls(camera,renderer.domElement)
		
        cameraControls.rotateSpeed = 5.0;
        cameraControls.zoomSpeed = 1.0;
		
        cameraControls.noZoom = false;
        cameraControls.noPan = true;
		
        cameraControls.staticMoving = true;
        cameraControls.dynamicDampingFactor = 0.3;
		
        cameraControls.addEventListener('change',render);
		
        scene = new THREE.Scene();	
		
        camera.lookAt(scene.position);
	
        addSpline();
	
        renderer.setClearColor(0xdddddd, 1);
        window.addEventListener( 'resize', onWindowResize, false );
		
        render();
      }
	
      function onWindowResize() 
      {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth, window.innerHeight );
        cameraControls.handleResize();
        render();
      }
	
	
      function animate() 
      {
        requestAnimationFrame( animate );
        cameraControls.update();
      }
      function render()
      {
        renderer.render( scene, camera );
      }
		
    </script>
  </body>
</html>

您的line变量是addSpline函数的本地变量，

的代码
if(line)
{
   scene.remove(line);
}

将始终将line视为未定义，将line变量声明移动到其他全局变量

var camera, cameraControls, scene, renderer, dropdown, container,info, line;

并从函数

中删除var声明

var line = new THREE.Line(geometry, material);

您还应该处理材料，不要过度使用全局变量等，但这超出了这个问题的范围

相关文章：