主页 / coding / 问题 / 78863619
Accepted
Jay Stewart
Asked: 2024-08-13 05:13:14 +0800 CST

制作 3D 星球环境

  • 772

我有一颗行星，我赋予了它一个线性渐变，我试图让岩石围绕行星的周边，同时让行星上一些可见的天气看起来就像台风在行星上徘徊一样。

目标是制作一颗行星，行星上有绕行的岩石，用户可以移动光标轻轻推动岩石，以获得炫酷的效果。这可能需要 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>

我尝试让行星周围的环像行星正常旋转一样，而不仅仅是在二维空间中。

html

1 个回答

  1. Best Answer

    以下是我创建小行星带的方法，
    为 .asteroid-s 创建 .orbit 元素。在 X 轴上旋转 .orbit 元素，并反向旋转小行星。在 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>

    虽然并不完美，但希望您可以进一步探索这个想法，例如为某些岩石创建椭圆形、椭圆形轨道，并使用贝塞尔曲线动画代替linear，使用其他倾斜角度等。

    行星的天气（如台风、地貌等）可以采用与小行星相同的方式实现，唯一的区别是它们应该更接近行星轨道，并且您不需要反向旋转这些元素。让它们在轨道上旋转时呈扁平状/变形，只需在其 Z 轴周围添加漩涡旋转即可。此外，还需要一个裁剪区域来规避轨道元素/窗格的平面性质。

    • 5

相关问题