Как пофиксить проблемы с css у react-three-fiber (three js для react)?

Question

Zakiberbullenii @Zakiberbullenii

Как пофиксить проблемы с css у react-three-fiber (three js для react)?

Не знаю как правильно объяснить проблему, заметил, что кнопкам, которые созданы в контейнере Html, добавляется дно за пределами высоты у этой кнопки, причем закругленное и визуально лагающее.

Я убрал все стили и начал постепенно добавлять их заново, чтобы понять из-за чего появляется дно. Оказалось, что после добавления height: 30px и background: rgba(44, 44, 44, 0.7), но я не понимаю в чем дело и почему оно так визуально лагает.
Например тут оно полупрозрачным стало:

Тут пропало:

При повороте камеры опять появилось

CSS копок:

.cube_btn {
    width: 100px !important ;
    height: 30px  !important;
    border-radius: 5px ;
    font-family: "Calibri";
    color: white;
    z-index: 2;
    background: transparent !important;
    transition: background linear 0.2s;
}

.cube_btn:hover {
    background: rgba(44, 44, 44, 0.7) !important;
}

Кубик (Modal.tsx):

import React, { FC, useRef } from "react";
import { Html } from "@react-three/drei";
import { Euler, Vector3, useFrame } from "@react-three/fiber";
import * as THREE from "three";

interface IPlane {
  rot: Euler;
  pos: Vector3;
}

const planeAligments: IPlane[] = [
  { rot: [Math.PI / 2, 0, -Math.PI], pos: [0, -2.5, 0] },
  { rot: [0, Math.PI / 2, -Math.PI / 2], pos: [2.5, 0, 0] },
  { rot: [0, -Math.PI / 2, Math.PI / 2], pos: [-2.5, 0, 0] },
  { rot: [-Math.PI / 2, 0, 0], pos: [0, 2.5, 0] },
  { rot: [0, 0, 0], pos: [0, 0, 2.5] },
  { rot: [0, Math.PI, 0], pos: [0, 0, -2.5] },
];

interface IModel {
  contents: React.ReactNode[];
  materials: THREE.MeshBasicMaterial[];
}

const Model: FC<IModel> = ({ contents, materials }) => {
  const group = useRef<any>();
  // Make it float
  useFrame((state) => {
    const t = state.clock.getElapsedTime();
    group.current.rotation.y = THREE.MathUtils.lerp(
      group.current.rotation.y,
      Math.sin(t / 4) / 4,
      0.1
    );
  });

  return (
    <group ref={group} dispose={null}>
      <group position={[0, 2.96, 0]} rotation={[Math.PI / 2, 0, 0]}>
        {planeAligments.map((plane, index) => (
          <mesh
            key={index + "plane"}
            material={materials[index]}
            geometry={new THREE.PlaneGeometry()}
            scale={[5, 5, 5]}
            rotation={plane.rot}
            position={plane.pos}
            
          >
            {/* Drei's HTML component can "hide behind" canvas geometry */}
            <Html
              className="content"
              position={[0, 0, 0.005]}
              transform
              occlude
              
              style={{ overflow: "hidden", position: "relative" , top: 150}}
            >
              {index < contents.length && contents[index]}
            </Html>
          </mesh>
        ))}
      </group>
    </group>
  );
};

export default Model;

Импортируется в Main.tsx:

import { useRef, useState, Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import { ContactShadows, OrbitControls } from "@react-three/drei";
import Model from "./Model";
import * as THREE from "three";
const side1 = require("../images/side1.png");
const side2 = require("../images/side2.png");
const side3 = require("../images/side3.png");
const side4 = require("../images/side4.png");
const top = require("../images/top.png");
const bottom = require("../images/bottom.png");

function LoadColorTexture(path: string) {
  const texture = loader.load(path);
  texture.colorSpace = THREE.SRGBColorSpace;
  return texture;
}

const cubeMaterials = [
  new THREE.MeshBasicMaterial({
    map: LoadColorTexture(side1),
    color: 0xe6e6e6,
  }),
  new THREE.MeshBasicMaterial({
    map: LoadColorTexture(side2),
    color: 0xe6e6e6,
  }),
  new THREE.MeshBasicMaterial({
    map: LoadColorTexture(side3),
    color: 0xe6e6e6,
  }),
  new THREE.MeshBasicMaterial({
    map: LoadColorTexture(side4),
    color: 0xe6e6e6,
  }),
  new THREE.MeshBasicMaterial({
    map: LoadColorTexture(bottom),
    color: 0xe6e6e6,
  }),
  new THREE.MeshBasicMaterial({ map: LoadColorTexture(top), color: 0xe6e6e6 }),
];

const Main = () => {
  //@ts-ignore
  const { innerWidth } = window;

  const cubeContent = [
    <button
      className="cube_btn noselect"
    >
      Описание
    </button>,
    <button
      className="cube_btn noselect"
    >
      Описание
    </button>,
    <button className="cube_btn noselect">
     Описание
    </button>,
     <button className="cube_btn noselect">
      Описание
    </button>,
  ];
  //ts-ignore
  return (
    <div style={{ width: "100%", position: "relative" }} className="main_body">
      <div
        style={{
          width: "100vw",
          height: "100vh",
          position: "fixed",
          backgroundSize: "cover",
          filter: "brightness(50%)",
          backgroundAttachment: "fixed",
        }}
      />
      <Canvas
        camera={{ position: [-5, 5, 30], fov: 70 }}
        style={{ position: "absolute", top: 40 }}
        dpr={[1,2]}
      >
        <Suspense fallback={null}>
          <group
            scale={[innerWidth / 960, innerWidth / 960, innerWidth / 960]}
            position={[0, 4.2, 0]}
            
          >
            <Model contents={cubeContent} materials={cubeMaterials} />
          </group>
        </Suspense>
        <ContactShadows
          position={[0, -4.5, 0]}
          scale={100}
          blur={2}
          far={4.5}
        />
        <OrbitControls
          enablePan={false}
          enableZoom={false}
          minPolarAngle={0.7}
          maxPolarAngle={2}
        />
      </Canvas>
  );
};

export default Main;