Threshold 360 Tour Player

2016-2018 · ReactThreeJS

I created the player technology at Tampa startup Threshold 360. I left at the end of 2018, and some of the 2D overlay UI has changed, but otherwise it’s the same. I had never worked in 3D before, but the licensed tech we started with couldn’t produce the results we wanted, so I learned it and we built our own player. There are all sorts of fun experience details:

Watch the chasing glow lines around doors and the cutout that lets you see into the next scene as you step through.
Fullscreen works well in most browsers.
VR mode used to work pretty well with (then) large phones and a Google Cardboard.
The autoplay tours are planned to give you a view of the most interesting bits, but you can take over and navigate through scenes freely at any time.

And some fun implementation details:

There are a number of common projections of spherical images—we used a photo-cube.
I developed and the player uses a proprietary ts3 multi-resolution photo-cube image format, partly to make it harder for bots to steal our photography, partly for tidy file management.
When playing a tour, the player requests the first 100kB of the ts3 file for the current and next scene—which includes the manifest of all available images and (nearly always) the complete photo-cube at preview resolution—then higher resolution versions of the faces of the photo-cube, starting with the faces you’re looking at.
The camera doesn’t actually move from scene to scene: the scenes move away from and towards the camera.
The chasing outline on the door has a bit of prior art, at least as far as “glowing lines” in WebGL. The door cutout fade may have been independently created elsewhere, but I invented ours myself and I’ve never seen anything quite like it on the web.