The Model Viewer module is unable to load the three-dimensional model

Attempting to incorporate a 3D model into my website using the modelviewer library, but encountering difficulties in loading the file as shown below:

Just to note, I am utilizing github pages with a custom domain from godaddy which may be contributing to the issue.

Initially suspected it was a permission problem, but after placing my .glb model in the folder and downloading it via a link (e.g., www.website.com/origami.glb), it downloaded successfully.

Below is the code snippet:

<!DOCTYPE html>
<html style="font-size: 100%;">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>test</title>
        <link rel="stylesheet" href="./styles/styles.css" id="" type="text/css">
        <link rel="stylesheet" href="./styles/stylesMob.css" id="" type="text/css">
        <link rel="stylesheet" href="./styles/navStyle.css" id="" type="text/css">
        <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>   
        <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>   

        <style>
        model-viewer{
            width: 400px;
            height: 1600px;
            margin: auto;
        }   

        </style>
        
    </head>

    <body>
        <ul>
            <li><a  href="index.html">main</a></li>
            <li><a class="active" href="projects.html">projects</a></li>
            <li><a href="about.html">about</a></li>
            <li><a href="about.html">contact</a></li>
          </ul>
          
        
        <h4 style="font-size: 20px; color: red;"> * the website is wip * </h4>
        <div>
            <model-viewer src="origami.glb" ></model-viewer>
        </div>            
       

        
    </body>
</html>

https://i.sstatic.net/oJRZj.jpg

https://i.sstatic.net/AIdPg.jpg

Answer №1

Here is a demonstration of the model.

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

<model-viewer 
  src="http://raw.githubusercontent.com/german-alvarez-dev/workshop-webvr-aframe/master/ship/scene_ship.gltf" 
  auto-rotate
  alt="boat">
</model-viewer>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method for retrieving the active element with Waypoint?

Currently, I am implementing Waypoint (version 7.3.2) in my React project using React version 16. My goal is to create a scrollable list of items where each item fades out as it reaches the top of the container div. My main inquiry is how can I obtain a re ...

Adding a border with vertical padding above and below two floated divs with different heights

Here is some sample markup: <div class="container"> <div class="one">column a<br />column a</div> <div class="two">column b</div> </div> The content in the inner divs can vary in height and is dynamically g ...

Increasing the size of a card beyond the container using the CSS PRE tag

I am facing an issue with a card on my webpage. It contains a pre tag inside it, which is causing the size of the card to extend beyond its container, resulting in a horizontal scroll bar appearing. How can I make the content within the pre tag scroll hori ...

Is it possible for consecutive json and jsonp requests to fail on Crossrider?

I am currently utilizing crossrider to develop a plugin that works across various browsers. Within my implementation, I have two consecutive AJAX requests (one JSON and one JSONP): The first request involves a JSON call for "login" which sets a brows ...

Tips for sending multiple values to the next page using AngularJS

Hey there, I'm new to AngularJS and currently using Onsen UI in my demo application. I have two pages in my app and I'm trying to pass two values to the next page. I managed to pass one value successfully, but when I attempt to send the second on ...

Easy task tracker in Vue.js

I’m currently delving into the world of VueJS and working on a simple to-do list application. The issue I’m facing is that I can't seem to successfully pass an array to the child component responsible for displaying the list: Parent Component < ...

What is the best way to calculate the combined total of radio button values using jQuery or JavaScript?

I recently came across a tutorial on how to sum radio button values using JavaScript or jQuery, and I decided to implement it in my code. However, I encountered some issues as it didn't work as expected. My goal was to offer users the option to downlo ...

Incorporate JavaScript functionality with HTML dropdown lists

I am attempting to achieve the following: The user can choose between "Option One" or "Option Two". If they select "Option One", the result will be 66 + 45, and if they select "Option Two", the result will be 35 + 45. How can I make this work using a com ...

Tips for creating Firestore rules for a one-on-one messaging application

After creating a one to one chat app for a website using Firebase and Firestore, I am now looking to set up the Firebase Firestore rules for the same. The functionality of the app involves checking if the user is [email protected], then retrieving chatids ...

Ways to connect a click event to a dynamically generated child element with the help of jQuery?

I am aware that similar questions have been asked elsewhere, but as someone new to jQuery, I am still struggling to attach a click listener to an a element within a dynamically appended ul.li.a structure in the DOM. Below is an example of how the structure ...

Creating a div with a fixed size in Tailwind CSS: A beginner's guide

I received some initial code from a tutorial and I've been having trouble setting the correct size. Despite searching through documentation for solutions, it seems like there's a fundamental aspect that I'm overlooking. The main issue is tha ...

Leverage the power of lodash or es6 by creating a custom function that accepts an object containing deeply nested properties and outputs a new object containing only specific properties

I have a complex object with unnecessary properties and deeply nested values that I need to filter. My objective is to transform this initial object into a new object containing only the specific fields I require. Here's an illustration of the large ...

Encountering issues when using react-leaflet in a React project with webpack integration

I've been attempting to import react-leaflet into my project without actually rendering any maps, but I keep getting this error message. TypeError: Object(...) is not a function I am certain that the issue stems from the import statement, as indica ...

What could be causing React to render only the final two elements of my array?

I am currently working on a project where I need to display a series of images from a folder. While I have managed to accomplish this, I am facing an issue where the images are being displayed in rows of 2. Although the implementation is successful, it see ...

Guide on generating a route using coordinates in a threejs environment

Currently, I am working with an array of coordinates obtained from the Google Maps Navigation API. I have successfully plotted these coordinates on a sphere, however, my objective is to extract the shape of the path by combining all the coordinate points ...

What are the steps to modify the text color in WKWebView?

I've customized my ViewController to include a WKWebView, where I load my content from both .html and .css files. The result resembles a controller for reading books within the Apple Books app. do { guard let filePath = Bundle.main.path(fo ...

Tips for building forms with VUE?

Today is my first attempt at learning VUE, and I've decided to follow a tutorial on YouTube from freeCodeCamp.org. The tutorial covers the concept of components in VUE, specifically focusing on creating a login form project. Despite following the ins ...

What is the best way to populate all data in select2 (4.0) upon page load?

I'm currently utilizing the select2 plugin (v.4.0) and have a specific goal in mind: $("#search-input-chains").select2({ placeholder: "Unit", theme: "bootstrap4", ...

Creating Awesome Icons in Kendo Grid with Code In this tutorial, we will learn how to programm

Looking to have a Kendo grid display a green fas-fa-clock icon if isActive is true, and a grey far-fa-clock icon if false. Clicking on the icon should toggle between true and false. Currently, the grid just shows the word true or false in the column. Cod ...

Is there a way to trigger a function in an AngularJS controller from a Backbone controller?

I've been working on an application that was originally developed using backbone and jQuery, but we had to incorporate new modules built with angular to meet client requirements. Routing in the application is handled by backbone route, and we have suc ...