如何让模型和随机旋转90度角？

Question

我可以用圆柱体画树（数据在图一）（结果在图一），但是现在 不知道怎么让树模型随机旋转90度角

第一个输入点

//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];

取出起点和终点

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
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

}

计算中心点

//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);
}

计算圆柱方向向量

//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);
}

绘制圆柱体

   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)
} 

图二

Answer 1

您可以设置每个圆柱网格的 rotation.z，也可以使用名为 .lookAt( 的辅助函数来使对象“指向”空间中的某个位置。

确保先将对象添加到场景中，然后再使用 .lookAt()。

这是另一种通过递归和对象层次结构创建树结构的方法：

https://three-tree-toy.glitch.me/