I´m trying to make a code for splines observation,and I would like to display a message everytime my option changes.So for instance if the first spline is selected a message:'xxxxxxxx' would appear, if the second spline is selected a message: 'yyyyyyy' would appear. I´m trying to do this this at my program using the variable selectcontrolPoints,however only the first message appears, even though I change the options for second spline for instance.
<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,infopcontr,line;
var selectcontrolpoints;
var numPoints = 100;
sampleSpline = new THREE.CatmullRomCurve3([
new THREE.Vector3(-50, 50, 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, 100),
new THREE.Vector3(0, 400, 0),
new THREE.Vector3(37, 20, 0),
new THREE.Vector3(-150, -75, 0),
new THREE.Vector3(-250, -100, 0),
new THREE.Vector3(90, -75, 0)
]);
sampleSpline3 = new THREE.CatmullRomCurve3([
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(150, -300, 75),
new THREE.Vector3(-150, -300, -75),
new THREE.Vector3(-150, -50, 0),
new THREE.Vector3(-250, -100, 0),
new THREE.Vector3(100, -300, 0)
]);
var splines ={
spline1: sampleSpline,
spline2: sampleSpline2,
spline3: sampleSpline3
};
var coloroptions = {
vermelho: 0xFF0000,
verde: 0x00FF00,
azul: 0x0000FF,
rosa: 0xFF00FF,
amarelo: 0XFFFF00
};
var controlpoints = {
spline1: '<br/>Pontos de controle: (-50,50,0),(0,200,0),(150,150,0),(150,50,0),(250,100,0),(250,300,0)',
spline2: '<br/>Pontos de controle: (0,0,100),(0,400,0),(37,20,0),(-150,-75,0),(-250,-100,0),(90,-75,0)',
spline3: '<br/>Pontos de controle: (0,0,0),(150,-300,75),(-150,-300,-75),(-150,-50,0),(-250,-100,0),(100,-300,0)'
};
var dropdown = '<select id="dropdown" onchange="addSpline(this.value)">';
var s;
for ( s in splines) {
dropdown += '<option value="' + s + '"';
dropdown += '>' + s + '</option>';
}
dropdown += '</select>';
var dropdown2 = '<select id="dropdown2" onchange="addSpline(this.value)">';
var c;
for ( c in coloroptions ) {
dropdown2 += '<option value="' + c + '"';
dropdown2 += '>' + c + '</option>';
}
dropdown2 += '</select>';
function addSpline(){
var value = document.getElementById('dropdown').value;
var value2 = document.getElementById('dropdown2').value;
var selectspline = splines[value];
var selectcolor = coloroptions[value2];
selectcontrolpoints=controlpoints[value];
if(line)
{
scene.remove(line);
}
var material = new THREE.LineBasicMaterial({
color: selectcolor,
});
var geometry = new THREE.Geometry();
var splinePoints = selectspline.getPoints(numPoints);
for(var i = 0; i < splinePoints.length; i++)
{
geometry.vertices.push(splinePoints[i]);
}
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 = '20px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = 'Escolha um spline: ';
info.innerHTML += dropdown;
info.innerHTML +='<br/>Escolha uma cor : ';
info.innerHTML += dropdown2;
container.appendChild(info);
infopcontr = document.createElement('div');
infopcontr.style.position ='absolute';
infopcontr.style.top = '700px';
infopcontr.style.width='100%';
infopcontr.style.textAlign = 'center';
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 = true;
cameraControls.noPan = true;
cameraControls.staticMoving = true;
cameraControls.dynamicDampingFactor = 0.3;
cameraControls.addEventListener('change',render);
scene = new THREE.Scene();
addSpline();
infopcontr.innerHTML = selectcontrolpoints;
document.body.appendChild(infopcontr);
renderer.setClearColor(0xFFFFFF, 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>
Aucun commentaire:
Enregistrer un commentaire