Exporting 3D scene to a single HTML file

Sometimes you need your 3D model exported to a single HTML file, so it doesn’t have any dependencies and can be easily opened by any user anywhere with their browser just by double-clicking it. Think of it as a replacement of 3D PDF with more options and better materials.

Koru can do this by packing both 3D model, rendering engine and the selected export template into a single self-contained HTML file that you can then use the way you want.

Let’s do it step by step with some comments.

Making a simple scene

Run Koru and open its Shapes Library panel (click images to see them in full resolution):

Koru shapes library

Drag any shape into the working area to make a test scene:

Sample Koru scene

Note that you can use your own 3D model here, it doesn’t really matter. We just need a sample scene for our tutorial.

Now switch to Materials Library panel, select a material and drag onto the shape:

Applying gold material to 3D model in Koru

Once again, you can setup your own material if you like or leave everything by default.

Finally you can add some extra details to your scene like snapshots or callouts:

Adding callout in Koru

Rotate the scene around with your mouse in Koru and make sure it looks exactly the way you need. Leave the camera in the “default” position that you want the exported file to show and click the Export button:

Clicking the export button in Koru

You will see the Export Wizard window.

Export Wizard

At the first step of the Export Wizard you will be asked to select the export target. As we need a self-contained single HTML file, click the Disk option.

Koru export target selection

You will be asked to select HTML file for saving, then Koru will ask you to choose the template you want to use for export:

Selecting export template in Koru Export Wizard

Templates define the look of the exported HTML page, Koru viewport, texts, buttons and so on. You can read more about templates here. For now just select Minimalistic Fullscreen which simply uses the whole page for 3D model and is probably the best candidate for single-file export.

Then click Next to see the export options:

Koru export options

The first HTML Title option lets you specify the web page title that will be displayed in browser. Some templates also display it above the 3D preview as a real title.

The next option lets you add so-called “no-script” block that displays a nice error message to the user if their browser does not support JavaScript. That must be a very old browser or a very suspicious user, so in most cases you can simply leave it unchecked.

The third option lets you pack the HTML file into ZIP which is good for sending by email. Single-file 3D scenes usually have larger size (compared to server-exported files) as HTML files can’t contain binary data, so Koru can’t pack 3D models effectively. Saving scene to ZIP helps reducing file size for sending by email or sharing it online.

You can also configure textures downscaling options here if you have a Koru license.

Make the adjustments you need and click Next button to start export.

Getting Results

Once you click Next button Koru will start exporting the scene:

Koru exporting a scene

Then a few seconds later you’ll see the results page of the Export Wizard:

Koru exporting results

Here you can ask Koru to open the exported file in browser and/or open the folder with the exported file in Explorer or Finder, depending on your operating system.

Testing Exported File

Leave the Open HTML in browser option checked and click Done to complete the export. You should see the browser page with your interactive 3D model. Share the exported HTML file the way you want, as everything is packed there.

Exported 3D model in browser

So it took us just a couple of minutes to make a 3D shape, apply materials, add callouts and get a nice looking self-contained HTML file with that 3D model. Perfect!

Note that although you can easily upload it to your site and it will work there, it is generally not a good idea to use single-file models for web sites. Check the “server” export option for more details on that.

That’s All

That’s not the only one export option in Koru, here are some more: