'Sharpness is lost when moving the React-Three-Fiber/Drei component

I am trying to make a 3D terminal for my portfolio. Currently developing the project in Next.js. The idea is to use an existing package (https://www.npmjs.com/package/crt-terminal) and put inside the tag of the Drei library for react-three-fiber. This is the code for model component:

import React, { useState, useEffect } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, Stats } from "@react-three/drei";
import { useTheme } from "next-themes";
import TestComponent from "./TestComponent";
import { motion } from "framer-motion";

function Model() {
  const { theme, setTheme } = useTheme();
  const [initialZoom, setInitialZoom] = useState(null);

  useEffect(() => {
    if (window.innerWidth < 1000) {
      setInitialZoom(0.5);
    } else {
      setInitialZoom(1);
    }
  }, []);

  return (
    <motion.div
      id="canvas-container"
      initial={{ y: 50 }}
      animate={{ y: 0 }}
      transition={{ duration: 0.5 }}
    >
      {initialZoom && (
        <Canvas
          camera={{ zoom: initialZoom }}
          style={{ width: "100%", height: 700 }}
        >
          <OrbitControls
            enablePan={true}
            enableZoom={true}
            enableRotate={true}
            minPolarAngle={Math.PI / 2.2}
            maxPolarAngle={Math.PI / 1.8}
            minAzimuthAngle={-Math.PI / 12}
            maxAzimuthAngle={Math.PI / 12}
          />
          <TestComponent />
          <Stats />
        </Canvas>
      )}
    </motion.div>
  );
}

export default Model;

And this is the Html component to render.

import React, { useEffect, useState, useRef } from "react";
import { Terminal, useEventQueue, textLine, textWord } from "crt-terminal";
import { IoTerminal } from "react-icons/io5";
import { VscChromeMaximize, VscChromeMinimize } from "react-icons/vsc";
import { CgClose } from "react-icons/cg";
import { OrbitControls, Html, Icosahedron } from "@react-three/drei";
import { Canvas, useFrame } from "react-three-fiber";
import { useThree } from "@react-three/fiber";

const bannerText = `
Welcome to my CLI. Kind of
`;

export default function TestComponent(props) {
  const eventQueue = useEventQueue();
  const [screenDimensions, setScreenDimensions] = useState([]);
  const { print } = eventQueue.handlers;
  const { size } = useThree();

  useEffect(() => {
    const currentDim = [size.width, size.height];
    setScreenDimensions(currentDim);
  }, []);

  return (
    <group>
      <mesh position={[0, 0, 0]}>
        <Html transform position={[0, 0, 0]}>
          <div
            style={{
              width: screenDimensions[0] * 0.5,
              height: screenDimensions[1] * 0.3,
              display: "flex",
              flexDirection: "column",
              overflow: "hidden",
            }}
            className="html-transform-div"
          >
            <div
              style={{
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
              }}
            >
              <IoTerminal style={{ fontSize: 8, color: "black" }} />
              <h1 style={{ fontSize: 6, marginLeft: 3, color: "black" }}>
                Command Line
              </h1>
            </div>
            <div
              style={{
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
              }}
            >
              <div className="canvas-minimize-div">
                <VscChromeMinimize
                  style={{ fontSize: 8, marginTop: 4, color: "black" }}
                />
              </div>
              <div className="canvas-maximize-div">
                <VscChromeMaximize style={{ fontSize: 8, color: "black" }} />
              </div>
              <div className="canvas-close-div">
                <CgClose
                  style={{
                    fontSize: 8,
                    color: "#010308",
                  }}
                />
              </div>
            </div>
            <Terminal
              queue={eventQueue}
              banner={[
                textLine({ words: [textWord({ characters: bannerText })] }),
              ]}
              className="Terminal"
              onCommand={(command) =>
                print([
                  textLine({
                    words: [
                      textWord({ characters: "You entered command: " }),
                      commandWord({ characters: command, prompt: ">" }),
                    ],
                  }),
                ])
              }
            />
          </div>
        </Html>
      </mesh>
    </group>
  );
}

The component renders fine, appearing sharp, but then when I use the controls to move the characters all get blurred. This problem only happens for desktop computers, everything works perfectly for mobile devices. Before move

After move

Any ideia how to fix? Thank you

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Sharpness is lost when moving the React-Three-Fiber/Drei component

Sources

Related Questions