是什么让 THREE.js 帆布双倍大小的像素？

问：

我第一次尝试使用 THREE.js，这似乎很容易。但是，有一件事我就是做不到;

出于某种奇怪的原因，画布像素是“双倍”大小的。请看以下屏幕截图：

请注意以下事项：

1. 画布是橙色部分
2. 页面背景是白色部分
3. 包含画布的 div 的黑色边框正好是 1 像素宽

您可以看到呈现的线条 （GridHelper） 没有像预期的那样宽一个像素，但似乎是双倍大小，或者至少大于 1。

我是这样设置渲染的：

this.renderer = new THREE.WebGLRenderer({
      antialias:false
    , alpha: true 
});
console.log("canvas", this.renderer.domElement);
this.camera = new THREE.PerspectiveCamera(45, 1, 0.1, 1000);

我在每次渲染时调用以下函数：

update_canvas_size() {
        const canvas = this.renderer.domElement;
        const parent = canvas.parentElement;
        // look up the size the canvas is being displayed
        const w = parent.clientWidth;
        const h = parent.clientHeight;
        console.log("update_canvas_size <",canvas.width,canvas.height,"> --> <", w,h,">");
        
        // adjust displayBuffer size to match
        if (canvas.width !== w || canvas.height !== h) {
            console.log("SIZE DESCREPENCY DETECTED, RESIZING <",canvas.width,canvas.height,"> --> <", w,h,">");
            this.renderer.setSize(w, h, false);
            this.camera.aspect = w / h;
            this.camera.updateProjectionMatrix();
            

        }
    }

如果您想知道我的 GridHelper 是什么样子的：

    this.grid = new THREE.GridHelper( 10, 10, 0x666666, 0x777777);

是什么原因导致的？