Создание 3D-планетной среды

Question

У меня есть планета, на которую я наложил линейный градиент, а также я пытаюсь расположить другие планеты по периметру одной планеты, и сделать так, чтобы на ней можно было наблюдать некоторые видимые явления погоды, похожие на тайфуны, блуждающие по ней. Цель — сделать планету с вращающимися по орбите другими планетами, которые пользователь может перемещать курсором. Это может потребовать javascript, но я сначала займусь первым проектом.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: black;
}

.planet,
.planet2 {
  position: absolute;
  margin: 5px;
  top: 50%;
  left: 50%;
  transform: translate(-60%, 0);
  height: 1100px;
  width: 900px;
  border-radius: 50%;
  z-index: 2;
  background: linear-gradient(40deg, #4a190290 20%, #7b222235, #2b2a29df);
  box-shadow: -20px -20px 40px 40px #801a1a6f inset, 0 0 20px 40px #cb221f90;
}

.astroid__belt {
  width: 100%;
  height: 100%;
  top: 10%;
  left: calc(50% - 50%);
  transform-style: preserve-3d;
  transform: perspective(1000px);
  text-align: center;
  overflow: hidden;
  position: relative;
}

.planet2 {
  position: absolute;
  background: linear-gradient(45deg, transparent 50%, #ac4444, #b90f0fde, #542408b0);
  z-index: 3;
}

.astroid1 {
  position: relative;
  top: 10%;
  width: 200px;
  height: 400px;
  left: calc(50% - 200px);
  background-color: #090606;
  border-right: 3px solid transparent;
  border-radius: 50%;
  z-index: 2;
  animation: animateAstroid 7s linear infinite;
  transform: tranzlateZ(550px);
}

.astroid__belt .astroid {
  position: absolute;
  inset: 0 0 0 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.astroid,
div {
  position: absolute;
  transform-style: preserve-3d;
  border-radius: 70%;
}

@keyframes animateAstroid1 {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(0deg) rotateY(75deg) rotateZ(360deg);
  }
}

@keyframes animateAstroid2 {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(0deg) rotateY(20deg) rotateZ(360deg);
  }
}

<div class="astroid__belt">
  <div class="astroid1"></div>
  <div class="astroid2"></div>
  <div class="astroid3"></div>
  <div class="astroid4"></div>
  <div class="astroid5"></div>
  <div class="astroid6"></div>
  <div class="astroid7"></div>
  <div class="astroid8"></div>
  <div class="astroid9"></div>
  <div class="astroid10"></div>
  <div class="astroid12"></div>
</div>
<div class="planet"></div>

_{Свободный перевод вопроса Making a 3d planet environment от участника @ay Stewart.}

Answer 1

Вот мое решение для создания пояса астероидов: добавьте элементы с классом .orbit для ваших .asteroid-ов. Поверните элементы с классом .orbit по оси X и задайте противоположное вращение астероидов.
Анимируйте орбиты по оси Z и астероиды по оси Y на отрицательные 360 градусов, чтобы сделать противоположное вращение и сохранить их в форме круга.

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  overflow: hidden;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.system {
  --size: 100;
  container-type: size;
  transform-style: preserve-3d;
  perspective: 2000px;
  width:calc(var(--size) * 1cqmin);
  aspect-ratio: 1;
}

.planet,
.orbit,
.asteroid {
  --y: 0;
  transform-style: preserve-3d;
  position: absolute;
  inset: 0;
  height: calc(var(--size) * 1%);
  margin: auto;
  aspect-ratio: 1;
  border-radius: 50%;
}

.planet {
  background: hsl(var(--hue) 50% 50%) linear-gradient(50deg, #0000 0%, #0000 45%, #000a 55%, #000e 100%);
}

.orbit {
  --duration: 6;
  box-shadow: 0 0 0 2vmin #fff4, inset 0 0 0 2cqmin #fff4;
  animation: orbit calc(var(--duration) * 1s) linear infinite;
  rotate: 1 var(--y) 0 80deg;
}

.asteroid {
  margin-left: calc(var(--size) * -0.5%);
  background: hsl(var(--hue) 50% 50%) linear-gradient(115deg, #0000 0%, #0000 45%, #000a 55%, #000e 100%);
  animation: asteroid calc(var(--duration) * 1s) linear infinite;
  rotate: 1 0 0 90deg;
}

@keyframes orbit { to { transform: rotate3d(0, 0, 1, 360deg); } }
@keyframes asteroid { to { transform: rotate3d(0, 1, 0, -360deg); } }

<div class="system">
  <div class="planet" style="--size:40; --hue:10;"></div>
  
  <div class="orbit" style="--size:68; --y:-0.2; --duration:10;">
    <div class="asteroid" style="--size:8; --hue:20;"></div>
  </div>
  
  <div class="orbit" style="--size:80; --y:-0.2; --duration:6;">
    <div class="asteroid" style="--size:5; --hue:30;"></div>
  </div>
  
  <div class="orbit" style="--size:100; --y:-0.28; --duration:30;">
    <div class="asteroid" style="--size:10; --hue:190;"></div>
  </div>
</div>

Не идеально (более крутой угол орбиты показал бы, что поворачивать астероиды/луны так, чтобы они всегда были обращены к «камере», довольно сложно...), но, надеюсь, вы сможете изучить эту идею дальше, например: создать овальные, эллиптические орбиты для определенных планет и использовать анимацию с помощью кривой Безье вместо линейной, поиграть с другими углами наклона и т.д.

_{Свободный перевод ответа от участника @Roko C. Buljan.}

БЛОГ НА HUSL

Создание 3D-планетной среды

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