Image for post
Image for post

TL;DR: There’s an amazing feature called AR Quick Look on iOS that allows you to preview 3D models. There’s a bunch of info on how to do this from inside native apps but not a lot of specifics (outside of WWDC talks) on how to use this feature from inside HTML/JavaScript. This page is an attempt to remedy that!

Note: I’ll be updating this post over at cwervo.com, but the Medium post may get out of date as it doesn’t support much of the formatting of the original blog post. For the original blog post go to: https://cwervo.com/writing/quicklook-web/

👋🏼

Did you know you can launch 3D models from a web page? There’s a helpful web component called <model-viewer> that will handle this for you. It'll look something like…


Photo of the Golden Gate bridge in San Francisco.
Photo of the Golden Gate bridge in San Francisco.

Because I want to ¯\_(ツ)_/¯

That’s it, that’s the whole post!

(Photo by Oliver Plattner on Unsplash)


Image for post
Image for post
A screen capture of a cube mid-spin on the Parc3l page.

WebAssembly has been interesting me lately, specifically the prospect of doing arithmetically-intensive operations with it, not unlike the fantastic physics engine Emscripten port Ammo.js. Compiling something like that is out of the scope of this little post (but should be getting easier!), and I’ve left some links at the bottom so you can clear more about WebAssembly if you’re interested.

As a simple example I put together Parc3l (live demo). It uses the Parcel bundler tool as a really convenient way to combine Three.js code with Rust in the same web page.

Image for post
Image for post
A screen recording of a rotating cube from https://parc3l.glitch.me/

All I did was install parcel, create a few files, and I was up and running! …

About

Andrés Cuervo

On The Things That Interest Me (Various, And Predictable) cwervo.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store