Use this page to create custom markup for your site and get interactive 3D in any tweet linking to it. The below is only an example; replace the entries with your own data and see a live preview of what will be embedded in your tweet. See Twitter's validator below to view the complete experience. Note this page supports both light and dark browser themes to help with testing what different Twitter users will see.
Extra property = value (s):
=Note that the properties use the JavaScript names, not the attribute names
(e.g. environmentImage rather than environment-image).
This works not just for the <model-viewer> properties,
but you can also specify style and put all of your desired CSS on the value side.
By default, this player sets the following attributes:
shadow-intensity="1" autoplay ar camera-controls auto-rotate
interaction-prompt-threshold="1500".
Download the poster and card image and serve them from the same path as you serve your GLB/glTF model above.
They can't be the same image because different aspect ratios are required.
Ensure your model is served with permissive CORS headers so that it can be loaded by https://modelviewer.dev.
Then copy the HTML snippet below, remix this Glitch,
and replace the snippet in the <head>.
This allows you to make your twitter embed without changing the site it points to, so you can also make
different embeds that point to the same site (you put the link to your remixed Glitch site in your tweet,
like https://model-viewer-twitter.glitch.me).
Alternatively, you can simply copy all but the last line (the redirect) into the <head>
of the page you want to link to, then use its URL directly in your tweet.
Be sure to test your URL on Twitter's validator to see how it will look in a tweet and to ensure the URLs are working right. Unfortunately, their validator messes up the encoding of special characters, so if it seems like certain extras are not being respected, just go ahead and tweet it; we've found it works better in Twitter than the validator.