如何相对于矢量旋转笛卡尔坐标

Question

我正在构建一个三维分形树。我需要以相对于上一代的角度绘制每一代的分支。树枝目前以相同的角度绘制，并且正在"生长"；直上"；。我知道我需要做某种轮换，但不确定是四元数，还是需要采取完全不同的方法。

这是一个分形树的小提琴，树枝长着"；直上"；。https://jsfiddle.net/degraeve/xa8m5Lcj/59/

以下是我试图通过分支角度实现的2D图像：https://i.stack.imgur.com/b8Vnx.png

出现在jsfiddle中的代码：

function draw_tree_branch(x, y, z, phi, theta, radius) {
// use sperical coordinate system
// https://en.wikipedia.org/wiki/Spherical_coordinate_system
var phi_in_degrees = phi * (180 / Math.PI);

var material = new THREE.LineBasicMaterial({
color: 0x00ffff,
linewidth: 1
});

// draw 3 lines at 120 degrees to each other
var angle_between_branches = 120;
var num_branches = 360 / angle_between_branches;
for (var temp_count = 1; temp_count <= num_branches; temp_count++) {

phi_in_degrees += angle_between_branches;
phi = (phi_in_degrees) * Math.PI / 180;
// compute Cartesian coordinates
var x2 = x + (radius * Math.sin(theta) * Math.sin(phi));
var y2 = y + (radius * Math.cos(theta));
var z2 = z + (radius * Math.sin(theta) * Math.cos(phi));

// ???????? 
// How do I rotate this line so the angles are "relative" to the parent line instead of growing "straight up?"
// Quaternion ???
// example of what I'm trying to achieve, but in 3D:
//   https://www.codheadz.com/2019/06/30/Trees-with-Turtle-in-Python/simple_tree.png
// ????????
var points = [];
var vector_1 = new THREE.Vector3(x, y, z);
points.push(vector_1);
var vector_2 = new THREE.Vector3(x2, y2, z2);
points.push(vector_2);
var geometry = new THREE.BufferGeometry().setFromPoints(points);
var line = new THREE.Line(geometry, material);
scene.add(line);

// keep drawing branches until the branch is "too short"
if (radius > 2) {
draw_tree_branch(x2, y2, z2, phi, theta, radius * 0.5);
}
}
}

我甚至可能问的问题都不对。任何指向正确方向的指针都值得赞赏。

Answer 1

你非常接近。唯一的问题是theta在每次迭代中都是相同的，所以你总是会得到一个离垂直方向30º的分支。解决这个问题的一个简单方法是跟踪你正在进行的迭代，并将其乘以tree_theta，这样你就可以得到越来越多的度数：30、60、90、120等

function draw_tree_branch(x, y, z, phi, tree_theta, radius, iteration) {
var theta = tree_theta * iteration;
// ... perform all calculations

// Draw next branch with iteration + 1
if (radius > 2) {
draw_tree_branch(x2, y2, z2, phi, tree_theta, radius * 0.5, iteration + 1);
}
}

以下是您的JSFiddle的更新版本：https://jsfiddle.net/marquizzo/r2w7oz6x/