Skip to content

Commit 492c8c1

Browse files
jeev20jeev20
committed
adding 3d model rendering post - 2025-11-28 21:55:47]
1 parent a2a8c9a commit 492c8c1

6 files changed

Lines changed: 125 additions & 0 deletions

File tree

‎_freeze/posts/embedding3dmodelinquarto/index/execute-results/html.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"hash": "8824279bc35717e97d1cb63d4ee3179f",
3+
"result": {
4+
"engine": "jupyter",
5+
"markdown": "---\ntitle: Embedding 3D model in Quarto\ndescription: Interact with 3D models in a Quarto website\nauthor: \"Jeevith Hegde\"\ndate: 2025-11-28 19:03 +0100\nformat: html\ntoc: true\nlang: en\njupyter: python3\nresources: \n - DamagedHelmet.glb\n - spruit_sunrise_1k_HDR.hdr\n - poster.webp\ninclude-in-header:\n - text: |\n <script type=\"module\" src=\"https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js\"></script>\nipynb-shell-interactivity: all\nexecute:\n echo: false\ncategories: [\"3D-rendering\", \"model-viewer\"]\ntags: [\"3D visualization\"]\ncomments:\n giscus:\n repo: jeev20/jeev20.github.io\n---\n\nA couple of weeks back, I found about [Model viewer](https://modelviewer.dev/). 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!\n\nHowever, I had some challenges getting the `html` code to retrieve the 3D model and other resources in Quarto. \n\n## Front matter edits\nI had to add the below keys and values in the front matter of the this quarto post.\n\n### Alternative 1 - filenames\n```{.yaml}\nresources: \n - DamagedHelmet.glb\n - spruit_sunrise_1k_HDR.hdr\n - poster.webp\ninclude-in-header:\n - text: |\n <script type=\"module\" src=\"https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js\"></script>\n```\n### Alternative 2 - wildcards\n```{.yaml}\nresources:\n - \"*.glb\"\n - \"*.hdr\"\n - \"*.webp\"\ninclude-in-header:\n - text: |\n <script type=\"module\" src=\"https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js\"></script>\n```\n\n### Alternative 3 - folder\nAll resources will have to be in the `model_assets` folder where the `.qmd` file of the post resides.\n```{.yaml}\nresources:\n - \"model_assets/\"\ninclude-in-header:\n - text: |\n <script type=\"module\" src=\"https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js\"></script>\n```\n\n### Alternative 4 - copy all resources\n```{.yaml}\nresources:\n - \"*\"\ninclude-in-header:\n - text: |\n <script type=\"module\" src=\"https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js\"></script>\n```\n\n\n## HTML code\nNow we connect the resources to the keys in `<model-viewer>` tag. The below code should be of `{=html}` type in markdown code block.\n```{.html}\n<model-viewer \n src=\"DamagedHelmet.glb\" \n alt=\"A 3D model of a helmet\" \n auto-rotate \n camera-controls \n environment-image=\"spruit_sunrise_1k_HDR.hdr\"\n skybox-image=\"spruit_sunrise_1k_HDR.hdr\"\n style=\"width: 100%; height: 500px; background-color: #f0f0f0;\">\n</model-viewer>\n```\n\n\n## Rendered model\n\nThis 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. \n```{=html}\n<model-viewer \n src=\"DamagedHelmet.glb\" \n alt=\"A 3D model of a helmet\" \n auto-rotate \n camera-controls \n environment-image=\"spruit_sunrise_1k_HDR.hdr\"\n skybox-image=\"spruit_sunrise_1k_HDR.hdr\"\n style=\"width: 100%; height: 500px; background-color: #f0f0f0;\"\n>\n</model-viewer>\n\n```\n\n\n# References\n* [Model viewer](https://modelviewer.dev/)\n* [Model Viewer Editor](https://modelviewer.dev/editor/)\n\n",
6+
"supporting": [
7+
"index_files"
8+
],
9+
"filters": [],
10+
"includes": {}
11+
}
12+
}

‎index.qmd‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,4 @@ listing:
1111
page-layout: full
1212
title-block-banner: false
1313
---
14+

‎posts/embedding3dmodelinquarto/DamagedHelmet.glb‎

3.28 MB
Binary file not shown.

‎posts/embedding3dmodelinquarto/index.qmd‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
---
2+
title: Embedding 3D model in Quarto
3+
description: Interact with 3D models in a Quarto website
4+
author: "Jeevith Hegde"
5+
date: 2025-11-28 19:03 +0100
6+
format: html
7+
toc: true
8+
lang: en
9+
jupyter: python3
10+
resources:
11+
- DamagedHelmet.glb
12+
- spruit_sunrise_1k_HDR.hdr
13+
- poster.webp
14+
include-in-header:
15+
- text: |
16+
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
17+
ipynb-shell-interactivity: all
18+
execute:
19+
echo: false
20+
categories: ["3D-rendering", "model-viewer"]
21+
tags: ["3D visualization"]
22+
comments:
23+
giscus:
24+
repo: jeev20/jeev20.github.io
25+
---
26+
27+
A couple of weeks back, I found about [Model viewer](https://modelviewer.dev/). 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!
28+
29+
However, I had some challenges getting the `html` code to retrieve the 3D model and other resources in Quarto.
30+
31+
## Front matter edits
32+
I had to add the below keys and values in the front matter of the this quarto post.
33+
34+
### Alternative 1 - filenames
35+
```{.yaml}
36+
resources:
37+
- DamagedHelmet.glb
38+
- spruit_sunrise_1k_HDR.hdr
39+
- poster.webp
40+
include-in-header:
41+
- text: |
42+
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
43+
```
44+
### Alternative 2 - wildcards
45+
```{.yaml}
46+
resources:
47+
- "*.glb"
48+
- "*.hdr"
49+
- "*.webp"
50+
include-in-header:
51+
- text: |
52+
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
53+
```
54+
55+
### Alternative 3 - folder
56+
All resources will have to be in the `model_assets` folder where the `.qmd` file of the post resides.
57+
```{.yaml}
58+
resources:
59+
- "model_assets/"
60+
include-in-header:
61+
- text: |
62+
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
63+
```
64+
65+
### Alternative 4 - copy all resources
66+
```{.yaml}
67+
resources:
68+
- "*"
69+
include-in-header:
70+
- text: |
71+
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
72+
```
73+
74+
75+
## HTML code
76+
Now we connect the resources to the keys in `<model-viewer>` tag. The below code should be of `{=html}` type in markdown code block.
77+
```{.html}
78+
<model-viewer
79+
src="DamagedHelmet.glb"
80+
alt="A 3D model of a helmet"
81+
auto-rotate
82+
camera-controls
83+
environment-image="spruit_sunrise_1k_HDR.hdr"
84+
skybox-image="spruit_sunrise_1k_HDR.hdr"
85+
style="width: 100%; height: 500px; background-color: #f0f0f0;">
86+
</model-viewer>
87+
```
88+
89+
90+
## Rendered model
91+
92+
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.
93+
```{=html}
94+
<model-viewer
95+
src="DamagedHelmet.glb"
96+
alt="A 3D model of a helmet"
97+
auto-rotate
98+
camera-controls
99+
environment-image="spruit_sunrise_1k_HDR.hdr"
100+
skybox-image="spruit_sunrise_1k_HDR.hdr"
101+
style="width: 100%; height: 500px; background-color: #f0f0f0;"
102+
>
103+
</model-viewer>
104+
105+
```
106+
107+
108+
# References
109+
* [Model viewer](https://modelviewer.dev/)
110+
* [Model Viewer Editor](https://modelviewer.dev/editor/)
111+
112+

‎posts/embedding3dmodelinquarto/poster.webp‎

27.5 KB
Loading

‎posts/embedding3dmodelinquarto/spruit_sunrise_1k_HDR.hdr‎

1.43 MB
Binary file not shown.

0 commit comments

Comments
 (0)