如何在 p5.js 中使用 dist() 进行轮换？

Question

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

我不太确定如何将角度准确地纳入其中。我知道 为什么 dist() 不随角度改变（我在 dist() 中使用的变量我用来改变方框的翻译，我使用的变量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() 被重命名只是为了更容易看到它们是如何改变翻译的。这些值随滑块变化。

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

Answer 1

(x2, y2, z2) 不是第二个框的最终位置。在围绕 y-axis.
旋转后，您必须计算向量 (x2、y2、z2) 的新 x 和 z 分量通过 createVector and rotate it with .rotate() 角度 RotVal.
创建一个二维向量 (x2, z2) 计算距离形式(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>

如何在 p5.js 中使用 dist() 进行轮换？

How to account for rotation with dist() in p5.js?

javascript

processing

p5.js