我有一个Canadarm2的Collada模型的动画，它根据从CSV文件读取的角度数据旋转其7段。到目前为止一切顺利。
现在，我正在尝试将标签放置在每个模型段的上方，并读出其变化的角度数据。不幸的是，下面animate（）函数中的代码将标签放置在模型位置上，而不是在子位置上。
有什么建议吗？
var lines=[];
var LT=0;
var SRc=1;
var SR=2;
var SYc=3;
var SY=4;
var SPc=5;
var SP=6;
var EPc=7;
var EP=8;
var WPc=9;
var WP=10;
var WYc=11;
var WY=12;
var WRc=13;
var WR=14;
var SRa=0;
var SPa=0;
var SYa=0;
var EPa=0;
var WPa=0;
var WYa=0;
var WRa=0;
var timer=0;
var tick=0;
var canadarm2;
readData();
function processData(allText) {
var allTextLines = allText.split(/\r\n|\n/);
var headers = allTextLines[0].split(',');
var record=1;
for (var line=1; line<allTextLines.length; line++) {
var data = allTextLines[line].split(',');
if (data.length == headers.length) {
logTime=data[LT];
if(line==1){
LOGa=data[LT];
SRa=data[SR];
SPa=data[SP];
SYa=data[SY];
EPa=data[EP];
WPa=data[WP];
WYa=data[WY];
WRa=data[WR];
}
lines.push(data);
}
}
showScene();
}
function readData(){
var fName="CSV/missionCulled.csv";
$.ajax({
type: "GET",
url: fName,
dataType: "text",
success: function(data) {
processData(data);
},
error: function() {
alert("An error occurred while processing file.");
}
});
}
function showScene(){
label1 = document.createElement('span');
label1.style.position = 'absolute';
label1.id = "label1";
label1.style.zIndex = 10;
document.body.appendChild(label1);
label2 = document.createElement('span');
label2.style.position = 'absolute';
label2.id = "label2";
label2.style.zIndex = 10;
document.body.appendChild(label2);
label3 = document.createElement('span');
label3.style.position = 'absolute';
label3.id = "label3";
label3.style.zIndex = 10;
document.body.appendChild(label3);
label4 = document.createElement('span');
label4.style.position = 'absolute';
label4.id = "label4";
label4.style.zIndex = 10;
document.body.appendChild(label4);
label5 = document.createElement('span');
label5.style.position = 'absolute';
label5.id = "label5";
label5.style.zIndex = 10;
document.body.appendChild(label5);
label6 = document.createElement('span');
label6.style.position = 'absolute';
label6.id = "label6";
label6.style.zIndex = 10;
document.body.appendChild(label6);
label7 = document.createElement('span');
label7.style.position = 'absolute';
label7.id = "label7";
label7.style.zIndex = 10;
document.body.appendChild(label7);
label8 = document.createElement('span');
label8.style.position = 'absolute';
label8.id = "label8";
label8.style.zIndex = 10;
document.body.appendChild(label8);
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats, clock, controls;
var camera, scene, renderer, mixer;
init();
animate();
function init() {
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
camera.position.set( 0, 90, 50 );
camera.lookAt( new THREE.Vector3( 0, 0, 0 ) );
scene = new THREE.Scene();
clock = new THREE.Clock();
// collada
var loader = new THREE.ColladaLoader();
loader.load( 'canadarm2_2.dae', function ( collada ) {
canadarm2 = collada.scene;
canadarm2.position.set(0, 0, 0);
scene.add( canadarm2 );
camera.lookAt(canadarm2.position);
} );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.target.set( 0, 2, 0 );
controls.update();
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
THREE.deg = function( deg ) {
return THREE.Math.degToRad( deg );
}
function animate() {
// read global vars and set collada childrens' rotations
scene.traverse(function (child) {
switch(child.name) {
case "BASE":
positionLabel("label8",child,110)
break;
case "SR":
child.rotation.x = THREE.deg(SRa);
positionLabel("label1",child,100)
break;
case "SP":
child.rotation.y = THREE.deg(SPa);
positionLabel("label2",child,90)
break;
case "SY":
child.rotation.y = THREE.deg(SYa);
positionLabel("label3",child,80)
break;
case "EP":
child.rotation.y = THREE.deg(EPa);
positionLabel("label4",child,70)
break;
case "WP":
child.rotation.x = THREE.deg(WPa);
positionLabel("label5",child,60)
break;
case "WY":
child.rotation.y = THREE.deg(WYa);
positionLabel("label6",child,50)
break;
case "WR":
child.rotation.x = THREE.deg(WRa);
positionLabel("label7",child,40)
break;
case "Canadarm2":
break;
}
});
//#######################################
//#######################################
// this seems to position the labels relative
// to the model's position
// rather than in relation to the model's
// childrens' positions
function positionLabel(label,obj,height){
var pos = getScreenTranslation(obj);
document.getElementById(label).style.left = pos.x+"px";
document.getElementById(label).style.top = pos.y-height+"px";
}
//#######################################
//#######################################
requestAnimationFrame( animate );
render();
}
function render() {
var delta = clock.getDelta();
if ( mixer !== undefined ) {
mixer.update( delta );
}
renderer.render( scene, camera );
}
function getScreenTranslation (obj) {
var vector = new THREE.Vector3();
var widthHalf = 0.5 * renderer.context.canvas.width;
var heightHalf = 0.5 * renderer.context.canvas.height;
var bbox = new THREE.BoundingBoxHelper(obj, 0xFFFFFF);
bbox.update();
bbox.updateMatrixWorld();
bbox.updateMatrix();
vector.setFromMatrixPosition(bbox.matrixWorld);
vector.project(camera);
vector.x = vector.x * widthHalf + widthHalf;
vector.y = -(vector.y * heightHalf) + heightHalf;
return {
x: vector.x,
y: vector.y
};
};
} // end scene
function nextRotation(){
displayArms(tick);
tick++;
if(tick==lines.length){
clearInterval(timer);
tick=0;
timer=0;
}
}
function displayArms(v){
//get angle data from this (v) second
//and set global vars to those values
// animate() will read global vars and set collada objects' rotations
var data=lines[v];
LOGa=data[LT];
SRa=data[SR];
SPa=data[SP];
SYa=data[SY];
EPa=data[EP];
WPa=data[WP];
WYa=data[WY];
WRa=data[WR];
label1.innerHTML = "SRa:"+SRa;
label2.innerHTML = "SPa:"+SPa;
label3.innerHTML = "SYa:"+SYa;
label4.innerHTML = "EPa:"+EPa;
label5.innerHTML = "WPa:"+WPa;
label6.innerHTML = "WYa:"+WYa;
label7.innerHTML = "WRa:"+WRa;
label8.innerHTML = LOGa;
}
function play(){
timer=setInterval(function(){ nextRotation(); }, 1000/60);
}