🪐 Planetas gaseosos

Los planetas de las frías extensiones exteriores del Sistema Solar no son mundos en los que una nave pudiera aterrizar. Júpiter, Saturno, Urano y Neptuno, los llamados gigantes gaseosos, son planetas colosales compuestos principalmente de hidrógeno y helio, con un núcleo sólido en su interior. Las hipótesis más aceptadas postulan que estos planetas se formaron en la parte exterior de la nebulosa de polvo giratoria de la que nació el Sol. Estos planetas tardan mucho más que la Tierra en dar una vuelta completa al rededor del Sol: el año de Júpiter es de casi 12 años terrestres y el de Neptuno de casi 165.


Observa, crea y comparte

  • ¿Qué te llama la atención al observar los planetas?.
  • Habla con tu familia, amigos y amigas sobre los planetas que más te llamen la atención.
  • Haz un dibujo del planeta que más te haya gustado y compártelo.


<model-viewer src="/packages/modelviewer.dev/assets/ShopifyModels/Jupiter.glb" poster="/packages/modelviewer.dev/assets/ShopifyModels/Jupier.png" shadow-intensity="1" ar ="fixed" camera-controls alt="A 3D model carousel">
  
  <button slot="ar-button" id="ar-button">
    Ver en Realidad Aumentada
  </button>

  <div id="ar-prompt">
    <img src="/packages/modelviewer.dev/assets/hand.png">
  </div>

  <div class="slider">
    <div class="slides">
      <button class="slide selected" onclick="switchSrc(this, 'Jupiter')" style="background-image: url('/packages/modelviewer.dev/assets/ShopifyModels/Jupiter.png');">
      </button><button class="slide" onclick="switchSrc(this, 'Saturno')" style="background-image: url('/packages/modelviewer.dev/assets/ShopifyModels/Saturno.png');">

      </button><button class="slide" onclick="switchSrc(this, 'Urano')" style="background-image: url('/packages/modelviewer.dev/assets/ShopifyModels/Urano.png');">
      
      </button><button class="slide" onclick="switchSrc(this, 'Neptuno')" style="background-image: url('/packages/modelviewer.dev/assets/ShopifyModels/Neptuno.png');">
      
      </button><button class="slide" onclick="switchSrc(this, 'Juntos')" style="background-image: url('/packages/modelviewer.dev/assets/ShopifyModels/Juntos.png');">    
    </button></div>
  </div>
</model-viewer>

<script type="module">
  const modelViewer = document.querySelector("model-viewer");

  window.switchSrc = (element, name) => {
    const base = "/packages/modelviewer.dev/assets/ShopifyModels/" + name;
    modelViewer.src = base + '.glb';
    modelViewer.poster = base + '.png';
    const slides = document.querySelectorAll(".slide");
    slides.forEach((element) => {element.classList.remove("selected");});
    element.classList.add("selected");
  };

  document.querySelector(".slider").addEventListener('beforexrselect', (ev) => {
    // Keep slider interactions from affecting the XR scene.
    ev.preventDefault();
  });
</script>

<style>
  /* This keeps child nodes hidden while the element loads */
  :not(:defined) > * {
    display: none;
  }

  model-viewer {
    background-color: #eee;
    overflow-x: hidden;
    --poster-color: #eee;
  }

  #ar-button {
    background-image: url(/packages/modelviewer.dev/assets/ic_view_in_ar_new_googblue_48dp.png);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: 12px 50%;
    background-color: #fff;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    bottom: 132px;
    padding: 0px 16px 0px 40px;
    font-family: Roboto Regular, Helvetica Neue, sans-serif;
    font-size: 14px;
    color:#4285f4;
    height: 36px;
    line-height: 36px;
    border-radius: 18px;
    border: 1px solid #DADCE0;
  }

  #ar-button:active {
    background-color: #E8EAED;
  }

  #ar-button:focus {
    outline: none;
  }

  #ar-button:focus-visible {
    outline: 1px solid #4285f4;
  }

  @keyframes circle {
    from { transform: translateX(-50%) rotate(0deg) translateX(50px) rotate(0deg); }
    to   { transform: translateX(-50%) rotate(360deg) translateX(50px) rotate(-360deg); }
  }

  @keyframes elongate {
    from { transform: translateX(100px); }
    to   { transform: translateX(-100px); }
  }

  model-viewer > #ar-prompt {
    position: absolute;
    left: 50%;
    bottom: 175px;
    animation: elongate 2s infinite ease-in-out alternate;
    display: none;
  }

  model-viewer[ar-status="session-started"] > #ar-prompt {
    display: block;
  }

  model-viewer > #ar-prompt > img {
    animation: circle 4s linear infinite;
  }

  .slider {
    width: 100%;
    text-align: center;
    overflow: hidden;
    position: absolute;
    bottom: 16px;
  }

  .slides {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }

  .slide {
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fff;
    margin-right: 10px;
    border-radius: 10px;
    border: none;
    display: flex;
  }

  .slide.selected {
    border: 2px solid #4285f4;
  }

  .slide:focus {
    outline: none;
  }

  .slide:focus-visible {
    outline: 1px solid #4285f4;
  }

</style>