Как создать сферу со строками, которая вращается в направлении указателя мыши в css и js? - PullRequest
Новая
       62

Как создать сферу со строками, которая вращается в направлении указателя мыши в css и js?

0 голосов
/ 08 марта 2020

Вывод, который я хочу;

enter image description here

Я хочу создать сферу с именами, но не изгибая / не сгибая имена. Я также хочу, чтобы он вращался в направлении указателя мыши.

Если я использую это свойство поворота, мои слова будут искривлены. 

@keyframes rotate {
 0% {
  transform: rotateY(0deg);
 }
 100% {
  transform: rotateY(360deg);
 }
}
.circ{
  border: none;
  height: 200px;
  width: 200px;
  position: absolute;
  border-radius: 50%;
  transform-style: preserve-3d;
  box-sizing: border-box;
}
#sphere{
 animation: rotate 6s linear infinite;
 transform-style: preserve-3d;
 width: 400px;
 height: 400px;
}
.circ:nth-child(1) {
 transform: rotateX(0deg);
}
.circ:nth-child(2) {
 transform: rotateX(30deg);
}
.circ:nth-child(3) {
 transform: rotateX(60deg);
}
.circ:nth-child(4) {
 transform: rotateX(90deg);
}
.circ:nth-child(5) {
 transform: rotateX(120deg);
}
.circ:nth-child(6) {
 transform: rotateX(150deg);
}
.circ:nth-child(7) {
 transform: rotateX(180deg);
}
.circ:nth-child(8) {
 transform: rotateX(210deg);
}
<div id="sphere">
  <div class="circ">aaaaa</div>
  <div class="circ">bbbbb</div>
  <div class="circ">ccccc</div>
  <div class="circ">ddddd</div>
  <div class="circ">eeeee</div>
  <div class="circ">ffffffff</div>
</div>

и т. Д.

1 Ответ

0 голосов
/ 10 марта 2020

TLDR: это сложно.

В основном вам нужен игровой движок l oop и некоторая продвинутая библиотека визуализации, такая как D3 или Pixi. js. Вы могли бы сойти с рук с помощью прямой CSS / html, если у вас есть только несколько слов, но это может быть запоздалым. Вот подход, который я бы выбрал:

  1. Дайте каждому слову координату по отношению к центр 3d-сферы.
  2. Сделайте математику и поверните сферу к мышке. (Возможно, вы захотите использовать векторную библиотеку, например gl-matrix.)
  3. Обновите позицию каждого слова, применив к нему вращение сферы.
  4. Примените преобразование объектива камеры к местоположению каждого слова или просто масштабируйте их по z-расстоянию, чтобы получить эффект перспективы.
  5. Визуализируйте слова, используя любую технологию, которую использует ваша библиотека, например спрайты или векторы.
...