# Introducing the Enhanced Export3DToHtml Sample for HOOPS Publish

**URL:** <https://forum.techsoft3d.com/t/introducing-the-enhanced-export3dtohtml-sample-for-hoops-publish/4775>\
**Category:** HOOPS Visualize Web\
**Tags:** code, sample, webviewer, learn, how-to\
**Created:** [July 23, 2025, 7:42am UTC](https://forum.techsoft3d.com/t/introducing-the-enhanced-export3dtohtml-sample-for-hoops-publish/4775 "2025-07-23T07:42:03Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Toshi-TS3D](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.techsoft3d.com/toshi-ts3d/32/885_2.png) [@Toshi-TS3D](https://forum.techsoft3d.com/u/Toshi-TS3D)\
**Post date:** [July 23, 2025, 7:42am UTC](https://forum.techsoft3d.com/t/introducing-the-enhanced-export3dtohtml-sample-for-hoops-publish/4775/1 "2025-07-23T07:42:04Z")

</div>

# Introducing the Enhanced Export3DToHtml Sample for HOOPS Publish

I’d like to share an **enhanced version** of the `Export3DToHtml` sample that extends the capabilities of the standard example provided with the HOOPS Publish SDK. This project aims to offer a **more flexible and customizable base** for generating standalone, monolithic HTML 3D viewers.

**GitHub Repository:**

> **[GitHub - toshi-bata/Export3DToHtml\_temp\_build](https://github.com/toshi-bata/Export3DToHtml_temp_build)**
>
> Contribute to toshi-bata/Export3DToHtml\_temp\_build development by creating an account on GitHub.

* * *

## What’s New?

This sample builds upon the original by introducing:

- **Toggle controls** for UI components: model tree, toolbar, axis triad, and navigation cube
- **Injection points** for custom JavaScript, UI elements, and CSS styles

Side-by-side comparison:

| Original Sample | Enhanced Version |
| --- | --- |
| Sample HTML viewer | Modular, toggleable UI and custom extensibility |
| Static layout | Fragments-based HTML template assembly |

**Sample HTML viewer**

 ![image](https://us1.discourse-cdn.com/flex020/uploads/techsoft3d/original/2X/7/7f86835662a91b644ef1f7f8dee42d9795e81b22.jpeg)

**Enhanced Version**

 ![image](https://us1.discourse-cdn.com/flex020/uploads/techsoft3d/original/2X/f/f2885e4641bd713a526fd886c035731aa7dde86f.jpeg)

## Template Architecture

At the core is a new `HtmlTemplateBuilder` class, which assembles the monolithic HTML by combining fragment files located in the `template/` folder. These are modular pieces of the HTML (scripts, styles, UI blocks), and users can selectively enable features using **bitwise option flags** (e.g., `0011111`).

Each bit controls a specific UI module or extension point—such as custom JavaScript callbacks that run before the viewer initializes.

> Example: `0011111` disables standard UI except the Axis Triad and Nav Cube but injects custom styles, scripts, and body UI.

* * *

## Use Case Highlight

A key target for this project is exporting animated content built with the Animation Creator. With this enhanced sample, the animation logic can be embedded directly into a distributable HTML file—perfect for sharing:

- Assembly or maintenance procedures
- Simulation sequences
- Dynamic product presentations

**Live Demo (Animation Creator Export Example)**:

> **[Animation Creator](https://toshi-ts3d.click/animation_creator/animation_creator.html?viewer=SCS&proxy=on&instance=microengine&port=8887)**

 ![image](https://us1.discourse-cdn.com/flex020/uploads/techsoft3d/original/2X/d/d915c84ab036b263b7fc5d0d338643bef3aa5eb8.jpeg)

> This live demo showcases how animation results can be exported and viewed in a standalone, interactive monolithic HTML file using the enhanced `Export3DToHtml` pipeline.

**GitHub Repository:**

> **[GitHub - toshi-bata/animation\_creator](https://github.com/toshi-bata/animation_creator)**
>
> Contribute to toshi-bata/animation\_creator development by creating an account on GitHub.