three.js обновить добавив анимированный обьект

По щелчку на шар должен добавляться овый вращающийся обьект поверх шара. Для событий использую threex.domevents.js. Добавляется, но анимации вращения нет. Что нужно изменить в коде? :

var scene, camera, renderer;

var WIDTH  = window.innerWidth;
var HEIGHT = window.innerHeight;

var SPEED = 0.01;
let cube, cube2;
const arr = [];
let domEvents;

let dim_x = 4, dim_y = 4;

function init() {
    scene = new THREE.Scene();

    initCamera();
    initRenderer();

    document.body.appendChild(renderer.domElement);

    initCube();

    
}

function initCamera() {
    camera = new THREE.PerspectiveCamera(70, WIDTH / HEIGHT, 1, 120);
    camera.position.set(7, 0, 50);
    camera.lookAt(scene.position);
}

function initRenderer() {
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(WIDTH, HEIGHT);
}

function initCube() {
    cube = new THREE.Mesh(new THREE.SphereGeometry(2, 12, 12), new THREE.MeshNormalMaterial());
    
    domEvents = new THREEx.DomEvents(camera, renderer.domElement);

    let i = 0, len = (dim_x * dim_y), x = 0, y = 0, z = 0, copy; 

    while(i < len){
        copy = cube.clone();
        x = i % dim_x !== 0 ? (x + 7) : 0;
        y = i % dim_y === 0 ? (y + 7) : y;
        z = i % dim_y === 0 ? (z - 7) : z;
        copy.position.set(x, y, z);
        copy.lookAt(cube.position);
        domEvents.addEventListener(copy, 'click', clickBall, false)
        scene.add(copy);
        i += 1;
        arr.push(copy);
    }
}

function rotateCube() {
    arr.forEach(a => {
        a.rotation.x -= SPEED * 2;
        a.rotation.y -= SPEED;
        a.rotation.z -= SPEED * 2;
    })
}

function render() {
    requestAnimationFrame(render);
    rotateCube();
    renderer.render(scene, camera);
}

function clickBall(ball) {
    cube2 = new THREE.Mesh(new THREE.BoxGeometry(3, 3, 3, 4, 4, 4), new THREE.MeshBasicMaterial({color: 0xfffff, wireframe: true}));
    
    cube2.position.set(ball.x, ball.y, ball.z); // Как добыть координаты нажатого обьекта?
    scene.add(cube2);
    requestAnimationFrame(render);
    cube2.rotation.x -= SPEED * 2;
    cube2.rotation.y -= SPEED;
    cube2.rotation.z -= SPEED * 2;
    renderer.render(scene, camera);
}

init();
render();

Ответы (0 шт):