I am trying to make a website that shows the asteroids around us, and to show them I used instanced meshes. Here’s the full code:

import React, { useEffect, useRef, useState } from 'react';
import * as THREE from 'three';
import Stats from 'stats.js'; // Import stats.js
import styles from "../../index.css";
import { createSun, drawBody, orbitalCurve, updateBody, updateCurve, updateLabel, updateIcon, followBody} from "./BodyVisual";
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { Asteroid, orbitalData, Earth, getCurrentD } from "./BodyPosition";
import asteroids from "./asteroids.json";

const AsteroidTracker = ({ speed, setViewDate, t, setT }) => {
    const asteroidCount = 35000;
    const mountRef = useRef(null);
    const controlsRef = useRef(null);
    const cameraRef = useRef(null); // Declare the camera ref
    const datenow = new Date();
    const d = getCurrentD(datenow);
    const KM = 149.6;
    const intervalRef = useRef(null);
    const asteroidMeshRef = useRef(null);
    const asts = [];

    const n2_ = (str) => str.replace(/s+/g, '_');

    const addDays = (now, days) => new Date(new Date(now).setDate(now.getDate() + days));

    const createAsteroids = (lst) => {
        for (let i = 0; i < asteroidCount; i++) {
            let data = lst[i];
            asts.push(new Asteroid(
                Number(data.epoch), Number(data.om), Number(data.i), Number(data.w),
                Number(data.a), Number(data.e), Number(data.ma), Number(data.per),
                n2_(data.full_name), 0xf0f0f0, "asteroid.jpg", false, 1, false
            ));
        }
    };
    createAsteroids(asteroids);

    useEffect(() => {
        // Scene setup (runs only once)
        const scene = new THREE.Scene();
        const renderer = new THREE.WebGLRenderer();

        // Camera Settings
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000);
        camera.position.z = 1000;
        camera.far = 100000000000;
        camera.near = 0.00001;
        camera.updateProjectionMatrix();
        cameraRef.current = camera; // Assign the camera to the ref

        renderer.setSize(window.innerWidth, window.innerHeight);
        mountRef.current.appendChild(renderer.domElement);

        const controls = new OrbitControls(camera, renderer.domElement);
        controlsRef.current = controls;

        // The asteroids
        const asteroidGeometry = new THREE.SphereGeometry(1, 8, 8);
        const asteroidMaterial = new THREE.PointsMaterial({ color: 0xff0000 });
        const asteroidMesh = new THREE.InstancedMesh(asteroidGeometry, asteroidMaterial, asteroidCount);
        asteroidMeshRef.current = asteroidMesh;
        scene.add(asteroidMeshRef.current);

        // Initialize stats.js
        const stats = new Stats();
        stats.showPanel(0); // 0: fps, 1: ms, 2: memory
        document.body.appendChild(stats.dom);

        // Render loop (runs continuously)
        const animate = () => {
            stats.begin(); // Start measuring performance

            // monitored code here
            renderer.render(scene, camera);

            stats.end(); // End measuring performance
            requestAnimationFrame(animate);
        };

        animate();

        // Clean up function (when the component is unmounted)
        return () => {
            clearInterval(intervalRef.current);
            mountRef.current.removeChild(renderer.domElement);
            document.body.removeChild(stats.dom); // Remove stats.js panel
        };
    }, []); 

    useEffect(() => {
        clearInterval(intervalRef.current);

        // Animation interval (runs when speed changes)
        intervalRef.current = setInterval(() => {
            setT((prevT) => prevT + 1);
            const dummy = new THREE.Object3D();
            for (let i = 0; i < asteroidCount; i++) {
                const {xeclip, yeclip, zeclip} = asts[i].coordinates(d + t);
                const x = xeclip * KM;
                const y = yeclip * KM;
                const z = zeclip * KM;
                dummy.position.set(x, y, z);
                dummy.updateMatrix();
                asteroidMeshRef.current.setMatrixAt(i, dummy.matrix);
            }
            asteroidMeshRef.current.instanceMatrix.needsUpdate = true;
        }, 10);

        // Clean up interval when speed changes
        return () => clearInterval(intervalRef.current);
    }, [speed, t, d]);

    return (
        <>
            <div id="scene" ref={mountRef}></div>
        </>
    );
};

export default AsteroidTracker;

The issue I am facing, is that this is running at around 30fps, while I want 60fps. I believe changing the t value is causing the issue because when instead of t, I add a random value to d when calling coordinates, and add 0 to t instead of 1, the fps is around 60-70. Like this:

        intervalRef.current = setInterval(() => {
            setT((prevT) => prevT + 0); // 0 instead of 1 here
            const dummy = new THREE.Object3D();
            for (let i = 0; i < asteroidCount; i++) {
                const {xeclip, yeclip, zeclip} = asts[i].coordinates(d + Math.random() * 200 - 100); // random value instead of t here
                const x = xeclip * KM;
                const y = yeclip * KM;
                const z = zeclip * KM;
                dummy.position.set(x, y, z);
                dummy.updateMatrix();
                asteroidMeshRef.current.setMatrixAt(i, dummy.matrix);
            }
            asteroidMeshRef.current.instanceMatrix.needsUpdate = true;
        }, 10);

why is the later giving 60-70fps while the first one gave 30-40? why does changing the t value make such a difference?

I tried to test it when it doesn’t use the coordinates function at all, thinking it might cause the issue, so I tried it with random coordinates as such:

        intervalRef.current = setInterval(() => {
            setT((prevT) => prevT + 0);
            const dummy = new THREE.Object3D();
            for (let i = 0; i < asteroidCount; i++) {
                const x = Math.random() * 2000 - 1000;
                const y = Math.random() * 2000 - 1000;
                const z = Math.random() * 2000 - 1000;

                dummy.position.set(x, y, z);
                dummy.updateMatrix();
                asteroidMeshRef.current.setMatrixAt(i, dummy.matrix);
            }
            asteroidMeshRef.current.instanceMatrix.needsUpdate = true;
        }, 10);

This gave about 100fps, but if I changed setT((prevT) => prevT + 0); to setT((prevT) => prevT + 1); it drops to 40-50fps, so while better fps, it still seems the t value changing is the issue