When you go to one of the big museums, you expect to see cool displays, cool interactives, gee-whiz digital wizardry. Smaller museums, not so much. I wanted to figure out what could be done for a smaller outfit. So I started playing.

I’ve had students make Pepper’s Ghost type displays in the past using cd jewel cases to make a truncated pyramid and then using a powerpoint template to mirror the recording of the model so that the recording appears in each face of the pyramid. But I want something more.

I want to be able to display a 3d digital object so that everyone clustered around the display sees the correct view – if you’re at the back, you see the back of the object while at the same time the person at the front sees the front. One lucky viewer could drive the thing using a mouse to spin it around, zoom in, zoom out, and everyone else would see the correct view. And why stop at a mouse? Why not use hand gestures to control the display? An ultra leap motion controller isn’t cheap, but it isn’t all that expensive either, about $260. So I thought it’d be good to figure out how to do that too.

The vision: simple software & reused hardware combined in an attractive mount, allowing visitors to interact with your 3d content without fancy goggles, or expensive components.

The positioning of that ultraleap motion controller, on second thought, would probably be better along the bottom front edge, so you don’t look like a maniac when you manipulate the digital 3d object. But I digress.

What you need

• 3d model file of an object or artefact (lots of different ways to achieve this. I’ll assume you’ve already got some. Otherwise go to somewhere like sketchfab.com and see if anything strikes your fancy from the free downloadable ones).
• a spare second monitor connected to your computer, or an ipad.
• ultra leap controller if you’ve got one, but not mission critical.
• clear acrylic sheet (11″ x 14″, $12, from Michael’s; other sizes are available. Go big!)
• pyramid template (I used this one from the Ontario Science Centre)
• some way of cutting the sheet.

Make the pyramid

I am not handy, and I ended up cutting my hand. I was using a draw-knife to cut the acyrlic sheet. I laid the template down and scaled it appropriately to make the most of my sheet (I ended up with a pyramid 15 cm x 15 cm across the base), traced the edges of the different faces of the pyramid onto the acrylic, and away I went. I used tape to hold it altogether. Were I more crafty I’d use some kind of clear glue. But for an experiment, this is fine.

Get the scripts

I spent some time cooking up two scripts. The first one is all you actually need: https://github.com/shawngraham/holoview (the second one is for the gesture control, see below).

The secret? It’s just a webpage! Just a single html file. It uses three.js https://threejs.org/, to handle loading the .obj, displaying it, and manipulating it.

To point it at your own model, you just change the filenames; the page is expecting an .obj file, a .mtl file, and a texture file in a subfolder. Those three files together specify the geometry and the look of the finished model. The lines in index.html that you’re looking for are lines 77 to 86 (the .mtl file itself has a line that points to the texture, so you shouldn’t need to worry about that):

const mtlLoader = new MTLLoader();
mtlLoader.setPath('dachshund/'); // change this to the name of the folder with your model

mtlLoader.load('Dachshund-bl.mtl', (materials) => { // change the name of the .mtl file
materials.preload();
const objLoader = new OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('dachshund/'); // change this to your folder again

objLoader.load('Dachshund-bl.obj', (obj) => { //and change this to the name of the .obj file

Now, assuming you have python on your computer, you can start a webserver in the folder that has your index.html file with python -m http.server 8000 and go to localhost:8000 and you’ll see the model correctly positioned. Spin the model, and the different views spin correctly to keep everything aligned.

If you don’t have python, or that sentence made no sense to you at all, zip your folder up (the one that has index.html and the subfolder with your model in it) and go to https://app.netlify.com/drop . Drag the zip folder onto the circle in the middle of the screen, and the Netlify service will set you up with a webaddress where you can see see your model arranged rather like this:

With a second spare monitor connected to your computer, drag your browser window over to that second monitor. Lay that monitor down flat. Place your pyramid broad side down. Make sure its brightness is turned up, then turn off the lights. Peer into the pyramid at eye level. Voilà! Your model floats in the air – and if you have friends gathered around, they will all see the correct aspect of the model from their vantage point. Use your mouse to spin or zoom the model.

If you put it online, then you can use an ipad, same idea. The index.html recongizes mouse and touch. If you took a copy of my script by forking, you can just turn on github pages and navigate to that, eg in my case, https://shawngraham.github.io/holoview/

The screenshot below is blurry because a) my hands shake and b) I made the acrylic dirty as I cobbled the thing together.

I intend to do this with a raspberry pi, and a spare monitor, where I 3d print a case for the monitor and the computer. I also intend to use gesture control so a visitor can move the model around with their hands, adding a sense-of-touch-at-one-remove, as it were. The script for gesture control is at https://github.com/shawngraham/mouseLeap . It’s still a little finicky, but if you only have the one browser window open when you run that script, it should work fine. Hey, it’s early days.

So there you have it. A single-page website that loads your model and handles displaying it and interacting with it so that, with a pyramid placed on the screen, the reflected images hang in space and can be viewed from four different directions correctly. The bigger the pyramid, the better.

A nice case will make this all seem much more polished. I mean, it’s a helluva lot cheaper than a Voxon. I mean, look what this person accomplished! https://www.instructables.com/Hologram-Display-Peppers-Ghost-Projector-Part-2/. And I’ll bet – though I don’t have any data to back this up yet – it would make for a much different visitor experience.