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):

Drag any shape into the working area to make a test 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:

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:

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:

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.

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:

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:

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:

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

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.

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:

• Export for Server — when you want to upload 3d models to your website;
• Export for WordPress — running a WordPress website? Have a look here;
• Koru Cloud — the easiest way to get your 3D scenes online in just a few clicks;
• Downloading from Koru Cloud — getting your scenes back from the cloud.