HTML <model> Element
Earlier this year Apple introduced the new HTML <model> element. Time to revisit and check it out to see what it is and when it can be used.
In January 2023, Apple introduced a new HTML <model> element. They released it behind the flag with the launch of Safari Technology Preview 161. This new HTML element allows front-end developers to include 3D models on websites.
Shortly after the announcement, I started playing around with it, setting up a quick demo page to see how it works. Quickly, I saw the potential benefits for the future. However, I kind of forgot about it as this feature is still too new and in development.
A few days later, I wanted to take a second look at this HTML element to see if it had been improved, mostly to write something about it for this blog. But the HTML <model> element was basically still the same as it was back then — no real improvement, and it has not been adopted by other internet browsers.
How to use the HTML <model> element
To use the new HTML <model> element. We need to enable the Feature Flag in Safari. We can do this by enabling the option “HTML <model> element.” After enabling this flag, I had to download a 3D model from the internet exported in the USDZ file format. USDZ stands for Universal Scene Description, a file format for 3D models introduced by Apple in collaboration with Pixar for its ARKit. NASA has some 3D models on their site that can be downloaded. So, I got a 3D model of our home planet Earth. The last part I needed was setting up the HTML. The required HTML is simple — just set up the <model> element with a source file, and we are done. The property interactive on the <model> element enables the option for the user to rotate the 3D model in their browser.
<model width="400" height="300" interactive> <source src=“earth.usdz" type="model/vnd.usdz+zip"> </model>
Safari will display this 3D model as shown in the screenshot below. One thing I noticed on my MacBook Pro from 2017 is that my computer can’t handle it. It works, but the fans are blowing very loud. This might be better on newer machines.
I wasn’t able to test it with animated 3D models as I couldn’t find animated 3D models in the correct file format. But I assume that animations are working.
In which cases is this HTML element useful?
After testing the HTML <model> element, one of the questions that arose was for whom is it and when can this be used. At this point in time, it is not ready for testing or production at all, but when Google and Firefox decide to adopt this HTML element, we are in for a ride. One use case I can think of is product display. Let’s take shoes, for example. A 3D model of the shoe is rendered in the browser, and you can look at the shoe in great detail and view it from any angle you want.
I really hope you all liked this first blog post, and I hope to keep in touch with all of you. To finish this blog post, I will end with a wise quote from one of my favorite games Nier Automata:
「未来は与えられるものではない、自分で掴み取らなければならないもの - ポッド042」— A future is not given to you, it is something you must take for yourself - pod 042