Three.js 如何相对于向量旋转笛卡尔坐标？

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

这是一棵分形树的中间部分，树枝“笔直地”向上生长。

以下是我试图通过分支角度实现的2D图像：

出现在JSFIDLE中的代码：

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

函数绘制树分支（x，y，z，φ，θ，半径）{
//使用特殊坐标系
// https://en.wikipedia.org/wiki/Spherical_coordinate_system
var phi_（单位：度）=phi*（180/数学π）；
var材料=新的三线基本材料({
颜色：0x00ffff，
线宽：1
});
//以120度角绘制3条线
分支之间的var角度=120；
var num_分支=360/分支之间的角度_；
对于（var temp_count=1；temp_count你非常接近。唯一的问题是，
theta
在每次迭代中都是相同的，所以你总是会得到一个与垂直方向成30º的分支。解决这个问题的一个简单方法是跟踪你所处的迭代，并将其乘以
tree_theta
，这样你就得到了越来越多的degrees:30、60、90、120等

函数绘制树分支（x，y，z，φ，树θ，半径，迭代）{
varθ=树θ*迭代；
//…执行所有计算
//使用迭代+1绘制下一个分支
如果（半径>2）{
绘制树分支（x2，y2，z2，phi，树θ，半径*0.5，迭代+1）；
}
}

这里是您的JSFIDLE的更新版本：
您非常接近。唯一的问题是，
θ
在每次迭代中都是相同的，所以您总是会得到一个与垂直方向成30º的分支。解决这个问题的一个简单方法是跟踪您所处的迭代，并将其乘以
树θ
，从而得到增量唱度数：30、60、90、120等

函数绘制树分支（x，y，z，φ，树θ，半径，迭代）{
varθ=树θ*迭代；
//…执行所有计算
//使用迭代+1绘制下一个分支
如果（半径>2）{
绘制树分支（x2，y2，z2，phi，树θ，半径*0.5，迭代+1）；
}
}

这里是JSFIDLE的更新版本：
这就是诀窍-θ需要保持不变，子分支将以θ相对于父分支的角度绘制。我需要获得父分支的方向，并通过父分支的向量旋转所有子分支。我只是不知道three.js（或三维坐标术语）很好，知道要使用哪些函数。这就是诀窍-θ需要保持不变，子分支要以θ相对于父分支的角度绘制。我需要得到父分支的方向，并通过父分支的向量旋转所有子分支。我只是不知道three.js（或三维坐标术语）足以知道要使用哪些函数。