How to let the two 3d models coincide in a same point by using Three.js?

问题

I can draw the tree1 (data is in picture one)(the red one in picture two) and draw the block branch(the block one in picture two) , but now it did not match in the blue point E(-104,334,74)(like picture two)

Please tell me how to let tree1 and block branch coincide in point E

first input point

//input point 
//It is a,b,b,c,b,d......
//start point,end point,start point,end point....
const line_point =[0, 0, 0, 2, 151, 2,
 2, 151, 2,  -62, 283, 63,
 2, 151, 2, 62, 297, -58,
 -62, 283, 63, -104, 334, 74,
 -62, 283, 63, -58, 338,  45,
 62, 297, -58,  67, 403, -55,
 62, 297, -58, 105, 365, -86];

take out star point and end point

const star_line_x= new Array();
const star_line_y= new Array();
const star_line_z= new Array();

const end_line_x= new Array();
const end_line_y= new Array();
const end_line_z= new Array();

for (var q=0; q < line_point.length; q+=6){
    star_line_x.push(line_point[q]);}
for (var r=1; r < line_point.length; r+=6){
    star_line_y.push(line_point[r]);}
for (var s=2; s < line_point.length; s+=6){
    star_line_z.push(line_point[s]);}
for (var t=3; t < line_point.length; t+=6){
    end_line_x.push(line_point[t]);}
for (var u=4; u < line_point.length; u+=6){
    end_line_y.push(line_point[u]);}
for (var v=5; v < line_point.length; v+=6){
    end_line_z.push(line_point[v]);}

var cylinder_star_point = new Array();
var cylinder_end_point = new Array();

//star_point end_point
for (var w=0; w < line_point.length/6; w++){
var star_point = new THREE.Vector3 star_line_x[w],star_line_y[w],star_line_z[w]);
var end_point = new THREE.Vector3 end_line_x[w],end_line_y[w],end_line_z[w]);
cylinder_star_point.push( star_point);
cylinder_end_point.push( end_point);}

calculation cylinder high

//calculation cylinder high
var line_len = new Array();
for (var dd=0; dd < line_point.length/6; dd++){
    var len_x = Math.pow(end_line_x[dd]-star_line_x[dd],2);
    var len_y = Math.pow(end_line_y[dd]-star_line_y[dd],2);
    var len_z = Math.pow(end_line_z[dd]-star_line_z[dd],2);
    var len_direction = Math.sqrt(len_x+len_y+len_z);
    line_len.push(len_direction);//Cylinder high
}

calculation cylinder direction vector

//cylinder direction
const cylinder_direction= new Array();
for (var cc=0; cc < cylinder_end_point.length; cc++){
    var star_direction = cylinder_star_point[cc];
    var end_direction = cylinder_end_point[cc];
    var center_direction  = end_direction.clone().sub(star_direction);
    cylinder_direction.push(center_direction);}

tree1

   for (var dd=0; dd <cylinder_direction.length;dd++){
    var material = new THREE.MeshPhongMaterial({color:'#ff0000'});
    let upVector = new THREE.Vector3(0, 1, 0);

    var geometry = new THREE.CylinderGeometry(5, 5, line_len[dd], 20, 1, false); 
    var mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(0, line_len[dd]/2, 0);

    var group = new THREE.Group();
    group.position.set(star_line_x[dd],star_line_y[dd],star_line_z[dd]);
    group.add(mesh);

    let targetVector =cylinder_direction[dd];
    let quaternion = new THREE.Quaternion().setFromUnitVectors(upVector, targetVector.normalize());
    group.setRotationFromQuaternion(quaternion);
    scene.add(group)}

the black branch

var angle = [90,-90];//random_angle 90
var random_angle = angle[Math.floor(Math.random()*angle.length)];

for (var dd=1; dd <cylinder_direction.length;dd++){ 
    var material = new THREE.MeshPhongMaterial({color:'#000000'});
    let upVector = new THREE.Vector3(0, 1, 0);
    var geometry1 = new THREE.CylinderGeometry(5, 5, line_len[dd]/2, 20, 1, false); 
    var mesh1 = new THREE.Mesh(geometry1, material);
        mesh1.position.set(0, line_len[dd]/2/2, 0);
    var group1 = new THREE.Group();
    group1.position.set(star_line_x[dd]/2,star_line_y[dd]/2,star_line_z[dd]/2);
    group1.add(mesh1);
    let targetVector1 =cylinder_direction[dd];
    let quaternion1 = new THREE.Quaternion().setFromUnitVectors(upVector, targetVector1.normalize());
    group1.setRotationFromQuaternion(quaternion1) 

    treeGroup = new THREE.Group();
    treeGroup.position.set(-104,334,74) // I think is here
    let targetVector2 =cylinder_direction[3];
    let quaternion2 = new THREE.Quaternion().setFromUnitVectors(upVector, targetVector2.normalize());
    treeGroup.setRotationFromQuaternion(quaternion2) 
    treeGroup.rotateY(90);
    treeGroup.add(group1);
    scene.add(treeGroup);

}

picture two

来源：https://stackoverflow.com/questions/62081040/how-to-let-the-two-3d-models-coincide-in-a-same-point-by-using-three-js

标签

javascript

three.js