Why not <model-viewer> tag is working

tv-ankur commented 9 months ago

Description

So I am trying to build the JS widget using the Model-viewer. So here is the code-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Popup Widget</title>
    <link rel="stylesheet" href="styles.css">
    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
    </head>
<body>
    <button id="showModalBtn" style="padding: 10px 10px;border: none; ">See in 3D</button>

    <div class="modal" id="myModal">
        <div class="modal-content">
            <span class="close-btn" id="closeModalBtn">&times;</span>
            <model-viewer id="custom_model_viewer" style="width: 280px; height: 200px;" src="https://541ec18bbc6967b2e8b5311355262be8.cdn.bubble.io/f1698055107493x179813533450767100/dining_room.glb" poster="https://meta-l.cdn.bubble.io/f1697548948800x314441104029680400/NeilArmstrong.webp" x shadow-intensity="1" camera-controls touch-action="pan-y"></model-viewer>
            <p>View this product in 3D</p>
            <button id="activateAR" style="padding: 10px 10px;border: none; ">See in 3D</button> 
        </div>
    </div>
    <script src="script.js"></script>

</body>
</html>

But when I embed my widget into other application, its shown like this(check the image) - no modelviewer preview.

Live Demo

It shown like this-

Version

model-viewer: v3.3.0

Browser Affected

[x] Chrome, version: 118.0.5993.96
[ ] Edge
[ ] Firefox
[ ] IE
[x] Safari, version- Version 16.1 (18614.2.9.1.12)

OS

[ ] Android
[ ] iOS
[ ] Linux
[x] MacOS- Yes
[ ] Windows

AR

[ ] WebXR
[ ] SceneViewer
[ ] QuickLook

samaneh-kazemi commented 9 months ago

Hi @tv-ankur, thanks for reaching out! Can you please share a glitch link where we can repro the issue? It's hard to know what's going on otherwise. I used your code in this glitch link with your model and I'm able to see mv. I don't have anything in script.js though since you didn't share that.

tv-ankur commented 9 months ago

@samaneh-kazemi its working normally but when I package as the widget then it does not work. How can I show you?

Should I share the widget code that you embed into website?

elalish commented 9 months ago

This sounds like a packaging problem rather than a MV problem - what tool are you using to create your widget? Have you asked on their forums?

tv-ankur commented 9 months ago

@elalish

I don't think so, I am simply using this script to generate the widget and hosting on cloudflare-

;(function () {
  // Fetch the widget HTML
  fetch('http://base_url/index.html')
    .then(response => response.text())
    .then(data => {
      // Insert the widget HTML into the website
      // Find the placeholder and insert the widget HTML

      const placeholder = document.querySelector('[id^="youtube_test_"]')

      if (placeholder) {
        const fullId = placeholder.id
        console.log('full id', fullId)

        placeholder.innerHTML = data

        // Load the widget CSS
        let link = document.createElement('link')
        link.rel = 'stylesheet'
        link.href = 'http://base_url/styles.css'
        document.head.appendChild(link)

        // Load the widget JS
        let script = document.createElement('script')
        script.src = 'http://base_url/script.js'
        document.body.appendChild(script)

          .catch(error => {
            console.log(
              'There was a problem with the fetch operation:',
              error.message
            )
          })

      }
    })
})()

and using https://base.url/embed.js to the script tag on the other websites.

elalish commented 9 months ago

"widget" is a very generic term - I actually have no idea specifically what you mean.

tv-ankur commented 9 months ago

@elalish

Here - widget means- the code you paste in other website so that it start showing UI.

Just for example - Google analytics give you piece of code, when you add that into your app header it starts sending analytics information to the google.

Same way I am trying to create - User will insert the piece of code and they will see the "model viewer" in 3D to their own product.

elalish commented 9 months ago

I don't know - I would guess an async script loading order issue. If you mess around on the JS console you may be able to figure it out. Try typing __THREE__ - this will print the three.js version. If it's undefined then the MV library has not been loaded.

tv-ankur commented 9 months ago

@elalish Its showing undefined even when I am using the Iframe (In case iframe, I can see the model is loaded).

elalish commented 9 months ago

So yeah, the problem is that model-viewer.min.js has not been loaded. I see it in your <head>, so maybe none of that is being loaded? As I say, I'd guess the problem is with how you're making your widget. Try loading your own simple script instead of model-viewer and maybe you can debug it easier.

tv-ankur commented 9 months ago

@elalish Yeah, Look like model-viewer library is not loaded. When I add the library using the script tag, it starts working as expected.

Now I need to debug my widget code.

google / model-viewer