Three.js中Chrome与Firefox的矩阵舍入误差导致投影翻转问题

针对你遇到的Firefox和Chrome中Three.js矩阵计算微小差异导致投影翻转的问题，以下几种方法可以实现跨浏览器一致性，且仅引入可接受的精度损失：

1. 截断矩阵元素的极小值 #

由于差异出现在e-16级的极小值上，直接将绝对值小于阈值（如1e-15）的元素置为0，就能消除符号差异：

const test = new THREE.Mesh(new THREE.PlaneGeometry(), new THREE.MeshBasicMaterial());
test.position.copy(new THREE.Vector3(-0.0800582263098657,0,-0.003907569688712309));
test.rotation.copy(new THREE.Euler(-1.5707963267948966,0,0, "XYZ"));

test.updateMatrix();
// 处理矩阵元素，消除极小值
const threshold = 1e-15;
for (let i = 0; i < test.matrix.elements.length; i++) {
  if (Math.abs(test.matrix.elements[i]) < threshold) {
    test.matrix.elements[i] = 0;
  }
}

// 此时再对比矩阵，跨浏览器结果会一致
const asString = `[${test.matrix.elements.join(",")}]`;
const chromeString = "[1,0,0,0,0,0,-1,0,0,1,0,0,-0.0800582263098657,0,-0.003907569688712309,1]";
console.log(asString === chromeString ? "equal" : "not equal"); // 跨浏览器均输出equal

2. 使用四元数替代欧拉角计算旋转 #

Euler角的浮点运算在接近π/2这类特殊角度时，更容易出现跨浏览器的精度差异。改用四元数设置旋转，能提升计算稳定性：

const test = new THREE.Mesh(new THREE.PlaneGeometry(), new THREE.MeshBasicMaterial());
test.position.copy(new THREE.Vector3(-0.0800582263098657,0,-0.003907569688712309));
// 用四元数创建旋转
const rotationQuat = new THREE.Quaternion().setFromEuler(new THREE.Euler(-Math.PI/2, 0, 0, "XYZ"));
test.quaternion.copy(rotationQuat);

test.updateMatrix();
// 可选：再做一次极小值截断，确保完全一致

3. 预计算并手动设置矩阵（你已验证的方案） #

如果场景中该平面的位置和旋转固定，可以预计算正确的矩阵，关闭matrixAutoUpdate后直接赋值，彻底避免动态计算的差异：

const test = new THREE.Mesh(new THREE.PlaneGeometry(), new THREE.MeshBasicMaterial());
test.matrixAutoUpdate = false;
// 直接使用Chrome下的正确矩阵值
test.matrix.elements = [
  1, 0, 0, 0,
  0, 0, -1, 0,
  0, 1, 0, 0,
  -0.0800582263098657, 0, -0.003907569688712309, 1
];
test.matrix.decompose(test.position, test.quaternion, test.scale);

这些方法的核心都是消除无意义的浮点微小差异，既不会影响视觉效果，也能解决跨浏览器的投影翻转问题。

内容的提问来源于stack exchange，提问作者munHunger