Как пустить модель и случайный поворот на угол 90 градусов? - PullRequest
Новая
       95

Как пустить модель и случайный поворот на угол 90 градусов?

0 голосов
/ 28 мая 2020

Я могу использовать цилиндр, чтобы нарисовать дерево (данные на первом рисунке) (результат на первом рисунке), но теперь я не знаю, как разрешить случайное вращение модели дерева на угол 90 градусов

enter image description here

первая точка ввода 

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

второй рисунок

enter image description here

1 Ответ

1 голос
/ 28 мая 2020

Вы можете установить Rotation.z каждого цилиндра me sh или использовать вспомогательную функцию .lookAt (чтобы заставить объект «указывать» на позицию в пространстве.

Make убедитесь, что объект сначала добавлен в сцену, прежде чем использовать .lookAt ().

Вот еще один способ создания древовидной структуры с помощью рекурсии и иерархии объектов:

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

...