Extracting variable from HTML blockl

hey guys,

I have been ripping my hair off trying to figure this out and I have been searching through the forum and tried all aproches.

In all its simplicity I want to get a variable from a javascript inside a HTML block and use it for other blocks in bubble. first goal is just getting it top appear in a text block. The script is basically using model-viewer to display a 3d model and when you click on the muscles on the encorche, they change color and their names appear.

I am aware of the toolbox javascript to bubble plug in and I have been able to get this to work in a test script. In the script I want to extract the variable from however, it doesnt work. This is probably because the variable changes on a click event (which I also want the extracted bubble element to do).

Here is the script I am talking about:

NOTE: The script itself already does what I want - display the name of the muscle you click on 3d model. But I want to use this muscle name inside bubble. Perhaps its easier to get the text I want to import to bubble directly from the

? I tried this too, but I couldnt find a way to get the value of the id into a variable that could be used with javascript to bubble plug in.

PS: sorry for messy code, I am learning by doing :slight_smile:

    <!-- Import the component -->
    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

 <model-viewer  
      style="margin: auto; min-width: calc(100vh - 50vh); min-height: calc(100vh); top: 0px;  position: sticky;" bounds="tight" 
      id="pickMaterial" loading="eager" 
      shadow-intensity="0.5" exposure="1.5" 
      camera-controls src="https://s3.amazonaws.com/appforest_uf/f1654607332726x973226565179949200/ecorche_MQ-Draco.glb" 
      environment-image="neutral" 
      ar ar-modes="webxr scene-viewer quick-look" 
      alt="A Material Picking Example">
    </model-viewer>

    <div type="text" id="data"></div>

    <script type="module">

    var previousMaterial;
    var muscles = ['this has a "search for" in the database'];
    var name;

    // INITIALISE MUSCLE GROUP COLORS
    const modelViewerParameters = document.querySelector("model-viewer");
    var i = 0;
    modelViewerParameters.addEventListener("load", (ev) => {
        
    for (let [key, value] of Object.entries(modelViewerParameters.model.materials)) {
        i = i+1;
      // Defaults to gold
      let materials = modelViewerParameters.model.materials[i];
      
       var names = materials.name;

      console.log(names);
      
      if(muscles.includes(names)) {
      materials.pbrMetallicRoughness.setBaseColorFactor([0.7294, 0.5333, 0.0392]);
      }
    }
    })

    // COLOR CLICKED MUSCLES

      const modelViewer = document.querySelector("model-viewer#pickMaterial");
      modelViewer.addEventListener("load", () => {
      const changeColor = async (event) => {
      
      let material = modelViewer.materialFromPoint(event.clientX, event.clientY);
      
        if(material != null) {
          document.getElementById("data").innerHTML=material.name.replace('_', ' ').replace('_Muscle', '').replace('Muscle', ' ');
          // extract name of clicked muscle group
          name = document.getElementById("data").innerHTML;
          console.log(name)
          
    material.pbrMetallicRoughness.setMetallicFactor(0)
          //[0,1,0,1]
          // random color: [Math.random(), Math.random(), Math.random()]
          if(previousMaterial != null){
             previousMaterial.pbrMetallicRoughness.setMetallicFactor(1);
          }
          previousMaterial = material;
        }
      }

      modelViewer.addEventListener("click", changeColor);

    });

    </script>

Hello @sondreberg91

This topic was automatically closed after 70 days. New replies are no longer allowed.