THREE.js: how to draw 2D grid with 3D mesh

Questions
1

I have two canvas:

<canvas width=“1748” height=“822” style=“width: 100%; height: 100%;”></canvas>
<canvas width=“1748” height=“822” style=“position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; opacity: 0.3;”></canvas>

first is for draw a 3D cube, second is for draw 2D grid, like this:

image
image882×820 57.3 KB

then I Zoom in 100%, like this:

image
image868×850 68.7 KB

However, the 2D grid scaling in my code is wrong. After zooming in 100%, it should be the same width as the initial state: almost two grids width, but now change to four grids width.

I draw 2D grid like this:

(1) pixelsPerCentimetre = 1; // one world coordinate unit represents one pixel

(2) when zoom in or zoom out:

pixelsPerCentimetre = pixelsPerCentimetre * (zoom / 100);

so when I Zoom in 100%, pixelsPerCentimetre = 2

Just looking at the 2D environment, the scale of the grid is correct.

But my question is that in the 3D environment, no matter how scaled, the width of the 3D cube is the same as the initial state, which is alwarys about two grids width. How should I modify the code of my drawing grid so that this scaling is correct.

the camera I use is THREE.PerspectiveCamera, and the zoom is controlled by THREE.TrackballControls, minDistance=80, maxDistance=500

thanks.

2

Crossposting:

3

Please provide a live demo that illustrates the issue. It’s not clear to me so far what you’re doing in your application.