3D анимация кристаллической решетки

import * as THREE from "three";
import { OrbitControls } from "orbit-controls";
 
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
    50, window.innerWidth / window.innerHeight, 0.1, 500);
camera.position.y = 3;
camera.position.z = 5;
 
const canvas = document.getElementById("renderCanvas");
const renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: false });
renderer.setClearColor(new THREE.Color("rgb(50, 50, 50)"), 1);
renderer.setSize(window.innerWidth, window.innerHeight);
 
const orbitControls = new OrbitControls(camera, canvas);
orbitControls.target = new THREE.Vector3(0, 0, 0);
 
const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
// const boxMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const boxMaterial = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
const box = new THREE.Mesh(boxGeometry, boxMaterial);
scene.add(box);
 
const lightColor = new THREE.Color("rgb(255, 255, 255)");
const lightIntensity = 3;
const light = new THREE.DirectionalLight(lightColor, lightIntensity);
light.position.set(3, 5, 4);
scene.add(light);
 
function resize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}
window.onresize = resize;
 
const clock = new THREE.Clock();
clock.start();
 
function render() {
    // box.rotation.y += 1 * clock.getDelta();
    orbitControls.update();
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
render();

let sphereLeft;
let sphereRight;
let sphereRed;

function render() {
    if (sphereLeft && sphereRight) {
        const delta = clock.getDelta();
        sphereLeft.rotation.z -= 3 * delta;
        sphereRight.rotation.z += 3 * delta;
    }

    sphereRed = sphere.clone(); // Делаем копию сферы
    sphereRed.scale.set(0.1, 0.1, 0.1); // Задаём размер сферы по X, Y и Z. В данном случае, размер сферы 0.1
    sphereRed.position.set(0, 0, 0); // Задаём позицию сферы. Она находится в начале координат: (0, 0, 0)
    const sphereRedTexture = await textureLoader.loadAsync("./assets/red.png"); // Загружаем текстуру для красной сферы
    const sphereRedMaterial = new THREE.MeshPhongMaterial({ map: sphereRedTexture }); // Создаём материал
    sphereRed.material = sphereRedMaterial; // Применяем материал
    scene.add(sphereRed); // Добавляем сферу на сцену

let sphereLeft;
let sphereRight;
let sphereRed;
let sphereRed2;

    sphereRed2 = sphere.clone();
    sphereRed2.scale.set(0.1, 0.1, 0.1);
    sphereRed2.position.set(0, 2, 0);
    sphereRed2.material = sphereRedMaterial;
    scene.add(sphereRed2);