three.path | threepath is a threejs extension which provides a 3D path geometry builder | Graphics library

My three.js scene is completely distorted until I move the mouse somewhere on the site. You can see the nature of the distortion on the image below:

When I move the mouse, the scene suddenly pops and everything is fine. It doesn't seem to matter where exactly the cursor is within the site, it doesn't have to be over the canvas where my scene is rendered. This is how the scene looks after moving the mouse:

The following three.js related dependencies are used:

• "three": "^0.108.0"
• "three-orbitcontrols": "^2.102.2"
• "three.meshline": "^1.2.0"

I tried updating three to the latest version (0.116.1), but that didn't solve the issue either. I managed to replicate this issue on Firefox and Edge, but not on Chrome.

Some extra context: we use OffscreenCanvas for better performance, the mouse positions are sent from the main thread to the web worker on mousemove event, we use that information to slightly move the camera and the background (with offsets). I temporarily removed to mousemove handler logic from the web worker code and the issue still popped up, so it's probably unrelated. We use tween.js to make the camera animations smooth.

Relevant code snippets:

Scene setup:

I'm trying to cut two holes in a simple rectangle created by three.js. My problem is that the holes are not displayed correctly (no 3d-effect). This is my current approach:

I need to create a box having rounded corners on 4 sides but on top and bottom. Three.js has a very good example webgl_geometry_shapes and I'm trying to replicate it to add a hole to the green rounded box. In this example to add a hole to the circle: