Using a cylinder to draw the tree (data shown in picture one and result in picture one) is straightforward, but incorporating a random rotation of 90 degrees into the tree model poses a challenge.
https://i.sstatic.net/Xh9X6.jpg
Initial input points
//input point
//Defined as 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];
Extracting star and end points
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();
//Connecting star and end points
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);
}
Calculating cylinder height
//Calculate cylinder height
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 height
}
Calculating center point
//Center point
const cylinder_center_point = new Array();
for (var bb=0; bb < cylinder_end_point.length; bb++){
var star_set_point = cylinder_star_point[bb];
var end_set_point = cylinder_end_point[bb];
var center_point = end_set_point.clone().add(star_set_point).divideScalar(2);
cylinder_center_point.push(center_point);
}
Calculating 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);
}
Drawing cylinders
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)
}
Picture two