Three.js scene is distorted until the mouse is moved

Question

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:

const {scene, camera} = makeScene(elem, cameraPosX, 0, 60, 45);
const supportsWebp = (browser !== 'Safari');
imageLoader.load(backgroundImage, mapImage => {
   const texture = new THREE.CanvasTexture(mapImage);
   texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
   texture.minFilter = THREE.LinearFilter;
   // Repeat background so we don't run out of it during offset changes on mousemove
   texture.wrapS = THREE.MirroredRepeatWrapping;
   texture.wrapT = THREE.MirroredRepeatWrapping;
   scene.background = texture;
});

// Creating objects in the scene
let orbitingPlanet = getPlanet(0xffffff, true, 1 * mobilePlanetSizeAdjustment);
scene.add(orbitingPlanet);

// Ellipse class, which extends the virtual base class Curve
let curveMain = new THREE.EllipseCurve(
    0, 0, // ax, aY
    80, 30, // xRadius, yRadius
    0, 2 * Math.PI, // aStartAngle, aEndAngle
    false, // aClockwise
    0.2 // aRotation
 );
 let ellipseMainGeometry = new THREE.Path(curveMain.getPoints(100)).createPointsGeometry(100);
 let ellipseMainMaterial = new MeshLine.MeshLineMaterial({
      color: new THREE.Color(0xffffff),
      opacity: 0.2,
      transparent: true,
  });
  let ellipseMain = new MeshLine.MeshLine();
  ellipseMain.setGeometry(ellipseMainGeometry, function(p) {
     return 0.2; // Line width
  });
  const ellipseMainMesh = new THREE.Mesh(ellipseMain.geometry, ellipseMainMaterial );
  scene.add(ellipseMainMesh);
  // Create a halfish curve on which one of the orbiting planets will move
 let curveMainCut = new THREE.EllipseCurve(
     0, 0, // ax, aY
     80, 30, // xRadius, yRadius
     0.5 * Math.PI, 1.15 * Math.PI, // aStartAngle, aEndAngle
     false, // aClockwise
     0.2 // aRotation
  );
  let lastTweenRendered = Date.now();
  let startRotation = new THREE.Vector3(
      camera.rotation.x,
      camera.rotation.y,
      camera.rotation.z);
  let tweenie;

  return (time, rect) => {
      camera.aspect = state.width / state.height;
      camera.updateProjectionMatrix();
      let pt1 = curveMainCut.getPointAt(t_top_faster);
      orbitingPlanet.position.set(pt1.x, pt1.y, 1);

      t_top_faster = (t_top_faster >= 1) ? 0 : t_top_faster += 0.001;

      // Slightly rotate the background on mouse move
      if (scene && scene.background) {
          // The rotation mush be between 0 and 0.01
          scene.background.rotation =
              Math.max(-0.001,Math.min(0.01, scene.background.rotation + 0.00005 * target.x));
          let offsetX = scene.background.offset.x + 0.00015 * target.x;
          let offsetY = scene.background.offset.y + 0.00015 * target.y;
          scene.background.offset = new THREE.Vector2(
               (offsetX > -0.05 && offsetX < 0.05) ? offsetX : scene.background.offset.x,
               (offsetY > -0.05 && offsetY < 0.05) ? offsetY : scene.background.offset.y);
      }
      lastTweenRendered = tweenAnimateCamera(lastTweenRendered, tweenie, camera, startRotation, 200);

       renderer.render(scene, camera);
    };

makeScene function:

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(fieldOfView, state.width / state.height, 0.1, 100000000);
camera.position.set(camPosX, camPosY, camPosZ);
camera.lookAt(0, 0, 0);
scene.add(camera);
return {scene, camera};

Camera animation based on mouse positions:

function tweenAnimateCamera(lastTweenRendered, tween, camera, startRotation, period) {
    target.x = (1 - mouse.x) * 0.002;
    target.y = (1 - mouse.y) * 0.002;

    let now = Date.now();
    if ((
        // Don't let the camera go too far
        startRotation.x > -0.01 && startRotation.x < 0.01) &&
        now - lastTweenRendered  > (period / 2)) {

        if (tween) {
            tween.stop();
        }

        lastTweenRendered = now;

        let endRotation = new THREE.Vector3(
            camera.rotation.x +  0.005 * (target.y - camera.rotation.x),
            camera.rotation.y + 0.005 * (target.x - camera.rotation.y),
            camera.rotation.z);

        tween = new TWEEN.Tween(startRotation)
            .to(endRotation, period * 2)
            .easing(TWEEN.Easing.Quadratic.InOut)
            .onUpdate(function (v) {
                camera.rotation.set(v.x, v.y, v.z);
            })
            .onComplete(function(v) {
                startRotation = v.clone();
            });

        tween.start();
    }

    TWEEN.update();

    return lastTweenRendered
}

Mouse position receiver logic:

if (e.data.type === 'mousePosUpdate') {
    if (e.data.x !== -100000 && e.data.y !== -100000) {
        mouse.x = ( e.data.x - state.width / 2 );
        mouse.y = ( e.data.y - state.height / 2 );
        target.x = ( 1 - mouse.x ) * 0.002;
        target.y = ( 1 - mouse.y ) * 0.002;
    }
}

Render loop:

function render(time) {
    time *= 0.001;

    for (const {elem, fn, ctx} of sceneElements) {
        // get the viewport relative position of this element

        canvasesUpdatedPos.forEach( canvasUpdate => {
            if (canvasUpdate.id === elem.id) {
                elem.rect = canvasUpdate.rect;
            }
        });
        const rect = elem.rect;
        const bottom = rect.bottom;
        const height = rect.height;
        const left = rect.left;
        const right = rect.right;
        const top = rect.top;
        const width = rect.width;
        const rendererCanvas = renderer.domElement;

        const isOffscreen =
            bottom < 0 ||
            top > state.height ||
            right < 0 ||
            left > state.width;

        if (!isOffscreen && width !== 0 && height !== 0) {
            // make sure the renderer's canvas is big enough
            let isResize = resizeRendererToDisplaySize(renderer, height, width);

            // make sure the canvas for this area is the same size as the area
            if (ctx.canvas.width !== width || ctx.canvas.height !== height) {
                ctx.canvas.width = width;
                ctx.canvas.height = height;
                state.width = width;
                state.height = height;
            }

            renderer.setScissor(0, 0, width, height);
            renderer.setViewport(0, 0, width, height);

            fn(time, rect);

            // copy the rendered scene to this element's canvas
            ctx.globalCompositeOperation = 'copy';

            ctx.drawImage(
                rendererCanvas,
                0, rendererCanvas.height - height, width, height,  // src rect
                0, 0, width, height);                              // dst rect
        }
    }

    // Limiting to 35 FPS.
    setTimeout(function() {
        if (!stopAnimating) {
            requestAnimationFrame(render);
        }
    }, 1000 / 35);
}

Answer 1

First of anyone running into similar issues please take a look at Marquizzo's answer and Ethan Hermsey's comment (on the question) as well, since they provided a good possible cause for this issue, although the issue was different in my case.

The distortion was related to the OffscreenCanvas in our case. When the application starts we send the OffscreenCanvas along with it's size to the web worker:

const rect = element.getBoundingClientRect();
const offScreenCanvas = element.transferControlToOffscreen();
worker.post({
    type: 'canvas',
    newCanvas: offScreenCanvas,
    width: rect.width,
    height: rect.height
}, [offScreenCanvas]);

The cause of the issue was the height, which was incorrect in certain cases, 1px to be precise in the example pictured in the question. The incorrect height popped up because of a race condition, in a separate script we used to set up the height of certain canvas container elements with the following script:

$(".fullscreen-block").css({ height: var wh = $(window).height() });

However, we usually sent the size of the canvas to the worker before this happened. Substituting this JS code with a simple CSS rule solved this issue:

.fullscreen-block {
   height: 100vh;
}

So, in the end, the issue was not related to the mouse event's handled by us, I can only guess why moving the mouse fixed the distortion. I'd say Firefox probably revalidates/recalculates the size of DOM elements when the mouse is moved and we were notified about size changes, causing the animation to pop to the correct size and state.

Answer 2

I don't see where you're initiating target and mouse anywhere. My best guess is that target.x, target.y or mouse.x, mouse.y are undefined or 0, and it's probably causing a division by 0, or a calculation that returns NaN, which is giving you that infinitely stretched texture. You should be able to fix this if you initiate those vectors:

var target = new THREE.Vector2();
var mouse = new THREE.Vector2();