Разработка навигации 3D

Ссылка 1 https://codepen.io/prisoner849/pen/RwyzrVj Ссылка 2 http://82.146.38.108/nova-06-04/first.php?alg=2

Основная задача это сделать галлактику как на 2 ссылке, но чтобы ей можно было так же легко и просто управлять как той что на 1 ссылке.Можете написать с нуля или же модифицировать код уже готовой галактики которая расположена по адресу 2 ссылки, и которая имеет много багов и проблемы с производительность. Исходники 2 галактики дадим.

Галактика по 1 ссылке это прототип, из которого была создана не совсем удачная версия галактики по 2 ссылке, с профилями и некоторыми другими фишками. Которую вам нужно доделать или написать с нуля.

Как можете заметить галактика состоят из множества летающих шариков , представте что эти шарики это люди на сайте, или вернее не люди а их профили. Профили в виде летающих шариков :D однако  все станет понятнее когда мы прокрутим колесом мыши к себе и приблизим  к себе галактику, те шарики что ближе всего к нам они трансформируются в мини-профили пользователей, когда мы прокрутим колесо от себя то мини-профили калапсируют обратно в шарики. При помощи мыши можно вращать галактику по свой своей оси, а так же переворачивать ее плоскость, это можете легко заметить если перейдете по 1 или 2 ссылки.

Напомню, что у галактики по 2 ссылки есть множестко багов и проблемы с производительностью поэтому вам нужно сделать такую же галактику но без багов и проблем с производительностью.

Итак, вот основным моменты:1. галактика по первой ссылке как можете заметить имеет центральный шар и диск, галактика же по 2 ссылки у нее диск разбит на сектора, т.е. регионы, и в каждом таком регионе пользователи, их профили. Итоговая версия галактики должна быть такая же, как и та что по 2 ссылке (у которой много проблем на данный момент)2. мини-профили, которые появляются когда к ним "подлетаешь" при помощи колеса мыши должны иметь дизайн как ниже на фотоФоновую картинку этого мини-профиля дадим. На 2 галактике этот мини-профиль слишком “сплюснут” и тескт кривой, желтого цвета, вообщем увидите все сами. Нужно чтобы было как на фото выше.3. На фото выше можете заметить надпись “ID 000302” уменьшите размер этого текста так, чтобы туда вместился айдишник состоящий из 12 символов, например “ID 287345698112” - вот чтобы оно помещалось и не вылазило нигде за края.4. На фото выше надпись “Just Do It” это статус пользователя, сделайте чтобы если этот статус слишком большой, например “Just Do It hehehehehehehhehehehehehehehheheheh bugagaggagag” что чтобы он не залазил за пределы мини-профиля а обрезался, и было бы примерно “Just Do It hehehhehe …”. Ну вы поняли , я надеюсь.5. На фото выше “Super Leo” это имя пользователя, аналогично с статусом, тоже может быть длинным и может вылазить за края мини-профиля, поэтому нужно сделать чтобы не вылазило и обрезалось в нужный момент. Все тоже самое касается и локации пользователя , в данном случае Baku, Georgia а так же хеш теги которые идут ниже, см. фото выше, ничего не должно вылазить за граници и перекрывать другие елементы мини-профиля6. Добавьте в правый верхний угол крестих белого цвета, по нажатию на который мини-профиль должен “отехать” как бы назад, на 90% примерно, и крестик должен пропасть в этот момент. На фото ниже красным кружком я отметил место для крестика. И это должен быть крест, а не буква Х7. Когда вы путешествуете по галактике, и когда некоторые шарики превращаются в мини-профили (когда к ним приближаешься на достаточное расстояние) то крестика в правом верхнем углу быть не должно пока, а только когда пользователь кликнет на профиль и мы как бы красиво “подлетим” к этому профилю по ближе, вот тогда и должен появлятся крестик. Все это вы можете заметить на галактике по ссылке 28. На галлактике по 2 ссылке у аватаров на профилях вы можете заметить как они будто “дребезжат”, это такой эффект который был сделан специально для красоты. Уберите его. Ненужно. Аватары должны быть статичны9. Когда кружочки из которых состоит галактика превращаются в мини-профили то в консоль браузера необходимо писать ID этих профилей, например "show profile 239784123444" аналогично, когда профили схлопываются обратно в кружочки то в консоль браузера так же нужно писать id схлопнувшихся профилей, например "close profile 239784123444"10. На галактике по 2 ссылке если подлететь при помощи колеса мыши к центральному шару то вы можете заметить что там шарики не превращаются в мини-профили. Это баг. Нужно чтобы превращались.11. На галактике по 2 ссылке некоторые шарики имею вид звёзд, не нужно так, таких звезд быть не должно. Смотрите пример на фото, там вы можете заметить есть шарики и пятиконечная звезда-шарик. Такие звезды-шарики не нужны12. На фото ниже можете заменить отступы у аватара не правильные, вверху больший, внизу меньший… А должны быть одинаковые отступы до краев. Это уже касяк дизайнера конечно13. У галактики по 2 ссылке, когда шарики превращаются в мини-профили то эти мини-профили продолжают лететь куда то, вы можете заметить это. Нужно чтобы они переставали лететь, а замерли на месте.14. Как и на галактике по 1 ссылке так и на 2 ссылке вы можете заметить “скользкий эфект” как на льду,  когда вы курсором мыши чуть-чуть , пикселей на 5 двинули галактику а она двинулась на все 200 пиксейлей или даже больше. Не удобно и скользко. Так быть не должно. Сделайте так чтобы ваш алгоритм на js смотрел как близко и какие шарики ближе всего к нам, и когда пользователь вращает галактику зажав левую кнопку мыши то не было этой “скользоты”,  сместил пользователь галактику условно говоря на 14 пиксейлей и она на 14 пикселей должна реально сместится. Ничего страшного если она сместится не на 14 а на 20 пикселей, тут высокая точность не обязательна. Главное чтобы “скользоты” как на льду не было. Ну вы поняли.15. На галактике по 2 ссылке в левом верхнем углу странице есть шестерёнка, если туда кликнуть то откроется информация об управлении галактикой при помощи клавиатуры. Сделайте тоже самое. Хотя отображать на странице эту шестерёнку с информацией не обязательно. Просто сделайте аналогичное управление с клавиатуры. 16. При нажатии на Q или E на клавиатуре галлактика поворачивается на определенный угол по часовой или против часовой стрелки, в зависимости какая клавиша была нажата, а когда отпускаешь клавишу то она продолжает поворачиватся. Такого быть не должно. Она не должна продолжать вращение когда клавиша уже отпущена.17. Когда разворачиваешь галлактику по ссылке 2 , полность к себе, как на фото ниже, а затем нажимаешь кравиши R или F и тем самым перемещаешься как бы к краю галактики и хочешь подлететь к этим краям галлактики, посмотреть что там, крутишь колесо мыши то можно заметить сколько усилий необходимо сделать чтобы наконец подлететь к этим краям, крутить колесом нужно  очень много, в итоге номально подлететь к краю не получается. Сделайте чтобы получалось.18. В вашем коде на js должны быть такие еще функции: функция добавления нового шарика на галлактику, принимающая аргументы “region, id, other_info”.  Когда я вызываю эту функцию с аргументами то на галлактике соответственно должен появлятся шарик.region - как вы понимаете это регион на галлактике на ссылке 2. Это пусть будет число от 1 до 24. 24-й это premium регион, центральный шар на галлактике.id - идентификатор профиля фиксированой длины, он уникален и состоит из чисел, 12 символовother_info - другая информация которая отображается на мини-профиле, это будет обьект, ключами которого являются строки, например “nickname”, “age“, “gender”, “is_avatar” , “is_online” и т.д. потом согласуем этот момент с вами.

В региаонах, на галлактике , пусть шарики размещаются не в случайном порядке, а пусть просто заполняют свободное пространство как бы, пока свободное место есть то шарик пусть появляется на галлактике, каждый в своем регионе, когда места уже нет, то пусть в console.log пишет ошибку с номером ID шарика который не смог попасть на галлактику

Дальше, нужна  функция для удаления шарика, принимающая в качестве аргумента id этого шарика. Так же не забудьте что шарик может уже превратится в мини-профиль и в этот момент мне как раз нужно его удалить, то профиль должен просто исчезнуть с галлактики. Если шарика уже нет на галлактике ошибку подымать не нужно.

Нужна функция для обновления информации на шарике или мини-профиле, принимающая точно такие же аргументы как и функция которая добавляет шарик, за исключением аргумента region 

Нужна функция которая будет делать все шарики на галлактике полупрозрачными (5% прозрачности или менее, посмотрите) а один шарик, ID которого мы передали функции не должно трогать. Таким образом мы как бы выделим один едтинственный шарик или мини-профиль на фоне остальных. Если на галлактике нет шарика с таким id то пусть ничего не происходит а в консоль браузера пишет какое нибудь сообщение с id шарика которого найти не удалось.

Аналогично, должна быть функция сбрасывающая все в нормальный вид. Чтобы всем шарикам и мини профилям вернулась прозрачность (в ноль)

Нужна функция аналогичная выше но оставляла не тронутым только какаой то один регион