Adding 3D Models to Websites by Drag-and-drop
TreasureChest: link
(note: it should work just fine with any previously created WhyDungeons / WTL Studio account 
)
What it is
TreasureChest is a public extension of asset hosting I use to build WhyDungeons. It allows uploading 3D models / textures, sharing, and embedding them in places (see below for details on those places👇 )
In short - it’s a tiny, global CDN for tiny, global assets. Perfect for prototyping, hosting, also for these moments when it’s 3AM and you just want to test something real quick, but gh-pages fills your console with CORS alerts and you start questioning your life choices. :’)
What it is not
It’s not a very private asset hosting - if you share the URL of your model with someone, they’ll be able to access it. It’s generally hard to keep 3D assets secure on web anyway - so consider anything hosted on TreasureChest public (if your model is under NDA, you have been warned 
)
It’s also not a paid, subscription-based, free-but-give-us-your-credit-card-details-just-in-case SaaS - it does use WTL architecture for maturity sake, but that $80 price tag doesn’t apply.
CDN Limits
Max. asset size: 5 MB
Cache refresh: >2 hrs
File types: most model formats handled by three have a live model preview; most image types have a live texture preview; other file types can still be hosted, but will not have a preview.
How to host a model for an app 
Expand step-by-step
- Log in.
- Drag and drop the model over the TreasureChest to upload it.
- When upload finishes and preview is visible, click the
Copy URLbutton. - You can use that URL directly in loaders:
new GLTFLoader().load('https://cdn.wtlstudio.com/sample.wtlstudio.com/7c26802e-269d-4029-93a5-ac9dd5af60e6.glb', gltf => {
scene.add(gltf.scene);
});
(For production builds and demanding apps, it’s still probably recommend to bundle the models with the app - or at least to cache them. CDN can be great for testing, but even tiny requests will likely take more time than reading assets locally.)
How to embed a model on any non-3D website 
Expand step-by-step
- Log in.
- Drag and drop the model over the TreasureChest to upload it.
- When upload finishes and preview is visible, hover over the copy button and choose
Copy as HTML. - HTML snippet will be copied to the clipboard.
- You can paste this snippet inside any HTML tag element on a website to display a 3D model within that HTML element.
What exactly happens in the 50 lines of this <script> snippet:
- Three and necessary loaders are fetched from unpkg.com.
- Canvas is created to fit the HTML node you paste the script in (be sure to give the parent div a bit of width and height, otherwise the canvas will span to 0 by 0 pixels
) - Model is loaded from TreasureChest and rendered on the scene.
- OrbitControls are added to the scene. Feel free to remove them if you want a static model.
- After everything is loaded and set - the script will remove itself. If you browse the DOM tree after loading the page, you will only see the
<canvas>element.
Mind, loading script uses ES6 modules. If you support IE or older browsers, it may not work.
If you receive a shared TreasureChest model, you can embed it the same way from the preview screen copy dropdown.
How to create Three.js Codepen in like 5 seconds 
Expand step-by-step
- Log in.
- Drag and drop the model over the TreasureChest to upload it.
- When upload finishes and preview is visible, hover over the copy button and choose
Open in Codepen. - Using the magic of Codepen Prefill API, TreasureChest will generate a new codepen for you - all set up, minimal code boilerplate, your model waiting in the centre of the scene.
A few details about the Codepen setup:
- Even if you are logged in, Codepen will not automatically save the created pen. If you want to keep it - remember to save it manually.
- There’s a vanity tag in HTML editor. In case it is very unwanted there, feel free to delete it (if it’s super invasive, I will remove it altogether.)
- Model scale is automatically adjusted to fit within the viewport. If you do not want that to happen, you can remove scaling in the loader callback.
- Scene does not have any environment set. If your model relies heavily on PBR, do not forget to add it.
- Scene does have a single HemisphereLight - with light yellow sun and dimmed blue ground.
-
bodyelement has margin set to0- keep that in mind in case you’d like to add some UI.
What about offline apps?
Since TreasureChest is a CDN - it obviously won’t be much helpful when the app allows offline use (ex. in a PWA app.) In this case, you can try caching the assets offline after downloading them.
Credits
Cute placeholder Bunny Toy by ItDoes-Interactive 
Pikachu & Pokeballs generated from heszele & patrickfanart models 
Gradient screenshots kinda heavily based on gsimone’s pretty swizzle tweets 