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

问题描述

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

这是分形树的分支，分支逐渐“笔直向上”生长。 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,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,z2,radius * 0.5);
            }
        }
    }

我什至没有问正确的问题。任何朝着正确方向的指针都值得赞赏。

解决方法

您非常亲密。唯一的问题是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,radius * 0.5,iteration + 1);
    }
}

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

rotation three.js