0
スプライン観測用のコードを作成しようとしています。問題は、スプラインを選択できるようにメニューを作成しましたが、次のスプラインを選択すると、私がシーンから削除しようとしたにもかかわらず、描画されていない前に描画されます。既に描画されているオブジェクトを削除するTHREE
<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;
\t \t
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)
]);
\t \t
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';
\t \t
var splines ={
sampleSpline: sampleSpline,
sampleSpline2: sampleSpline2
};
\t \t
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(){
\t \t
var value = document.getElementById('dropdown').value;
var selectspline = splines[value];
\t \t
if(line)
{
scene.remove(line);
}
\t \t
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]);
}
\t
var line = new THREE.Line(geometry, material);
scene.add(line);
\t \t
}
\t \t
init();
animate();
\t \t
function init()
{
container = document.createElement('div');
document.body.appendChild(container);
\t \t
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);
\t \t
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
\t
camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,10000);
camera.position.z= 700;
\t \t
cameraControls = new THREE.TrackballControls(camera,renderer.domElement)
\t \t
cameraControls.rotateSpeed = 5.0;
cameraControls.zoomSpeed = 1.0;
\t \t
cameraControls.noZoom = false;
cameraControls.noPan = true;
\t \t
cameraControls.staticMoving = true;
cameraControls.dynamicDampingFactor = 0.3;
\t \t
cameraControls.addEventListener('change',render);
\t \t
scene = new THREE.Scene(); \t
\t \t
camera.lookAt(scene.position);
\t
addSpline();
\t
renderer.setClearColor(0xdddddd, 1);
window.addEventListener('resize', onWindowResize, false);
\t \t
render();
}
\t
function onWindowResize()
{
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
cameraControls.handleResize();
render();
}
\t
\t
function animate()
{
requestAnimationFrame(animate);
cameraControls.update();
}
function render()
{
renderer.render(scene, camera);
}
\t \t
</script>
</body>
</html>
の範囲外でありますそこで3つのライブラリは定義されていませんし、コードに付けることも知らないので、問題がある場合は、どうすればいいか教えてください。できるだけ早くそれを行います。 ） –