3D objects is not displayed

I don’t know why the 3D objects did not change…

I’m editing a page in wordpress with WP Bakery page Building using 3 columns and assigning a separate block only for the Pure Js code, but the change of 3D objects by calling the 3D Viewer plugin with the shortcodes of the code is not displayed… only the default object is displayed when loading the page, but as soon as I change the positions of the ranges to display another object, it stops displaying the 3d object. t is that if I move the range line, it is supposed to change the 3d model, but it does not load any model… it is not displayed… I want to know according to the code I am using, why it is not displayed?
The objective with the code is that depending on the positions of the two range lines of the code, it changes from one 3d model to another, in block 1. Also that depending on these positions the percentage that appears in these lines of ranges is changed and that the text is changed and the color of each letter of the list is changed depending on the range… now all these functions work, but the 3d model is not visualized when these changes in the ranges are made, only the default 3d model is visualized when the page is loaded for the first time.

The console shows that the model is loaded, but absolutely nothing is displayed.

This is the code I am using:

<!-- Primer bloque (modelo 3D) -->
<div style="flex-basis: 100%; max-width: 100%; margin-bottom: 20px;">
<div id="modelContainer" style="text-align: center; padding-right: 20px; margin-bottom: 20px; min-height: 400px;">

<!-- Usa el shortcode del plugin para mostrar el modelo 3D -->[3d_viewer id="155" width="400" height="400"]
</div>
</div>
<!-- Segundo bloque (controles de rango) -->
<div style="flex-basis: 48%;">
<div id="containerTopRight" style="margin-top: 20px; padding-right: 20px; text-align: left;">

<label style="display: block; margin-bottom: 5px;" for="grasaInterior">Grasa Interior:</label>
<div style="display: flex; align-items: center;"><input id="grasaInterior" style="margin-right: 5px; height: 10px;" max="3" min="1" name="grasaInterior" type="range" />
<span id="porcentajeGrasaInterior">5%</span></div>
<label style="display: block; margin-top: 10px; margin-bottom: 5px;" for="grasaExterior">Grasa Exterior:</label>
<div style="display: flex; align-items: center;"><input id="grasaExterior" style="margin-right: 5px; height: 10px;" max="3" min="1" name="grasaExterior" type="range" />
<span id="porcentajeGrasaExterior">5%</span></div>
</div>
</div>
<!-- Tercer bloque (valores nutricionales y lista) -->
<div style="flex-basis: 48%;">
<div id="containerBottomRight" style="margin-top: 20px; text-align: left;">
<p id="valorNutricional">Texto de Valor Nutricional</p>

<ul id="listaElementos" style="margin-top: 20px;">
 	<li data-elemento="A">A</li>
 	<li data-elemento="B">B</li>
 	<li data-elemento="C">C</li>
 	<li data-elemento="D">D</li>
 	<li data-elemento="E">E</li>
 	<li data-elemento="F">F</li>
 	<li data-elemento="G">G</li>
 	<li data-elemento="H">H</li>
 	<li data-elemento="I">I</li>
</ul>
</div>
</div>
<!-- bloque de Js Puro -->
<style>
  /* Cambiar el color de la barra dinámica del rango */
  input[type="range"]::-webkit-slider-thumb {
    background-color: white !important;
  }

  input[type="range"]::-moz-range-thumb {
    background-color: white !important;
  }

  input[type="range"]::-ms-thumb {
    background-color: white !important;
  }

  /* Para navegadores que admiten el pseudoelemento thumb */
  input[type="range"]::-ms-fill-lower,
  input[type="range"]::-ms-fill-upper {
    background-color: white !important;
  }

  .resaltado {
    color: white !important;
    font-weight: bold;
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    var grasaInterior = document.getElementById("grasaInterior");
    var porcentajeGrasaInterior = document.getElementById("porcentajeGrasaInterior");
    var grasaExterior = document.getElementById("grasaExterior");
    var porcentajeGrasaExterior = document.getElementById("porcentajeGrasaExterior");
    var listaElementos = document.getElementById("listaElementos");
    var textoValorNutricional = document.getElementById("valorNutricional");

    grasaInterior.addEventListener("input", cambiarContenido);
    grasaExterior.addEventListener("input", cambiarContenido);

    function cambiarContenido() {
      var posicionGrasaInterior = grasaInterior.value;
      var posicionGrasaExterior = grasaExterior.value;

      // Actualizar el porcentaje debajo de cada rango
      porcentajeGrasaInterior.textContent = obtenerPorcentaje(posicionGrasaInterior);
      porcentajeGrasaExterior.textContent = obtenerPorcentaje(posicionGrasaExterior);

      // Determinar qué modelo cargar
      determinarModelo(posicionGrasaInterior, posicionGrasaExterior);

      // Actualizar el texto del Valor Nutricional y la lista
      actualizarTextoValorNutricional(posicionGrasaInterior, posicionGrasaExterior);
    }

    // Función para obtener el porcentaje según la posición del rango
    function obtenerPorcentaje(posicion) {
      switch (posicion) {
        case '1':
          return '5%';
        case '2':
          return '15%';
        case '3':
          return '25%';
        default:
          return '0%';
      }
    }

    // Función para determinar qué modelo cargar
    function determinarModelo(posicionGrasaInterior, posicionGrasaExterior) {
      // Cambia estas condiciones según tus necesidades
      var modeloID = '';

      if (posicionGrasaInterior == 1 && posicionGrasaExterior == 1) {
        modeloID = '155';
      } else if (posicionGrasaInterior == 1 && posicionGrasaExterior == 2) {
        modeloID = '183';
      } else if (posicionGrasaInterior == 1 && posicionGrasaExterior == 3) {
        modeloID = '155';
      } else if (posicionGrasaInterior == 2 && posicionGrasaExterior == 1) {
        modeloID = '183';
      } else if (posicionGrasaInterior == 2 && posicionGrasaExterior == 2) {
        modeloID = '155';
      } else if (posicionGrasaInterior == 2 && posicionGrasaExterior == 3) {
        modeloID = '183';
      } else if (posicionGrasaInterior == 3 && posicionGrasaExterior == 1) {
        modeloID = '155';
      } else if (posicionGrasaInterior == 3 && posicionGrasaExterior == 2) {
        modeloID = '183';
      } else if (posicionGrasaInterior == 3 && posicionGrasaExterior == 3) {
        modeloID = '155';
      } else {
        // Valor por defecto
        modeloID = '155';
      }

      // Construir el shortcode con el modelo determinado
      var shortcode = [3d_viewer id="${modeloID}" width="400" height="400"];

      // Imprimir en consola el shortcode generado
      console.log('Modelo cargado:', shortcode);

      // Ejecutar el shortcode y mostrar el modelo 3D
      ejecutarShortcode(shortcode);
    }

    // Función para ejecutar el shortcode y mostrar el modelo 3D
    function ejecutarShortcode(shortcode) {
      // Limpiar el contenedor del modelo
      var modelContainer = document.getElementById("modelContainer");
      modelContainer.innerHTML = '';

      // Agregar el shortcode al contenedor
      modelContainer.innerHTML = shortcode;
    }

    // Función para actualizar el texto del Valor Nutricional y la lista
    function actualizarTextoValorNutricional(posicionGrasaInterior, posicionGrasaExterior) {
      // Cambiar el texto según las condiciones dadas
      switch (${posicionGrasaInterior}-${posicionGrasaExterior}) {
        case '1-1':
          actualizarEstiloLista('A');
          textoValorNutricional.textContent = 'Valor Nutricional 1';
          break;
        case '1-2':
          actualizarEstiloLista('B');
          textoValorNutricional.textContent = 'Valor Nutricional 2';
          break;
        case '1-3':
          actualizarEstiloLista('C');
          textoValorNutricional.textContent = 'Valor Nutricional 3';
          break;
        case '2-1':
          actualizarEstiloLista('D');
          textoValorNutricional.textContent = 'Valor Nutricional 4';
          break;
        case '2-2':
          actualizarEstiloLista('E');
          textoValorNutricional.textContent = 'Valor Nutricional 5';
          break;
        case '2-3':
          actualizarEstiloLista('F');
          textoValorNutricional.textContent = 'Valor Nutricional 6';
          break;
        case '3-1':
          actualizarEstiloLista('G');
          textoValorNutricional.textContent = 'Valor Nutricional 7';
          break;
        case '3-2':
          actualizarEstiloLista('H');
          textoValorNutricional.textContent = 'Valor Nutricional 8';
          break;
        case '3-3':
          actualizarEstiloLista('I');
          textoValorNutricional.textContent = 'Valor Nutricional 9';
          break;
        default:
          restaurarEstiloLista();
          textoValorNutricional.textContent = 'Texto de Valor Nutricional por defecto';
      }
    }

    // Función para actualizar el estilo de la lista
    function actualizarEstiloLista(elemento) {
      restaurarEstiloLista();
      var elementoIluminar = listaElementos.querySelector('li[data-elemento="' + elemento + '"]');
      elementoIluminar.classList.add('resaltado'); // Agrega la clase para resaltar
    }

    // Función para restaurar el estilo de la lista
    function restaurarEstiloLista() {
      var elementosResaltados = listaElementos.querySelectorAll('.resaltado');
      elementosResaltados.forEach(function (elemento) {
        elemento.classList.remove('resaltado'); // Remueve la clase de resaltado
      });
    }
  });
</script>

• This topic was modified 10 months ago by emmaswan22.

The page I need help with: [log in to see the link]