A couple of weeks back, I found about Model viewer. Model viewer can render 3D models in a web browser with minimal syntax. I found it to be fascinating because of its ease of use and possible usecases. Not to forget it is also open-source!
However, I had some challenges getting the html code to retrieve the 3D model and other resources in Quarto.
Front matter edits
I had to add the below keys and values in the front matter of the this quarto post.
Alternative 1 - filenames
resources:
- DamagedHelmet.glb
- spruit_sunrise_1k_HDR.hdr
- poster.webp
include-in-header:
- text: |
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>Alternative 2 - wildcards
resources:
- "*.glb"
- "*.hdr"
- "*.webp"
include-in-header:
- text: |
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>Alternative 3 - folder
All resources will have to be in the model_assets folder where the .qmd file of the post resides.
resources:
- "model_assets/"
include-in-header:
- text: |
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>Alternative 4 - copy all resources
resources:
- "*"
include-in-header:
- text: |
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>HTML code
Now we connect the resources to the keys in <model-viewer> tag. The below code should be of {=html} type in markdown code block.
<model-viewer
src="DamagedHelmet.glb"
alt="A 3D model of a helmet"
auto-rotate
camera-controls
environment-image="spruit_sunrise_1k_HDR.hdr"
skybox-image="spruit_sunrise_1k_HDR.hdr"
style="width: 100%; height: 500px; background-color: #f0f0f0;">
</model-viewer>Rendered model
This took a while to realize but was worth the headache! I did get some help from Gemini Pro 3 on how to use the resources tag in the front matter.