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();