On my discover flickering occurs when page “off”. Effect act during 1-2ms in canvas. Moreover this problem may occur or not occur in any canvas blocks on page.
I tested more variants of solution this problem: wrote simple version of code, hided HTML until scene rendering, changed background on canvas and parents blocks, but nothing work.

I also tested more simple version with scene from tutorial three.js, but scene also flickering.

Maybe somebody encounter with this problem, give me advice please! ????

Attach video with problem in thread

/*Styles*/
import styled from 'styled-components';

export const BlockForModel = styled.div`
  width: 1200px;
  height: 800px;
  opacity: 0;
`

/*React*/
import React, {useEffect, useRef} from 'react';
import PropTypes from 'prop-types';

/*Created components*/
import {CreateScene} from "@ui/functions/tests/InitialTest";

/*Styles*/
import * as S from './styles/styles';



const ModelStandard = () => {
    const modelCanvas = useRef(null)

    useEffect(() => {
        if (modelCanvas.current){
            CreateScene(modelCanvas.current)
        }
    }, )

    return (
        <S.BlockForModel ref={modelCanvas}></S.BlockForModel>
    );
};

export default ModelStandard;

import * as THREE from 'three';


export function CreateScene(block){
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera( 75, block.offsetWidth / block.offsetHeight, 0.1, 1000 );

    const renderer = new THREE.WebGLRenderer();
    renderer.setSize( block.offsetWidth, block.offsetHeight );
    block.appendChild( renderer.domElement );

    const geometry = new THREE.BoxGeometry( 1, 1, 1 );
    const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

    const cube = new THREE.Mesh( geometry, material );
    scene.add( cube );

    camera.position.z = 5;

    function animate() {
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        renderer.render( scene, camera );
    }

    block.style.opacity = "100%"
    renderer.setAnimationLoop( animate );
}