javascript - 如何在 p5.js 中考虑 dist() 的旋转？

Question

目前我正在尝试编写一个基本代码来显示 3D 空间中两个对象之间的距离。我创建了两个框，并使用 slider ，我可以更改它们的翻译。使用 dist() 函数，我可以计算它们之间的距离。这显示在 Canvas 上。然而，当一个盒子绕某一点旋转时，尽管盒子越来越靠近另一个，但距离不会改变。

我不太确定如何将 Angular 准确地纳入其中。我知道为什么 dist() 不随 Angular 改变(我在dist() 中使用的变量我用来改变框，我用于 Angular 变量未在 dist()) 中使用，但我不太确定如何考虑旋转。

function draw() {
    background(255);
    lights();
    orbitControl();

    stroke('red');
    var x1 = Box1Slider.value();
    var z2 = Box2Slider.value();
    var RotVal = RotSlider.value();

    translate(x1, y1, z1)
    box(10,10,10) //box1
    translate(-x1,-y1,-z1)

    rotateY(RotVal); //box 2 rotates around y about origin
    translate(x2, y2,z2);
    box(10,10,10);  //box2

    let d = int(dist(x1, y1, z1, x2, y2, z2));

    distance = createInput('')
    distance.position(80,100);
    distance.size(30);
    distance.value(d);
}

变量 Box1Slider.value() 和 Box2Slider.value() 被重命名只是为了更容易看到它们是如何改变翻译的。这些值随 slider 变化。

我希望能说明远处的 RotVal。目前，尽管盒子的距离随着旋转而增加和减少，但它没有任何区别。

Answer 1

(x2, y2, z2) 不是第二个框的最终位置。在绕 y 轴旋转后，您必须计算向量的新 x 和 z 分量(x2、y2、z2)。
通过 createVector 创建二维向量 (x2, z2)并用 .rotate() 旋转它按 Angular RotVal。
计算距离形式(x1, y1, z1)到旋转向量(r_x2, y2) , r_z2):

let v_xz2 = createVector(x2, z2).rotate(-RotVal) 
let r_x2  = v_xz2.x;
let r_z2  = v_xz2.y;

let d = int(dist(x1, y1, z1, r_x2, y2, r_z2));

看例子:

var Box1Slider, Box2Slider, RotSlider, distance;

var x1 = 0, y1 = 0, z1 = 0;
var x2 = 0, y2 = 0, z2 = 0;

function setup() {
    createCanvas(600, 250, WEBGL);

    Box1Slider = createSlider(0, 100, 50);
    Box1Slider.position(20, 20);
    Box2Slider = createSlider(0, 100, 50);
    Box2Slider.position(20, 50);
    RotSlider = createSlider(0, 360, 0);
    RotSlider.position(20, 80);
    distance = createInput('')
    distance.position(80,100);
    distance.size(30);
}

function draw() {
    background(255);
    lights();
    orbitControl();
    rotateX(Math.PI/2)

    stroke('red');
    var x1 = Box1Slider.value();
    var z2 = Box2Slider.value();
    var RotVal = RotSlider.value() * Math.PI / 180.0;

    translate(x1, y1, z1)
    box(10,10,10) //box1
    translate(-x1,-y1,-z1)
      
    rotateY(RotVal); //box 2 rotates around y about origin
    translate(x2, y2, z2);
    box(10,10,10);  //box2

    let v_xz2 = createVector(x2, z2).rotate(-RotVal) 
    let r_x2  = v_xz2.x;
    let r_z2  = v_xz2.y;

    let d = int(dist(x1, y1, z1, r_x2, y2, r_z2));
    distance.value(d);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.js"></script>