[Violation] 'requestAnimationFrame' handler took <N>ms

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import Stats from 'three/examples/jsm/libs/stats.module.js';

export class Main {
    private scene: THREE.Scene;
    private camera: THREE.PerspectiveCamera;
    private renderer: THREE.WebGLRenderer;
    private controls: OrbitControls;
    private stats: Stats;

    constructor() {
        // Create scene
        this.scene = new THREE.Scene();
        this.scene.background = new THREE.Color(0xf0f0f0);

        // Create camera
        this.camera = new THREE.PerspectiveCamera(
            75,
            window.innerWidth / window.innerHeight,
            0.1,
            10000
        );
        this.camera.position.set(0, 5, 10);

        // Create renderer
        this.renderer = new THREE.WebGLRenderer({ antialias: true });
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        this.renderer.setPixelRatio(window.devicePixelRatio);
        this.renderer.shadowMap.enabled = true;
        document.body.appendChild(this.renderer.domElement);

        // Create stats
        this.stats = new Stats();
        document.body.appendChild(this.stats.dom);

        // Add controls
        this.controls = new OrbitControls(this.camera, this.renderer.domElement);
        this.controls.enableDamping = true;
        this.controls.dampingFactor = 0.05;

        // Add lights
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
        this.scene.add(ambientLight);

        const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
        directionalLight.position.set(5, 5, 5);
        directionalLight.castShadow = true;
        this.scene.add(directionalLight);

        // Load GLB
        this.loadModel();

        // Handle window resize
        window.addEventListener('resize', this.onWindowResize.bind(this));

        // Start animation loop
        this.animate();
    }

    // Load the model
    private loadModel(): void {
        const loader = new GLTFLoader();
        const url = 'path/to/my/file.glb';

        loader.load(
            url,
            (gltf) => {
                const model = gltf.scene;
                
                // Center the model
                const box = new THREE.Box3().setFromObject(model);
                const center = box.getCenter(new THREE.Vector3());
                model.position.sub(center);
                
                this.scene.add(model);
                
                // Adjust camera to fit model
                const size = box.getSize(new THREE.Vector3());
                const maxDim = Math.max(size.x, size.y, size.z);
                const fov = this.camera.fov * (Math.PI / 180);
                let cameraZ = Math.abs(maxDim / 2 / Math.tan(fov / 2));
                this.camera.position.z = cameraZ * 1.5;
                
                this.camera.updateProjectionMatrix();
                this.controls.target.set(0, 0, 0);
                this.controls.update();
            },
            (progress) => {
                console.log(`Loading: ${(progress.loaded / progress.total * 100)}%`);
            },
            (error) => {
                console.error('Error loading model:', error);
            }
        );
    }

    private onWindowResize(): void {
        // Update camera
        this.camera.aspect = window.innerWidth / window.innerHeight;
        this.camera.updateProjectionMatrix();

        // Update renderer
        this.renderer.setSize(window.innerWidth, window.innerHeight);
    }

    private animate(): void {
        requestAnimationFrame(() => this.animate());
        
        // Update controls
        this.controls.update();
        this.stats.update();
        // Render scene
        this.renderer.render(this.scene, this.camera);
    }
}

// Initialize the application
new Main();

In the above code, I load a glb file which is big, in threejs using GLTFLoader,
If the glb file is big, for example, a group of 9000 meshes, I got that violation warning message.
How to fix this. What can we use to load a big structure easily in threejs?

If you’re only getting that messages a couple of times and you don’t notice any issues as a user, you can ignore it.

That will be because on first render THREE.js has to compile materials and upload data to the GPU, which can take some time if you have a lot of data.

The message is a warning and not an error, so it doesn’t necessarily have to be fixed.

If you’re getting this for every frame, then it means your app is performing poorly. You should then look at optimising your model, by simplifying geometries, making sure you’re not using too many textures / their sizes aren’t too big / you use compressed formats, reducing the number of meshes - there are quite a few thread in the forum on the topic that should help.

Thanks for the reply, Arthur. The problem is I got that never ending warning message for every frame. I got this in one of my project to build structures, by small 20x20x20 cubes and it also has functionality to save and load the structure. So

  1. I can’t compressed and decompressed everytime(if we can, suggest me a way).
  2. Number of meshes depends on the user who use my app. it is his/her structure.

For small structure, it is working. But for large structures with a number of meshes. I got that warning message non-stop.