168 lines
6.4 KiB
HTML
168 lines
6.4 KiB
HTML
<!--
|
|
/* @license
|
|
* Copyright 2021 Google Inc. All Rights Reserved.
|
|
* Licensed under the Apache License, Version 2.0 (the 'License');
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an 'AS IS' BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
-->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title><model-viewer> Player</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
|
|
<meta name="color-scheme" content="dark light">
|
|
<link rel="shortcut icon" type="image/png" href="../../assets/favicon.png"/>
|
|
|
|
<script type="module" src="generator.js"></script>
|
|
<script defer src="https://web3dsurvey.com/collector.js"></script>
|
|
<script>
|
|
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
|
ga('create', 'UA-169901325-1', { 'storage': 'none' });
|
|
ga('set', 'referrer', document.referrer.split('?')[0]);
|
|
ga('set', 'anonymizeIp', true);
|
|
ga('send', 'pageview');
|
|
</script>
|
|
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
|
|
|
<style>
|
|
#player {
|
|
width: 480px;
|
|
height: 480px;
|
|
}
|
|
|
|
body {
|
|
height: 100%;
|
|
max-width: 700px;
|
|
margin: 1em;
|
|
text-align: left;
|
|
font-family: 'Rubik', sans-serif;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
font-weight: 400;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
input {
|
|
width: 40%;
|
|
}
|
|
|
|
input.full {
|
|
width: 100%;
|
|
}
|
|
|
|
.icon-modelviewer-black {
|
|
background-image: url(../../assets/ic_modelviewer.svg);
|
|
}
|
|
.icon-button {
|
|
margin-left: -4px;
|
|
margin-right: 8px;
|
|
width: 34px;
|
|
height: 34px;
|
|
background-size: 34px;
|
|
}
|
|
.inner-home {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 1.1em;
|
|
text-decoration: none;
|
|
}
|
|
.home {
|
|
padding: 20px;
|
|
overflow: auto;
|
|
white-space: nowrap;
|
|
}
|
|
.lockup {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 6px;
|
|
color: rgba(0,0,0,.87);
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
.lockup {
|
|
filter: invert(100%);
|
|
}
|
|
}
|
|
.attribute {
|
|
white-space: pre-wrap !important;
|
|
font-family: 'Roboto Mono', monospace;
|
|
color: black;
|
|
}
|
|
.attribute:hover {
|
|
text-decoration: underline;
|
|
color: #444444;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="home lockup">
|
|
<a href="../../" class="sidebar-mv inner-home">
|
|
<div class="icon-button icon-modelviewer-black inner-home"></div>
|
|
<div class="inner-home"><span class="attribute"><model-viewer></span></div>
|
|
</a>
|
|
</div>
|
|
|
|
<h1>3D Twitter card generator</h1>
|
|
<p>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.</p>
|
|
|
|
<iframe id="player"></iframe><br/>
|
|
|
|
<label for="url">Page Link:</label>
|
|
<input id="url" class="full" value="https://modelviewer.dev/"><br/>
|
|
|
|
<label for="glb">GLB/glTF URL:</label>
|
|
<input id="glb" class="full" value="https://modelviewer.dev/shared-assets/models/NeilArmstrong.glb"><br/>
|
|
|
|
<label for="description">Description:</label>
|
|
<input id="description" class="full" value="Neil Armstrong's Spacesuit from the Smithsonian Digitization Programs Office and National Air and Space Museum"><br/>
|
|
|
|
<p>Extra property = value (s):</p>
|
|
<input id="property" value="environmentImage"> = <input id="value" value="https://modelviewer.dev/shared-assets/environments/moon_1k.hdr"><br/>
|
|
<button id="add">+</button>
|
|
<p>Note that the properties use the JavaScript names, not the attribute names
|
|
(e.g. <code>environmentImage</code> rather than <code>environment-image</code>).
|
|
This works not just for the <code><model-viewer></code> properties,
|
|
but you can also specify <code>style</code> and put all of your desired CSS on the value side.</p>
|
|
|
|
<p>By default, this player sets the following attributes: <code>
|
|
shadow-intensity="1" autoplay ar camera-controls auto-rotate
|
|
interaction-prompt-threshold="1500"</code>.</p>
|
|
|
|
<button id="download">Download Poster & Thumbnail</button>
|
|
|
|
<p>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 <code>https://modelviewer.dev</code>.</p>
|
|
|
|
<p>Then copy the HTML snippet below, remix this <a href="https://glitch.com/edit/#!/model-viewer-twitter">Glitch</a>,
|
|
and replace the snippet in the <code><head></code>.
|
|
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 <a href="https://model-viewer-twitter.glitch.me">https://model-viewer-twitter.glitch.me</a>).</p>
|
|
|
|
<p>Alternatively, you can simply copy all but the last line (the redirect) into the <code><head></code>
|
|
of the page you want to link to, then use its URL directly in your tweet.</p>
|
|
|
|
<p>Be sure to test your URL on Twitter's <a href="https://cards-dev.twitter.com/validator">validator</a> 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.</p>
|
|
|
|
<button id="copy">Copy Snippet</button>
|
|
<pre>
|
|
<code id="display">
|
|
</code>
|
|
</pre>
|
|
</body> |