Question

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

我不太确定如何精确地将角度合并到其中。我知道为什么 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轴旋转后，您必须计算向量的新x和z分量（x2，y2，z2）。
通过createVector创建一个二维矢量（x2，z2），并与.rotate()一起旋转角度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>

如何在p5.js中使用dist（）解决旋转问题？

1 个答案: