Matheus Sousa Matheus Sousa - 5 months ago 32
CSS Question

Removing already drawn object THREE

I´m trying to make a code for spline observation.My problem is, I've created a menu so I can choose between splines, however when I select the next one, the spline that has been drawn before doesn´t disappears even though I tried to remove from the scene.



<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>




Answer

your line variable is local for the addSpline function,

the code

if(line)
{
   scene.remove(line);
}

will always see line as undefined, move the line variable declaration to other global variables

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

and remove the var declaration from inside the function

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

you should also dispose of the material, not overuse global variables etc but that is out of scope of this question