Three.js 为什么三个.js几何体的精度会随着数字的增加而降低？

我正试着用三点js画这个六边形。如果我用小数字，它画得很好。但是，如果我使用大数字（似乎可以在不损失精度的情况下放入一个双精度），Three.js似乎在精确绘制它时遇到了问题。我已经用一个例子证明了这一点。它的代码如下。请注意，如果将

offsetX

和

offsetY

更改为非常大的数字，则不会绘制相同的图形。我不太明白为什么，不知道是否有人能帮我解释一下。似乎这些数字都符合双重类型

var scene = new THREE.Scene();

const offsetX = 0;
const offsetY = 0;
// comment the previous two lines or following two lines to see the difference 
// const offsetX = 3031034;
// const offsetY = 4647776;

var camera = new THREE.OrthographicCamera(offsetX-3,offsetX+3,offsetY-3,offsetY+3,1,100);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(400, 400);
document.body.appendChild( renderer.domElement );

var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(offsetX + 1.039688, offsetY + 0.850723, 0));
geometry.vertices.push(new THREE.Vector3(offsetX + 0.913957, offsetY + 1.068813, 0));
geometry.vertices.push(new THREE.Vector3(offsetX + 0.661409, offsetY + 1.069356, 0));
geometry.vertices.push(new THREE.Vector3(offsetX + 0.534591, offsetY + 0.851991, 0));
geometry.vertices.push(new THREE.Vector3(offsetX + 0.660321, offsetY + 0.633721, 0));
geometry.vertices.push(new THREE.Vector3(offsetX + 0.91287, offsetY + 0.633178, 0));
geometry.vertices.push(new THREE.Vector3(offsetX + 1.039688, offsetY + 0.850723, 0));

var material = new THREE.LineBasicMaterial({ linewidth: 1, color: 0x00ff00 });

var line = new THREE.Line( geometry, material );
scene.add( line );

camera.position.z = 5;

renderer.render(scene, camera);

---

虽然您所显示的数字可以用

double

格式以足够的精度表示，以渲染六边形而不会出现可见的失真，但WebGL在整个操作过程中似乎不使用

double

格式

，及。和文档中有关浮点格式或算术的信息不完整或缺失。我们只能从文档中的倾斜引用和观察到的行为中非正式地推断使用的格式

最有可能的是，软件中的某些组件使用IEEE-754基本32位二进制浮点格式。在此格式中，有效位1有24位

对于显示的偏移量，例如4647776，必须设置浮点格式的指数，以便有效位的最高位表示4194304，即222。那么最低的位是2−1或½

这意味着六边形、.661409、.851991、.633721等顶点的所有坐标将四舍五入到最接近的½。显然，这扭曲了图纸。修改偏移量的其他值会显示与32位二进制浮点精度一致的效果

脚注 1浮点数由符号位s、有效位f和指数e组成，表示数值(−1） s•f•be，其中b是格式的基或基数（二进制为2）。有效位也称为浮点表示的分数部分，因此f表示有效位