Wordpress implementation issue for education website #2883
-
|
Hello, I am trying to use model viewer on my WordPress website designed to help with convey basic civil engineering principles. I have no coding experience and strictly focus on physics and civil engineering related stuff. I have been beating my head for a few days trying to get model viewer to load on certain pages. The quickest and easiest method appears to be to use a plugin called "insert headers and footers" and simply copy and paste the <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script> in the header section. From there the documentation recommends inserting the html code into a page. Well, this almost works, but unfortunately the model does not load. Please see the image below showing how the load bar is stuck without a corresponding model to view.
When looking at the console details, I am seeing the following error: THREE.RGBELoader Bad File Format: bad initial token
Lastly, the script inserted in the header section is as follows:
Any help or insights are greatly appreciated. |
Beta Was this translation helpful? Give feedback.
Replies: 4 comments 6 replies
-
|
I would host modelviewer on a different website and then just load that using an iFrame. |
Beta Was this translation helpful? Give feedback.
-
|
Hi Thorsten, no I have not. Is there documentation or a post I can follow to use this approach? Thank you |
Beta Was this translation helpful? Give feedback.
-
|
Not that I know of but this should do: As a test you can use this URL: https://webar.tripod-digital.co.nz/?exp=https://storage.googleapis.com/ar-tee.appspot.com/art/swarez_gallery/swarez_gallery An example is here: https://tripod-digital.co.nz/art (down on the page) |
Beta Was this translation helpful? Give feedback.
-
|
Dang it! It won't work. It may be because of the theme I'm using (kadence theme). Are you using an original WordPress theme for your website?
I'll see if I can try different things, getting closer! |
Beta Was this translation helpful? Give feedback.
-
|
Are you hosting on a .wordpress domain? wordpress blocks iframe if you are using their domain to host. |
Beta Was this translation helpful? Give feedback.
-
|
No, not a .wordpress domain. Using google domain - directhub.net
I am sure iframe works on the website since I have used a
https://vectary.com/ iframe embed before. That was just wasn't working for
what I am trying to do. Namely, animations and annotation features.
…On Sun, Oct 17, 2021 at 5:16 PM Thorsten Bux ***@***.***> wrote:
Are you hosting on a .wordpress domain? wordpress blocks iframe if you are
using their domain to host.
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<#2883 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AWDGRN2HV6RKPGZY7OUKT3TUHNDNFANCNFSM5GFIJZLA>
.
Triage notifications on the go with GitHub Mobile for iOS
<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675>
or Android
<https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.
|
Beta Was this translation helpful? Give feedback.
-
|
If you can share your URL where it is deployed I can have a look |
Beta Was this translation helpful? Give feedback.
-
|
Thank you! I have created a test page here:
…On Sun, Oct 17, 2021 at 5:25 PM Thorsten Bux ***@***.***> wrote:
If you can share your URL where it is deployed I can have a look
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<#2883 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AWDGRN6HDEI2SS3NHQ3SDULUHNEMPANCNFSM5GFIJZLA>
.
Triage notifications on the go with GitHub Mobile for iOS
<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675>
or Android
<https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.
|
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
Oh god, thank you!!!! Should've known better by removing <<>> "insertion
operation and output operator" - so in programming language that literally
means insertion - had to google that. Thank you so much Thorston, this has
made my day!
…On Sun, Oct 17, 2021 at 5:31 PM Thorsten Bux ***@***.***> wrote:
[image: Screen Shot 2021-10-18 at 11 30 14 AM]
<https://user-images.githubusercontent.com/16772796/137647224-d6cc4415-6f07-47cd-81ca-4cffae52a7c4.png>
Your iframe source contains too much stuff. Especially HTML elements. Make
sure there is only the URL in there. It will work once that is cleaned up
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<#2883 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AWDGRN4SU3OIAJXWQJXQUNDUHNFDXANCNFSM5GFIJZLA>
.
Triage notifications on the go with GitHub Mobile for iOS
<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675>
or Android
<https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.
|
Beta Was this translation helpful? Give feedback.
I would host modelviewer on a different website and then just load that using an iFrame.
Have you tried using an iFrame to include the model?