How to create texture from html canvas ? #3360

yucel-aydin · 2022-04-11T15:01:23Z

yucel-aydin
Apr 11, 2022

I want to dynamically create texture from html canvas and apply it to the model. Is there a way to do this?
https://modelviewer.dev/examples/scenegraph/#createTexturesExample How can I use the createTexture function here like this?

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
  <style>
    model-viewer {
      width: 800px;
      height: 600px;
    }
  </style>
</head>

<body>
  <div class="width:100%; height:100vh">
    <model-viewer id="shoe" camera-controls src="./models/MaterialsVariantsShoe.glb" ar
      ar-modes="webxr scene-viewer quick-look" alt="A 3D model of a Shoe">
      <div class="controls">
        <div>Variant: <select id="variant"></select></div>
        <hr>
        <p>Normals</p>
        <input id="textInpt" name="textInpt" value="Test">
        <!-- <select id="normals2">
                  <option>None</option>
                  <option value="./models/Default_normal.jpg">Damaged helmet</option>
                  <option value="./models/Lantern_normal.png">Lantern Pole</option>
                  <option value="./models/WaterBottle_normal.png">Water Bottle</option>
                </select> -->
        <p>Custom texture name</p>
        <p id="texture-name">None</p>
        <p>Image name from file name</p>
        <p id="image-name">None</p>
      </div>
    </model-viewer>
    <img src="" alt="" id="currenttexture" />
  </div>
  <script type="module">
    const modelViewerTexture = document.querySelector("model-viewer#shoe");

    modelViewerTexture.addEventListener("load", () => {

      const material = modelViewerTexture.model.materials[0];

      const createAndApplyTexture = async (channel, event) => {
        if (event.target.value == "None") {

          // Clears the texture.
          material[channel].setTexture(null);
        } else if (event.target.value) {
          var canvas = document.createElement('canvas');
          canvas.id="canvastexture";
          canvas.width = 2048;
          canvas.height = 2048;
          var g = canvas.getContext('2d');

          var font, lineHeight, x, y;

          font = 50;
          lineHeight = 10; // this is guess and check as far as I know
          g.font = font + 'px Arial';

          // Center
          g.fillStyle = 'black';
          x = 819;
          y = 1024;

          g.save();
          g.translate(x, y);
          g.rotate(-Math.PI / 2);

          g.textAlign = 'center';
          g.fillText(event.target.value, 0, lineHeight / 2);

          g.restore();

          g.fillStyle = 'red';
          g.fillRect(x, y, 2, 2);

          var img = canvas.toDataURL("image/png");
          document.getElementById("currenttexture").src = img;
          // Creates a new texture.
          const texture = await modelViewerTexture.createTexture(img);
          // Set the texture name
          texture.name = "test";          //event.target.value.replace(/ /g, "_").toLowerCase();
          // texture.name = event.target.options[event.target.selectedIndex].text.replace(/ /g, "_").toLowerCase();
          // Applies the new texture to the specified channel.
          material[channel].setTexture(texture);
          // Display the names values
          document.querySelector('#texture-name').innerText = "test";          //texture.name;
          document.querySelector('#image-name').innerText ="denem"; //texture.source.name;
        }
      }

      document.querySelector('#textInpt').addEventListener('change', (event) => {
        createAndApplyTexture('normalTexture', event);
      });
    });

  </script>
  <script>
    const modelViewerVariants = document.querySelector("model-viewer#shoe");
    const select = document.querySelector('#variant');

    modelViewerVariants.addEventListener('load', () => {
      const names = modelViewerVariants.availableVariants;
      for (const name of names) {
        const option = document.createElement('option');
        option.value = name;
        option.textContent = name;
        select.appendChild(option);
      }
      // Adds a default option.
      const option = document.createElement('option');
      option.value = 'default';
      option.textContent = 'Default';
      select.appendChild(option);
    });

    select.addEventListener('input', (event) => {
      modelViewerVariants.variantName = event.target.value === 'default' ? null : event.target.value;
    });
  </script>
</body>

</html>

elalish · 2022-04-11T16:24:18Z

elalish
Apr 11, 2022

I believe this is specifically disallowed by the browser on a privacy/security basis.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

How to create texture from html canvas ? #3360

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

How to create texture from html canvas ? #3360

Uh oh!

yucel-aydin Apr 11, 2022

Replies: 1 comment

Uh oh!

elalish Apr 11, 2022

yucel-aydin
Apr 11, 2022

elalish
Apr 11, 2022