Hello fellow students, I’ve created a series of videos and the code itself needed to update the Digital Artifact Collection as it stands right now. This is the process I went about in, but feel free to change it if you know a better way!

How to Embed the Model

The code:

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

        model-viewer {
            width: 100%;
            max-width: 600px;
            height: 400px;
            background-color: #eee;
        }

        #ar-button {
            background-color: #6200ea;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 10px;
        }

        #ar-button:hover {
            background-color: #3700b3;
        }

        #ar-prompt {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 10px;
        }

        #ar-prompt img {
            width: 50px;
        }

        .progress-bar {
            width: 100%;
            height: 4px;
            background-color: #ccc;
        }

        .update-bar {
            height: 100%;
            background-color: #6200ea;
            width: 0;
            transition: width 0.5s;
        }

        .hide {
            display: none;
        }
    </style>
 <model-viewer src="RAW URL" 
                  ar ar-modes="webxr scene-viewer quick-look" 
                  camera-controls 
                  shadow-intensity="1"
                  poster="poster.webp">
        <div class="progress-bar hide" slot="progress-bar">
            <div class="update-bar"></div>
        </div>
    </model-viewer>

Just replace where it says RAW URL with the Raw URL of your file from Github, then copy and paste that into a custom HTML block on your page! (Also again, if you find anything you don’t like feel free to improve upon it!)

Updating the Gallery: