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

Question

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

这是一个分形树的 jsfiddle，树枝“笔直向上”生长。 https://jsfiddle.net/degraeve/xa8m5Lcj/59/

这是我试图用分支角度实现的 2D 图像：https://i.imgur.com/uVK4Dx6.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/