Architectural Documentation
The code is separated into two logical parts: the engine and the website.
Source: source/engine.
The main goal of the engine to provide a reusable 3D model viewer functionality. The engine contains all the import, export, and visualization logics, and it is designed to be embedded in any website. The engine depends on some third-party libraries, the most important one is three.js.
Source: source/website for javascript, website for html and css.
The website contains all the code for the web application that you see at 3dviewer.net. The website uses the engine under the hood, and contains only the codes that needed for the web application to work.
Actually, there are two sites. One that you see when you visit the page (index.html), and one that you see when you embed the page (embed.html). The embedded page is a simplified version of the website without any controls, but you can modify almost every settings of the website using url parameters.
The most important architectural choice is the presence of the internal model format. Every 3D model is converted to the internal format, and it's converted to the three.js model format. This makes available for all the functionality to be independent of the format of the input model.
The figure below shows the conversion flow between the model formats, and explains which model is used for what.
The whole conversion process is grouped together in the ThreeModelLoader class. It gets a list of files, and the returns both the internal and the three.js models. It can work on both file urls and file binary objects.
The website is a single-page application. The functionality is separated into several classes, and the Website class gathers all together.
Parts of the website:
- Header: Place of the logo and some icon buttons.
- Toolbar: Set of actions that are operating on the whole model.
- Navigator: Interface for navigating in the model from several aspects.
-
Sidebar:
- Interface for showing information about the whole model or the selection.
- Interface for modifying the settings of the application.
- Viewer: The canvas to display the model.
The code of the website is not packed into one file, because with all the dependencies it would end up in a really large file, and most of the users don't need all of the dependencies. So external libraries are delay loaded (with the exception of three.js itself, because it needs to be loaded before the engine or website code).
The LoadExternalLibrary function loads the file at the given path. The path should be relative to the path set by the SetExternalLibLocation function. All external libraries can be found in the libs folder.