Question

我有一个包含三个物体的容器，当容器以大速度移动时，它的孩子开始闪烁，然后在一段时间后跳跃，为什么会这样呢？

function init() {
    // ...
    geometry = new THREE.CubeGeometry(100, 100, 100);
    mesh = new THREE.Mesh(geometry, material);
    container.add(mesh);

    geometry = new THREE.CubeGeometry(50, 50, 50);
    mesh = new THREE.Mesh(geometry, material);
    mesh.position.z = 75;
    container.add(mesh);

    geometry = new THREE.CubeGeometry(25, 25, 50);
    mesh = new THREE.Mesh(geometry, material);
    mesh.position.z = 100;
    container.add(mesh);
    // ...
}

function render() {
    // The bigger the speed of object the more its jumping
    container.position.z += 1000000;
}

jsfiddle

修改我做了一些调查，发现当我在modelVIewMatrix个孩子上应用position并比较这些孩子之间的差异（距离）时，差异在一段时间后会发生变化，那时对象开始跳跃

jsfiddle

Answer 1

基本上问题是由浮点算术错误引起的。

从相机使用的投影矩阵看起来像这样 - 注意它包含非整数

[1.7243168354034424, 0, 0, 0, 
0, 2.1445069313049316, 0, 0,
0, 0, -1.0002000331878662, -1,
0, 0, -2.000200033187866, 0]

javascript使用数字的浮点表示，虽然它在某种程度上适用于整数，但实际数字通常会有轻微错误

例如，如果在javascript控制台中输入0.1 + 0.2，输出将不是0.3但是0.30000000000000004

当您将多维数据集的位置设置为几百万时，投影矩阵中位于较不重要位置的这些错误会向上移动并变得明显，

数字越大越糟糕，这就是为什么它开始像一个小振动然后变成彻底的灾难

如果您确实需要移动对象，则必须对THREE库进行更改并以更多位（在某些bytearray中）表示其矩阵编号或以其他方式破解浮点运算

速度快的物体闪烁/跳跃

1 个答案: