Currently, I am attempting to create a code for observing splines. The issue I am encountering is related to the menu functionality - when I select a new spline option, the previously drawn spline remains visible on the screen despite my efforts to remove it from the scene.
<html>
<head>
<title> Exploring Spline Visualizations </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>