I am facing a challenge with loading two models into a scene using OBJloader and the Three.JS library. Some of the models are billboarded by using
model.setRotationFromQuaternion( camera.quaternion );My main objective is to create lines connecting a vertex on a billboard to a vertex on the corresponding model. These lines should be drawn between the closest points on the two models when the scene is initially loaded. Since the models rotate freely, the lines will need to adjust accordingly as the models rotate, maintaining the connection between the original vertices.
Imagine the billboard as a label and the line as a link between the label and a spot on the rotating model.
How can I accomplish this?
Below is a portion of my code - the issue I am encountering is that all the models have a position of 0,0,0, so I am unsure how to determine the location of a vertex on both the label and the model and then connect them.
addLabelLines(){
var geometry = new THREE.Geometry();
for ( var i = 0; i < this.labels.length; i ++ ) {
var currentLabel = this.labels[i];
var modelMatchingLabel;
//find matching model
for(var j = 0; j < this.models.length; j++){
if(currentLabel.name.toLowerCase().indexOf(this.models[j].name) >= 0){
modelMatchingLabel = this.models[j];
}
}
if(!modelMatchingLabel){
console.warn("no model matching label "+currentLabel.name);
return;
}
else{
console.log('found model '+modelMatchingLabel.name +" matches label "+currentLabel.name);
geometry.vertices.push( currentLabel.position );
geometry.vertices.push( modelMatchingLabel.position );
}
}
var material = new THREE.LineBasicMaterial( { color: 0x800080 } );
line = new THREE.Line( geometry, material, THREE.LineSegments );
scene.add( line );
}