Doni/ModelHandle
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restructure documentation.

Browse Source
This commit is contained in:
kovacsv 2023-01-10 22:59:45 +01:00
parent d992235722
commit 68cdf2f3eb
23 changed files with 724 additions and 215 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
docs/Camera.html
View File

@ -24,6 +24,15 @@
<div id="nav-GitHub" class="navigation_item"><a href="https://github.com/kovacsv/Online3DViewer" target="_blank">GitHub</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Engine Usage</div>
<div id="nav-Installation" class="navigation_item"><a href="Installation.html" target="_self">Installation</a></div>
<div id="nav-Usage" class="navigation_item"><a href="Usage.html" target="_self">Usage</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Contribution</div>
<div id="nav-Set Up Environment" class="navigation_item"><a href="SetUpEnvironment.html" target="_self">Set Up Environment</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Classes</div>
<div id="nav-Camera" class="navigation_item"><a href="Camera.html" target="_self">Camera</a></div>
<div id="nav-EdgeSettings" class="navigation_item"><a href="EdgeSettings.html" target="_self">EdgeSettings</a></div>

9
docs/CameraMode.html
View File

@ -24,6 +24,15 @@
<div id="nav-GitHub" class="navigation_item"><a href="https://github.com/kovacsv/Online3DViewer" target="_blank">GitHub</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Engine Usage</div>
<div id="nav-Installation" class="navigation_item"><a href="Installation.html" target="_self">Installation</a></div>
<div id="nav-Usage" class="navigation_item"><a href="Usage.html" target="_self">Usage</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Contribution</div>
<div id="nav-Set Up Environment" class="navigation_item"><a href="SetUpEnvironment.html" target="_self">Set Up Environment</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Classes</div>
<div id="nav-Camera" class="navigation_item"><a href="Camera.html" target="_self">Camera</a></div>
<div id="nav-EdgeSettings" class="navigation_item"><a href="EdgeSettings.html" target="_self">EdgeSettings</a></div>

9
docs/EdgeSettings.html
View File

@ -24,6 +24,15 @@
<div id="nav-GitHub" class="navigation_item"><a href="https://github.com/kovacsv/Online3DViewer" target="_blank">GitHub</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Engine Usage</div>
<div id="nav-Installation" class="navigation_item"><a href="Installation.html" target="_self">Installation</a></div>
<div id="nav-Usage" class="navigation_item"><a href="Usage.html" target="_self">Usage</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Contribution</div>
<div id="nav-Set Up Environment" class="navigation_item"><a href="SetUpEnvironment.html" target="_self">Set Up Environment</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Classes</div>
<div id="nav-Camera" class="navigation_item"><a href="Camera.html" target="_self">Camera</a></div>
<div id="nav-EdgeSettings" class="navigation_item"><a href="EdgeSettings.html" target="_self">EdgeSettings</a></div>

9
docs/EmbeddedViewer.html
View File

@ -24,6 +24,15 @@
<div id="nav-GitHub" class="navigation_item"><a href="https://github.com/kovacsv/Online3DViewer" target="_blank">GitHub</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Engine Usage</div>
<div id="nav-Installation" class="navigation_item"><a href="Installation.html" target="_self">Installation</a></div>
<div id="nav-Usage" class="navigation_item"><a href="Usage.html" target="_self">Usage</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Contribution</div>
<div id="nav-Set Up Environment" class="navigation_item"><a href="SetUpEnvironment.html" target="_self">Set Up Environment</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Classes</div>
<div id="nav-Camera" class="navigation_item"><a href="Camera.html" target="_self">Camera</a></div>
<div id="nav-EdgeSettings" class="navigation_item"><a href="EdgeSettings.html" target="_self">EdgeSettings</a></div>

9
docs/EnvironmentSettings.html
View File

@ -24,6 +24,15 @@
<div id="nav-GitHub" class="navigation_item"><a href="https://github.com/kovacsv/Online3DViewer" target="_blank">GitHub</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Engine Usage</div>
<div id="nav-Installation" class="navigation_item"><a href="Installation.html" target="_self">Installation</a></div>
<div id="nav-Usage" class="navigation_item"><a href="Usage.html" target="_self">Usage</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Contribution</div>
<div id="nav-Set Up Environment" class="navigation_item"><a href="SetUpEnvironment.html" target="_self">Set Up Environment</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Classes</div>
<div id="nav-Camera" class="navigation_item"><a href="Camera.html" target="_self">Camera</a></div>
<div id="nav-EdgeSettings" class="navigation_item"><a href="EdgeSettings.html" target="_self">EdgeSettings</a></div>

9
docs/FileSource.html
View File

@ -24,6 +24,15 @@
<div id="nav-GitHub" class="navigation_item"><a href="https://github.com/kovacsv/Online3DViewer" target="_blank">GitHub</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Engine Usage</div>
<div id="nav-Installation" class="navigation_item"><a href="Installation.html" target="_self">Installation</a></div>
<div id="nav-Usage" class="navigation_item"><a href="Usage.html" target="_self">Usage</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Contribution</div>
<div id="nav-Set Up Environment" class="navigation_item"><a href="SetUpEnvironment.html" target="_self">Set Up Environment</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Classes</div>
<div id="nav-Camera" class="navigation_item"><a href="Camera.html" target="_self">Camera</a></div>
<div id="nav-EdgeSettings" class="navigation_item"><a href="EdgeSettings.html" target="_self">EdgeSettings</a></div>

9
docs/Init3DViewerElement.html
View File

@ -24,6 +24,15 @@
<div id="nav-GitHub" class="navigation_item"><a href="https://github.com/kovacsv/Online3DViewer" target="_blank">GitHub</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Engine Usage</div>
<div id="nav-Installation" class="navigation_item"><a href="Installation.html" target="_self">Installation</a></div>
<div id="nav-Usage" class="navigation_item"><a href="Usage.html" target="_self">Usage</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Contribution</div>
<div id="nav-Set Up Environment" class="navigation_item"><a href="SetUpEnvironment.html" target="_self">Set Up Environment</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Classes</div>
<div id="nav-Camera" class="navigation_item"><a href="Camera.html" target="_self">Camera</a></div>
<div id="nav-EdgeSettings" class="navigation_item"><a href="EdgeSettings.html" target="_self">EdgeSettings</a></div>

9
docs/Init3DViewerElements.html
View File

@ -24,6 +24,15 @@
<div id="nav-GitHub" class="navigation_item"><a href="https://github.com/kovacsv/Online3DViewer" target="_blank">GitHub</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Engine Usage</div>
<div id="nav-Installation" class="navigation_item"><a href="Installation.html" target="_self">Installation</a></div>
<div id="nav-Usage" class="navigation_item"><a href="Usage.html" target="_self">Usage</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Contribution</div>
<div id="nav-Set Up Environment" class="navigation_item"><a href="SetUpEnvironment.html" target="_self">Set Up Environment</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Classes</div>
<div id="nav-Camera" class="navigation_item"><a href="Camera.html" target="_self">Camera</a></div>
<div id="nav-EdgeSettings" class="navigation_item"><a href="EdgeSettings.html" target="_self">EdgeSettings</a></div>

9
docs/InputFile.html
View File

@ -24,6 +24,15 @@
<div id="nav-GitHub" class="navigation_item"><a href="https://github.com/kovacsv/Online3DViewer" target="_blank">GitHub</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Engine Usage</div>
<div id="nav-Installation" class="navigation_item"><a href="Installation.html" target="_self">Installation</a></div>
<div id="nav-Usage" class="navigation_item"><a href="Usage.html" target="_self">Usage</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Contribution</div>
<div id="nav-Set Up Environment" class="navigation_item"><a href="SetUpEnvironment.html" target="_self">Set Up Environment</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Classes</div>
<div id="nav-Camera" class="navigation_item"><a href="Camera.html" target="_self">Camera</a></div>
<div id="nav-EdgeSettings" class="navigation_item"><a href="EdgeSettings.html" target="_self">EdgeSettings</a></div>

87
docs/Installation.html Normal file
View File

@ -0,0 +1,87 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="icon" type="image/png" href="static/3dviewer_net_favicon.ico">
<title>Online 3D Viewer - Installation</title>
<link rel="stylesheet" href="static/highlightjs/styles/github.min.css"/>
<script src="static/highlightjs/highlight.min.js"></script>
<link rel="stylesheet" type="text/css" href="static/style.css"/>
<script type="text/javascript" src="static/script.js"></script>
</head>
<body>
<div id="navigation_toggle" class="navigation_toggle"><img id="navigation_icon" src="static/menu.svg"/></div>
<div id="navigation" class="navigation thin_scrollbar">
<div class="navigation_section">
<div class="navigation_title">Pages</div>
<div id="nav-Home" class="navigation_item"><a href="index.html" target="_self">Home</a></div>
<div id="nav-GitHub" class="navigation_item"><a href="https://github.com/kovacsv/Online3DViewer" target="_blank">GitHub</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Engine Usage</div>
<div id="nav-Installation" class="navigation_item"><a href="Installation.html" target="_self">Installation</a></div>
<div id="nav-Usage" class="navigation_item"><a href="Usage.html" target="_self">Usage</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Contribution</div>
<div id="nav-Set Up Environment" class="navigation_item"><a href="SetUpEnvironment.html" target="_self">Set Up Environment</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Classes</div>
<div id="nav-Camera" class="navigation_item"><a href="Camera.html" target="_self">Camera</a></div>
<div id="nav-EdgeSettings" class="navigation_item"><a href="EdgeSettings.html" target="_self">EdgeSettings</a></div>
<div id="nav-EmbeddedViewer" class="navigation_item"><a href="EmbeddedViewer.html" target="_self">EmbeddedViewer</a></div>
<div id="nav-EnvironmentSettings" class="navigation_item"><a href="EnvironmentSettings.html" target="_self">EnvironmentSettings</a></div>
<div id="nav-InputFile" class="navigation_item"><a href="InputFile.html" target="_self">InputFile</a></div>
<div id="nav-RGBAColor" class="navigation_item"><a href="RGBAColor.html" target="_self">RGBAColor</a></div>
<div id="nav-RGBColor" class="navigation_item"><a href="RGBColor.html" target="_self">RGBColor</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Functions</div>
<div id="nav-Init3DViewerElement" class="navigation_item"><a href="Init3DViewerElement.html" target="_self">Init3DViewerElement</a></div>
<div id="nav-Init3DViewerElements" class="navigation_item"><a href="Init3DViewerElements.html" target="_self">Init3DViewerElements</a></div>
<div id="nav-SetExternalLibLocation" class="navigation_item"><a href="SetExternalLibLocation.html" target="_self">SetExternalLibLocation</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Enums</div>
<div id="nav-CameraMode" class="navigation_item"><a href="CameraMode.html" target="_self">CameraMode</a></div>
<div id="nav-FileSource" class="navigation_item"><a href="FileSource.html" target="_self">FileSource</a></div>
</div>
</div>
<div id="main" class="main">
<div class="page">
<h1>Installation</h1>
<p>The recommended way to install the engine is to get it as an NPM package. In some cases it's not possible, so a browser-ready bundle is available for download and add directly to a html file.</p>
<h2>Install from NPM (recommended)</h2>
<p>The engine is available as an NPM package called <a href="https://www.npmjs.com/package/online-3d-viewer" target="_blank">online-3d-viewer</a>. The package itself is an ES6 module, so it can be used with several different bundlers.</p>
<p>You can install it by running the following command.</p>
<pre><code class="language-plaintext">npm install online-3d-viewer</code></pre>
<p>After installation you can import it like any other packages.</p>
<pre><code class="language-js">import * as OV from 'online-3d-viewer';</code></pre>
<h2>Download as browser-ready bundle</h2>
<p>A bundle is available for every release. You need to download the zip file attached to the <a href="https://github.com/kovacsv/Online3DViewer/releases">latest release</a>. After that, copy the content of the zip file on your server, and include the main file on your site.</p>
<pre><code class="language-html">&lt;script type="text/javascript" src="o3dv.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
<script type="text/javascript">Init ('Installation')</script>
</body>
</html>

9
docs/RGBAColor.html
View File

@ -24,6 +24,15 @@
<div id="nav-GitHub" class="navigation_item"><a href="https://github.com/kovacsv/Online3DViewer" target="_blank">GitHub</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Engine Usage</div>
<div id="nav-Installation" class="navigation_item"><a href="Installation.html" target="_self">Installation</a></div>
<div id="nav-Usage" class="navigation_item"><a href="Usage.html" target="_self">Usage</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Contribution</div>
<div id="nav-Set Up Environment" class="navigation_item"><a href="SetUpEnvironment.html" target="_self">Set Up Environment</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Classes</div>
<div id="nav-Camera" class="navigation_item"><a href="Camera.html" target="_self">Camera</a></div>
<div id="nav-EdgeSettings" class="navigation_item"><a href="EdgeSettings.html" target="_self">EdgeSettings</a></div>

9
docs/RGBColor.html
View File

@ -24,6 +24,15 @@
<div id="nav-GitHub" class="navigation_item"><a href="https://github.com/kovacsv/Online3DViewer" target="_blank">GitHub</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Engine Usage</div>
<div id="nav-Installation" class="navigation_item"><a href="Installation.html" target="_self">Installation</a></div>
<div id="nav-Usage" class="navigation_item"><a href="Usage.html" target="_self">Usage</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Contribution</div>
<div id="nav-Set Up Environment" class="navigation_item"><a href="SetUpEnvironment.html" target="_self">Set Up Environment</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Classes</div>
<div id="nav-Camera" class="navigation_item"><a href="Camera.html" target="_self">Camera</a></div>
<div id="nav-EdgeSettings" class="navigation_item"><a href="EdgeSettings.html" target="_self">EdgeSettings</a></div>

9
docs/SetExternalLibLocation.html
View File

@ -24,6 +24,15 @@
<div id="nav-GitHub" class="navigation_item"><a href="https://github.com/kovacsv/Online3DViewer" target="_blank">GitHub</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Engine Usage</div>
<div id="nav-Installation" class="navigation_item"><a href="Installation.html" target="_self">Installation</a></div>
<div id="nav-Usage" class="navigation_item"><a href="Usage.html" target="_self">Usage</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Contribution</div>
<div id="nav-Set Up Environment" class="navigation_item"><a href="SetUpEnvironment.html" target="_self">Set Up Environment</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Classes</div>
<div id="nav-Camera" class="navigation_item"><a href="Camera.html" target="_self">Camera</a></div>
<div id="nav-EdgeSettings" class="navigation_item"><a href="EdgeSettings.html" target="_self">EdgeSettings</a></div>

126
docs/SetUpEnvironment.html Normal file
View File

@ -0,0 +1,126 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="icon" type="image/png" href="static/3dviewer_net_favicon.ico">
<title>Online 3D Viewer - Set Up Environment</title>
<link rel="stylesheet" href="static/highlightjs/styles/github.min.css"/>
<script src="static/highlightjs/highlight.min.js"></script>
<link rel="stylesheet" type="text/css" href="static/style.css"/>
<script type="text/javascript" src="static/script.js"></script>
</head>
<body>
<div id="navigation_toggle" class="navigation_toggle"><img id="navigation_icon" src="static/menu.svg"/></div>
<div id="navigation" class="navigation thin_scrollbar">
<div class="navigation_section">
<div class="navigation_title">Pages</div>
<div id="nav-Home" class="navigation_item"><a href="index.html" target="_self">Home</a></div>
<div id="nav-GitHub" class="navigation_item"><a href="https://github.com/kovacsv/Online3DViewer" target="_blank">GitHub</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Engine Usage</div>
<div id="nav-Installation" class="navigation_item"><a href="Installation.html" target="_self">Installation</a></div>
<div id="nav-Usage" class="navigation_item"><a href="Usage.html" target="_self">Usage</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Contribution</div>
<div id="nav-Set Up Environment" class="navigation_item"><a href="SetUpEnvironment.html" target="_self">Set Up Environment</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Classes</div>
<div id="nav-Camera" class="navigation_item"><a href="Camera.html" target="_self">Camera</a></div>
<div id="nav-EdgeSettings" class="navigation_item"><a href="EdgeSettings.html" target="_self">EdgeSettings</a></div>
<div id="nav-EmbeddedViewer" class="navigation_item"><a href="EmbeddedViewer.html" target="_self">EmbeddedViewer</a></div>
<div id="nav-EnvironmentSettings" class="navigation_item"><a href="EnvironmentSettings.html" target="_self">EnvironmentSettings</a></div>
<div id="nav-InputFile" class="navigation_item"><a href="InputFile.html" target="_self">InputFile</a></div>
<div id="nav-RGBAColor" class="navigation_item"><a href="RGBAColor.html" target="_self">RGBAColor</a></div>
<div id="nav-RGBColor" class="navigation_item"><a href="RGBColor.html" target="_self">RGBColor</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Functions</div>
<div id="nav-Init3DViewerElement" class="navigation_item"><a href="Init3DViewerElement.html" target="_self">Init3DViewerElement</a></div>
<div id="nav-Init3DViewerElements" class="navigation_item"><a href="Init3DViewerElements.html" target="_self">Init3DViewerElements</a></div>
<div id="nav-SetExternalLibLocation" class="navigation_item"><a href="SetExternalLibLocation.html" target="_self">SetExternalLibLocation</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Enums</div>
<div id="nav-CameraMode" class="navigation_item"><a href="CameraMode.html" target="_self">CameraMode</a></div>
<div id="nav-FileSource" class="navigation_item"><a href="FileSource.html" target="_self">FileSource</a></div>
</div>
</div>
<div id="main" class="main">
<div class="page">
<h1>Set Up the Development Environment</h1>
<p>This document helps you setting up the developer environment. It is useful if you would like to contribute to the codebase of the engine or the website.</p>
<h2>Quick Start</h2>
<p>After cloning the repository run these commands from the root directory.</p>
<pre><code class="language-plaintext">npm install
npm start</code></pre>
<p>This will compile the development version of the code and start a web server. Now you can open <code class="inline">http://localhost:8080</code> to check the result.</p>
<h2>Source Structure</h2>
<p>The source contains the following folders.</p>
<ul>
<li><b>assets:</b> Various assets used in the code or in any other media platforms.</li>
<li><b>docs:</b> Code of this documentation.</li>
<li><b>libs:</b> External libraries used by the solution.</li>
<li><b>sandbox:</b> Various examples mostly for using the engine.</li>
<li><b>source:</b> Source code of the engine and the website.
<ul>
<li><b>engine:</b> Source code of the engine. It doesn't contain any website specific codes.</li>
<li><b>website:</b> Source code of the website.</li>
</ul>
</li>
<li><b>test:</b> Automatic tests for the engine.</li>
<li><b>tools:</b> Tools for building the library.</li>
<li><b>website:</b> Static resources for the website.</li>
</ul>
<h2>Scripts</h2>
<p>Several scripts are available for building, testing and publishing.</p>
<p><b>Building</b></p>
<ul>
<li><code class="inline">npm run build_dev</code>: Builds the development version of the engine and the website.</li>
<li><code class="inline">npm run build_engine_dev</code>: Builds the development version of the engine.</li>
<li><code class="inline">npm run build_engine_prod</code>: Builds the production version of the engine.</li>
<li><code class="inline">npm run build_website_dev</code>: Builds the development version of the website.</li>
<li><code class="inline">npm run build_website_prod</code>: Builds the production version of the website.</li>
</ul>
<p><b>Testing</b></p>
<ul>
<li><code class="inline">npm run test</code>: Runs all unit tests.</li>
<li><code class="inline">npm run lint</code>: Runs eslint on the codebase.</li>
</ul>
<p><b>Packaging</b></p>
<ul>
<li><code class="inline">npm run create_package</code>: Generates the production version of the engine and the website.</li>
<li><code class="inline">npm run create_dist</code>: Generates the production version of the engine and the website, and runs all the possible checks.</li>
</ul>
</div>
</div>
<script type="text/javascript">Init ('Set Up Environment')</script>
</body>
</html>

146
docs/Usage.html Normal file
View File

@ -0,0 +1,146 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="icon" type="image/png" href="static/3dviewer_net_favicon.ico">
<title>Online 3D Viewer - Usage</title>
<link rel="stylesheet" href="static/highlightjs/styles/github.min.css"/>
<script src="static/highlightjs/highlight.min.js"></script>
<link rel="stylesheet" type="text/css" href="static/style.css"/>
<script type="text/javascript" src="static/script.js"></script>
</head>
<body>
<div id="navigation_toggle" class="navigation_toggle"><img id="navigation_icon" src="static/menu.svg"/></div>
<div id="navigation" class="navigation thin_scrollbar">
<div class="navigation_section">
<div class="navigation_title">Pages</div>
<div id="nav-Home" class="navigation_item"><a href="index.html" target="_self">Home</a></div>
<div id="nav-GitHub" class="navigation_item"><a href="https://github.com/kovacsv/Online3DViewer" target="_blank">GitHub</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Engine Usage</div>
<div id="nav-Installation" class="navigation_item"><a href="Installation.html" target="_self">Installation</a></div>
<div id="nav-Usage" class="navigation_item"><a href="Usage.html" target="_self">Usage</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Contribution</div>
<div id="nav-Set Up Environment" class="navigation_item"><a href="SetUpEnvironment.html" target="_self">Set Up Environment</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Classes</div>
<div id="nav-Camera" class="navigation_item"><a href="Camera.html" target="_self">Camera</a></div>
<div id="nav-EdgeSettings" class="navigation_item"><a href="EdgeSettings.html" target="_self">EdgeSettings</a></div>
<div id="nav-EmbeddedViewer" class="navigation_item"><a href="EmbeddedViewer.html" target="_self">EmbeddedViewer</a></div>
<div id="nav-EnvironmentSettings" class="navigation_item"><a href="EnvironmentSettings.html" target="_self">EnvironmentSettings</a></div>
<div id="nav-InputFile" class="navigation_item"><a href="InputFile.html" target="_self">InputFile</a></div>
<div id="nav-RGBAColor" class="navigation_item"><a href="RGBAColor.html" target="_self">RGBAColor</a></div>
<div id="nav-RGBColor" class="navigation_item"><a href="RGBColor.html" target="_self">RGBColor</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Functions</div>
<div id="nav-Init3DViewerElement" class="navigation_item"><a href="Init3DViewerElement.html" target="_self">Init3DViewerElement</a></div>
<div id="nav-Init3DViewerElements" class="navigation_item"><a href="Init3DViewerElements.html" target="_self">Init3DViewerElements</a></div>
<div id="nav-SetExternalLibLocation" class="navigation_item"><a href="SetExternalLibLocation.html" target="_self">SetExternalLibLocation</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Enums</div>
<div id="nav-CameraMode" class="navigation_item"><a href="CameraMode.html" target="_self">CameraMode</a></div>
<div id="nav-FileSource" class="navigation_item"><a href="FileSource.html" target="_self">FileSource</a></div>
</div>
</div>
<div id="main" class="main">
<div class="page">
<h1>Usage</h1>
There are two ways to use the library:
<ul>
<li>Automatic initialization: Create some div elements on your site, and call a function that automatically initalizes all the viewers. This is the easiest way to use the library, but provides less flexibility.</li>
<li>Initialization from code: Needs a bit more typing, but it's more flexible than the previous one.</li>
</ul>
<h2>External library handling</h2>
<p>Some of the importers are implemented using external libraries. These are found in the libs folder of the package. To make these libraries available, you have to tell the engine where to find them. The location of the external libraries can be set with the <a href="SetExternalLibLocation.html">SetExternalLibLocation</a> function. Make sure to call it before any other engine calls.</p>
<h2>Automatic initialization</h2>
<p>Create some elements anywhere on your page with the class name <code class="inline">online-3d-viewer</code>. You can create multiple elements with different parameters.</p>
<pre><code class="language-html">&lt;div class="online_3d_viewer"
style="width: 800px; height: 600px;"
model="model.obj, model.mtl"&gt;
&lt;/div&gt;</code></pre>
<p>You can specify several attributes:</p>
<ul>
<li><b>model:</b> Relative path to model files separated by comma.</li>
<li><b>camera:</b> Camera parameters (eye, center, up). 9 comma separated number values.</li>
<li><b>defaultcolor:</b> Default color for surfaces with no material. 3 comma separated number values for r, g, b.</li>
<li><b>backgroundcolor:</b> Canvas background color. 3 comma separated number values for r, g, b or four comma separated number values for r, g, b, a.</li>
<li><b>edgesettings:</b> Edge display settings. 5 comma separated values for 'on'/'off', r, g, b, threshold angle.</li>
<li><b>environmentmap:</b> Comma separated list of six images forming a texture box.</li>
<li><b>environmentmapbg:</b> Boolean ("true" or "false") to set the environment map as background.</li>
</ul>
<p>After placing the elements, call the <a href="Init3DViewerElements.html">Init3DViewerElements</a> function to initalize all the viewers. It must be called from the main JavaScript file outside of the onload event.</p>
<pre><code class="language-js">// tell the engine where to find the libs folder
OV.SetExternalLibLocation ('libs');
// init all viewers on the page
OV.Init3DViewerElements ();</code></pre>
<h2>Initialization from code</h2>
<p>You can also initalize the engine from code. In this case you can provide all the parameters as a JavaScript object. See the <a href="EmbeddedViewer.html">EmbeddedViewer</a> documentation for more details.</p>
<pre><code class="language-js">window.addEventListener ('load', () => {
// set the location of the external libraries
OV.SetExternalLibLocation ('../libs');
// get the parent element of the viewer
let parentDiv = document.getElementById ('viewer');
// initialize the viewer with the parent element and some parameters
let viewer = new OV.EmbeddedViewer (parentDiv, {
camera : new OV.Camera (
new OV.Coord3D (-1.5, 2.0, 3.0),
new OV.Coord3D (0.0, 0.0, 0.0),
new OV.Coord3D (0.0, 1.0, 0.0),
45.0
),
backgroundColor : new OV.RGBAColor (255, 255, 255, 255),
defaultColor : new OV.RGBColor (200, 200, 200),
edgeSettings : new OV.EdgeSettings (false, new OV.RGBColor (0, 0, 0), 1),
environmentSettings : new OV.EnvironmentSettings (
[
'assets/envmaps/fishermans_bastion/posx.jpg',
'assets/envmaps/fishermans_bastion/negx.jpg',
'assets/envmaps/fishermans_bastion/posy.jpg',
'assets/envmaps/fishermans_bastion/negy.jpg',
'assets/envmaps/fishermans_bastion/posz.jpg',
'assets/envmaps/fishermans_bastion/negz.jpg'
],
false
)
});
// load a model providing model urls
viewer.LoadModelFromUrlList ([
'model.obj',
'model.mtl'
]);
});</code></pre>
</div>
</div>
<script type="text/javascript">Init ('Usage')</script>
</body>
</html>

116
docs/index.html
View File

@ -24,6 +24,15 @@
<div id="nav-GitHub" class="navigation_item"><a href="https://github.com/kovacsv/Online3DViewer" target="_blank">GitHub</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Engine Usage</div>
<div id="nav-Installation" class="navigation_item"><a href="Installation.html" target="_self">Installation</a></div>
<div id="nav-Usage" class="navigation_item"><a href="Usage.html" target="_self">Usage</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Contribution</div>
<div id="nav-Set Up Environment" class="navigation_item"><a href="SetUpEnvironment.html" target="_self">Set Up Environment</a></div>
</div>
<div class="navigation_section">
<div class="navigation_title">Classes</div>
<div id="nav-Camera" class="navigation_item"><a href="Camera.html" target="_self">Camera</a></div>
<div id="nav-EdgeSettings" class="navigation_item"><a href="EdgeSettings.html" target="_self">EdgeSettings</a></div>
@ -48,112 +57,31 @@
</div>
<div id="main" class="main">
<div class="page">
<h1>Online 3D Viewer Engine</h1>
<h1>Online 3D Viewer</h1>
<p>The Online 3D Viewer Engine allows you to easily embed 3D models on your website. Although the engine is primarily designed to serve the <a href="https://3dviewer.net" target="_blank">https://3dviewer.net</a> website, it's possible to use it on any page to visualize 3D models.</p>
<p>Online 3D Viewer is a solution to visualize and explore 3D models in your browser. The solution builds up from two parts.</p>
<h2>Installation</h2>
<p>The preferred way to install the engine is to get it as an NPM package. In some cases it's not possible, so a browser-ready bundle is available for download and add directly to a html file.</p>
<h3>Install from NPM (preferred)</h3>
<p>The engine is available as an NPM package called <a href="https://www.npmjs.com/package/online-3d-viewer" target="_blank">online-3d-viewer</a>. The package itself is an ES6 module, so it can be used with several different bundlers.</p>
<p>You can install it by running the following command.</p>
<pre><code>npm install online-3d-viewer</code></pre>
<p>After installation you can import it like any other packages.</p>
<pre><code class="language-js">import * as OV from 'online-3d-viewer';</code></pre>
<h3>Download as browser-ready bundle</h3>
<p>A bundle is available for every release. You need to download the zip file attached to the <a href="https://github.com/kovacsv/Online3DViewer/releases">latest release</a>. After that, copy the content of the zip file on your server, and include the main file on your site.</p>
<pre><code class="language-html">&lt;script type="text/javascript" src="o3dv.min.js"&gt;&lt;/script&gt;</code></pre>
<h2>Usage</h2>
There are two ways to use the library:
<ul>
<li>Automatic initialization: Create some div elements on your site, and call a function that automatically initalizes all the viewers. This is the easiest way to use the library, but provides less flexibility.</li>
<li>Initialization from code: Needs a bit more typing, but it's more flexible than the previous one.</li>
<li><b>Engine:</b> A library to import, visualize and export 3D models. It can be used on any website to embed 3D models easily.</li>
<li><b>Website:</b> The source code of the <a href="https://3dviewer.net" target="_blank">https://3dviewer.net</a> site which uses the engine under the hood.</li>
</ul>
<h3>External library handling</h3>
<h2>Engine Usage</h2>
<p>Some of the importers are implemented using external libraries. These are found in the libs folder of the package. To make these libraries available, you have to tell the engine where to find them. The location of the external libraries can be set with the <a href="SetExternalLibLocation.html">SetExternalLibLocation</a> function. Make sure to call it before any other engine calls.</p>
<p>These documents help you understanding how to use the engine in your own solution.</p>
<h3>Automatic initialization</h3>
<p>Create some elements anywhere on your page with the class name <code class="inline">online-3d-viewer</code>. You can create multiple elements with different parameters.</p>
<pre><code class="language-html">&lt;div class="online_3d_viewer"
style="width: 800px; height: 600px;"
model="model.obj, model.mtl"&gt;
&lt;/div&gt;</code></pre>
<p>You can specify several attributes:</p>
<ul>
<li><b>model:</b> Relative path to model files separated by comma.</li>
<li><b>camera:</b> Camera parameters (eye, center, up). 9 comma separated number values.</li>
<li><b>defaultcolor:</b> Default color for surfaces with no material. 3 comma separated number values for r, g, b.</li>
<li><b>backgroundcolor:</b> Canvas background color. 3 comma separated number values for r, g, b or four comma separated number values for r, g, b, a.</li>
<li><b>edgesettings:</b> Edge display settings. 5 comma separated values for 'on'/'off', r, g, b, threshold angle.</li>
<li><b>environmentmap:</b> Comma separated list of six images forming a texture box.</li>
<li><b>environmentmapbg:</b> Boolean ("true" or "false") to set the environment map as background.</li>
<li><a href="Installation.html">Installation</a> - Explains ways to get the package.</li>
<li><a href="Usage.html">Usage</a> - Provides some usage examples.</li>
</ul>
<p>After placing the elements, call the <a href="Init3DViewerElements.html">Init3DViewerElements</a> function to initalize all the viewers. It must be called from the main JavaScript file outside of the onload event.</p>
<h2>Contribution</h2>
<pre><code class="language-js">// tell the engine where to find the libs folder
OV.SetExternalLibLocation ('libs');
// init all viewers on the page
OV.Init3DViewerElements ();</code></pre>
<p>If you would like to contribute to the codebase, these documents help you to start.</p>
<h3>Initialization from code</h3>
<p>You can also initalize the engine from code. In this case you can provide all the parameters as a JavaScript object. See the <a href="EmbeddedViewer.html">EmbeddedViewer</a> documentation for more details.</p>
<pre><code class="language-js">window.addEventListener ('load', () => {
// set the location of the external libraries
OV.SetExternalLibLocation ('../libs');
// get the parent element of the viewer
let parentDiv = document.getElementById ('viewer');
// initialize the viewer with the parent element and some parameters
let viewer = new OV.EmbeddedViewer (parentDiv, {
camera : new OV.Camera (
new OV.Coord3D (-1.5, 2.0, 3.0),
new OV.Coord3D (0.0, 0.0, 0.0),
new OV.Coord3D (0.0, 1.0, 0.0),
45.0
),
backgroundColor : new OV.RGBAColor (255, 255, 255, 255),
defaultColor : new OV.RGBColor (200, 200, 200),
edgeSettings : new OV.EdgeSettings (false, new OV.RGBColor (0, 0, 0), 1),
environmentSettings : new OV.EnvironmentSettings (
[
'assets/envmaps/fishermans_bastion/posx.jpg',
'assets/envmaps/fishermans_bastion/negx.jpg',
'assets/envmaps/fishermans_bastion/posy.jpg',
'assets/envmaps/fishermans_bastion/negy.jpg',
'assets/envmaps/fishermans_bastion/posz.jpg',
'assets/envmaps/fishermans_bastion/negz.jpg'
],
false
)
});
// load a model providing model urls
viewer.LoadModelFromUrlList ([
'model.obj',
'model.mtl'
]);
});</code></pre>
<ul>
<li><a href="SetUpEnvironment.html">Set Up Environment</a> - Helps you understanding how the environment works.</li>
</ul>
</div>
</div>

21
docs/source/Installation.html Normal file
View File

@ -0,0 +1,21 @@
<h1>Installation</h1>
<p>The recommended way to install the engine is to get it as an NPM package. In some cases it's not possible, so a browser-ready bundle is available for download and add directly to a html file.</p>
<h2>Install from NPM (recommended)</h2>
<p>The engine is available as an NPM package called <a href="https://www.npmjs.com/package/online-3d-viewer" target="_blank">online-3d-viewer</a>. The package itself is an ES6 module, so it can be used with several different bundlers.</p>
<p>You can install it by running the following command.</p>
<pre><code class="language-plaintext">npm install online-3d-viewer</code></pre>
<p>After installation you can import it like any other packages.</p>
<pre><code class="language-js">import * as OV from 'online-3d-viewer';</code></pre>
<h2>Download as browser-ready bundle</h2>
<p>A bundle is available for every release. You need to download the zip file attached to the <a href="https://github.com/kovacsv/Online3DViewer/releases">latest release</a>. After that, copy the content of the zip file on your server, and include the main file on your site.</p>
<pre><code class="language-html">&lt;script type="text/javascript" src="o3dv.min.js"&gt;&lt;/script&gt;</code></pre>

60
docs/source/SetUpEnvironment.html Normal file
View File

@ -0,0 +1,60 @@
<h1>Set Up the Development Environment</h1>
<p>This document helps you setting up the developer environment. It is useful if you would like to contribute to the codebase of the engine or the website.</p>
<h2>Quick Start</h2>
<p>After cloning the repository run these commands from the root directory.</p>
<pre><code class="language-plaintext">npm install
npm start</code></pre>
<p>This will compile the development version of the code and start a web server. Now you can open <code class="inline">http://localhost:8080</code> to check the result.</p>
<h2>Source Structure</h2>
<p>The source contains the following folders.</p>
<ul>
<li><b>assets:</b> Various assets used in the code or in any other media platforms.</li>
<li><b>docs:</b> Code of this documentation.</li>
<li><b>libs:</b> External libraries used by the solution.</li>
<li><b>sandbox:</b> Various examples mostly for using the engine.</li>
<li><b>source:</b> Source code of the engine and the website.
<ul>
<li><b>engine:</b> Source code of the engine. It doesn't contain any website specific codes.</li>
<li><b>website:</b> Source code of the website.</li>
</ul>
</li>
<li><b>test:</b> Automatic tests for the engine.</li>
<li><b>tools:</b> Tools for building the library.</li>
<li><b>website:</b> Static resources for the website.</li>
</ul>
<h2>Scripts</h2>
<p>Several scripts are available for building, testing and publishing.</p>
<p><b>Building</b></p>
<ul>
<li><code class="inline">npm run build_dev</code>: Builds the development version of the engine and the website.</li>
<li><code class="inline">npm run build_engine_dev</code>: Builds the development version of the engine.</li>
<li><code class="inline">npm run build_engine_prod</code>: Builds the production version of the engine.</li>
<li><code class="inline">npm run build_website_dev</code>: Builds the development version of the website.</li>
<li><code class="inline">npm run build_website_prod</code>: Builds the production version of the website.</li>
</ul>
<p><b>Testing</b></p>
<ul>
<li><code class="inline">npm run test</code>: Runs all unit tests.</li>
<li><code class="inline">npm run lint</code>: Runs eslint on the codebase.</li>
</ul>
<p><b>Packaging</b></p>
<ul>
<li><code class="inline">npm run create_package</code>: Generates the production version of the engine and the website.</li>
<li><code class="inline">npm run create_dist</code>: Generates the production version of the engine and the website, and runs all the possible checks.</li>
</ul>

80
docs/source/Usage.html Normal file
View File

@ -0,0 +1,80 @@
<h1>Usage</h1>
There are two ways to use the library:
<ul>
<li>Automatic initialization: Create some div elements on your site, and call a function that automatically initalizes all the viewers. This is the easiest way to use the library, but provides less flexibility.</li>
<li>Initialization from code: Needs a bit more typing, but it's more flexible than the previous one.</li>
</ul>
<h2>External library handling</h2>
<p>Some of the importers are implemented using external libraries. These are found in the libs folder of the package. To make these libraries available, you have to tell the engine where to find them. The location of the external libraries can be set with the <a href="SetExternalLibLocation.html">SetExternalLibLocation</a> function. Make sure to call it before any other engine calls.</p>
<h2>Automatic initialization</h2>
<p>Create some elements anywhere on your page with the class name <code class="inline">online-3d-viewer</code>. You can create multiple elements with different parameters.</p>
<pre><code class="language-html">&lt;div class="online_3d_viewer"
style="width: 800px; height: 600px;"
model="model.obj, model.mtl"&gt;
&lt;/div&gt;</code></pre>
<p>You can specify several attributes:</p>
<ul>
<li><b>model:</b> Relative path to model files separated by comma.</li>
<li><b>camera:</b> Camera parameters (eye, center, up). 9 comma separated number values.</li>
<li><b>defaultcolor:</b> Default color for surfaces with no material. 3 comma separated number values for r, g, b.</li>
<li><b>backgroundcolor:</b> Canvas background color. 3 comma separated number values for r, g, b or four comma separated number values for r, g, b, a.</li>
<li><b>edgesettings:</b> Edge display settings. 5 comma separated values for 'on'/'off', r, g, b, threshold angle.</li>
<li><b>environmentmap:</b> Comma separated list of six images forming a texture box.</li>
<li><b>environmentmapbg:</b> Boolean ("true" or "false") to set the environment map as background.</li>
</ul>
<p>After placing the elements, call the <a href="Init3DViewerElements.html">Init3DViewerElements</a> function to initalize all the viewers. It must be called from the main JavaScript file outside of the onload event.</p>
<pre><code class="language-js">// tell the engine where to find the libs folder
OV.SetExternalLibLocation ('libs');
// init all viewers on the page
OV.Init3DViewerElements ();</code></pre>
<h2>Initialization from code</h2>
<p>You can also initalize the engine from code. In this case you can provide all the parameters as a JavaScript object. See the <a href="EmbeddedViewer.html">EmbeddedViewer</a> documentation for more details.</p>
<pre><code class="language-js">window.addEventListener ('load', () => {
// set the location of the external libraries
OV.SetExternalLibLocation ('../libs');
// get the parent element of the viewer
let parentDiv = document.getElementById ('viewer');
// initialize the viewer with the parent element and some parameters
let viewer = new OV.EmbeddedViewer (parentDiv, {
camera : new OV.Camera (
new OV.Coord3D (-1.5, 2.0, 3.0),
new OV.Coord3D (0.0, 0.0, 0.0),
new OV.Coord3D (0.0, 1.0, 0.0),
45.0
),
backgroundColor : new OV.RGBAColor (255, 255, 255, 255),
defaultColor : new OV.RGBColor (200, 200, 200),
edgeSettings : new OV.EdgeSettings (false, new OV.RGBColor (0, 0, 0), 1),
environmentSettings : new OV.EnvironmentSettings (
[
'assets/envmaps/fishermans_bastion/posx.jpg',
'assets/envmaps/fishermans_bastion/negx.jpg',
'assets/envmaps/fishermans_bastion/posy.jpg',
'assets/envmaps/fishermans_bastion/negy.jpg',
'assets/envmaps/fishermans_bastion/posz.jpg',
'assets/envmaps/fishermans_bastion/negz.jpg'
],
false
)
});
// load a model providing model urls
viewer.LoadModelFromUrlList ([
'model.obj',
'model.mtl'
]);
});</code></pre>

37
docs/source/config.json
View File

@ -1,12 +1,39 @@
{
"pages" : [
"page_groups" : [
{
"name" : "Home",
"url" : "index.html"
"name" : "Pages",
"pages" : [
{
"name" : "Home",
"url" : "index.html"
},
{
"name" : "GitHub",
"url" : "https://github.com/kovacsv/Online3DViewer"
}
]
},
{
"name" : "GitHub",
"url" : "https://github.com/kovacsv/Online3DViewer"
"name" : "Engine Usage",
"pages" : [
{
"name" : "Installation",
"url" : "Installation.html"
},
{
"name" : "Usage",
"url" : "Usage.html"
}
]
},
{
"name" : "Contribution",
"pages" : [
{
"name" : "Set Up Environment",
"url" : "SetUpEnvironment.html"
}
]
}
],
"external_refs" : {

107
docs/source/index.html
View File

@ -1,106 +1,25 @@
<h1>Online 3D Viewer Engine</h1>
<h1>Online 3D Viewer</h1>
<p>The Online 3D Viewer Engine allows you to easily embed 3D models on your website. Although the engine is primarily designed to serve the <a href="https://3dviewer.net" target="_blank">https://3dviewer.net</a> website, it's possible to use it on any page to visualize 3D models.</p>
<p>Online 3D Viewer is a solution to visualize and explore 3D models in your browser. The solution builds up from two parts.</p>
<h2>Installation</h2>
<p>The preferred way to install the engine is to get it as an NPM package. In some cases it's not possible, so a browser-ready bundle is available for download and add directly to a html file.</p>
<h3>Install from NPM (preferred)</h3>
<p>The engine is available as an NPM package called <a href="https://www.npmjs.com/package/online-3d-viewer" target="_blank">online-3d-viewer</a>. The package itself is an ES6 module, so it can be used with several different bundlers.</p>
<p>You can install it by running the following command.</p>
<pre><code>npm install online-3d-viewer</code></pre>
<p>After installation you can import it like any other packages.</p>
<pre><code class="language-js">import * as OV from 'online-3d-viewer';</code></pre>
<h3>Download as browser-ready bundle</h3>
<p>A bundle is available for every release. You need to download the zip file attached to the <a href="https://github.com/kovacsv/Online3DViewer/releases">latest release</a>. After that, copy the content of the zip file on your server, and include the main file on your site.</p>
<pre><code class="language-html">&lt;script type="text/javascript" src="o3dv.min.js"&gt;&lt;/script&gt;</code></pre>
<h2>Usage</h2>
There are two ways to use the library:
<ul>
<li>Automatic initialization: Create some div elements on your site, and call a function that automatically initalizes all the viewers. This is the easiest way to use the library, but provides less flexibility.</li>
<li>Initialization from code: Needs a bit more typing, but it's more flexible than the previous one.</li>
<li><b>Engine:</b> A library to import, visualize and export 3D models. It can be used on any website to embed 3D models easily.</li>
<li><b>Website:</b> The source code of the <a href="https://3dviewer.net" target="_blank">https://3dviewer.net</a> site which uses the engine under the hood.</li>
</ul>
<h3>External library handling</h3>
<h2>Engine Usage</h2>
<p>Some of the importers are implemented using external libraries. These are found in the libs folder of the package. To make these libraries available, you have to tell the engine where to find them. The location of the external libraries can be set with the <a href="SetExternalLibLocation.html">SetExternalLibLocation</a> function. Make sure to call it before any other engine calls.</p>
<p>These documents help you understanding how to use the engine in your own solution.</p>
<h3>Automatic initialization</h3>
<p>Create some elements anywhere on your page with the class name <code class="inline">online-3d-viewer</code>. You can create multiple elements with different parameters.</p>
<pre><code class="language-html">&lt;div class="online_3d_viewer"
style="width: 800px; height: 600px;"
model="model.obj, model.mtl"&gt;
&lt;/div&gt;</code></pre>
<p>You can specify several attributes:</p>
<ul>
<li><b>model:</b> Relative path to model files separated by comma.</li>
<li><b>camera:</b> Camera parameters (eye, center, up). 9 comma separated number values.</li>
<li><b>defaultcolor:</b> Default color for surfaces with no material. 3 comma separated number values for r, g, b.</li>
<li><b>backgroundcolor:</b> Canvas background color. 3 comma separated number values for r, g, b or four comma separated number values for r, g, b, a.</li>
<li><b>edgesettings:</b> Edge display settings. 5 comma separated values for 'on'/'off', r, g, b, threshold angle.</li>
<li><b>environmentmap:</b> Comma separated list of six images forming a texture box.</li>
<li><b>environmentmapbg:</b> Boolean ("true" or "false") to set the environment map as background.</li>
<li><a href="Installation.html">Installation</a> - Explains ways to get the package.</li>
<li><a href="Usage.html">Usage</a> - Provides some usage examples.</li>
</ul>
<p>After placing the elements, call the <a href="Init3DViewerElements.html">Init3DViewerElements</a> function to initalize all the viewers. It must be called from the main JavaScript file outside of the onload event.</p>
<h2>Contribution</h2>
<pre><code class="language-js">// tell the engine where to find the libs folder
OV.SetExternalLibLocation ('libs');
// init all viewers on the page
OV.Init3DViewerElements ();</code></pre>
<p>If you would like to contribute to the codebase, these documents help you to start.</p>
<h3>Initialization from code</h3>
<p>You can also initalize the engine from code. In this case you can provide all the parameters as a JavaScript object. See the <a href="EmbeddedViewer.html">EmbeddedViewer</a> documentation for more details.</p>
<pre><code class="language-js">window.addEventListener ('load', () => {
// set the location of the external libraries
OV.SetExternalLibLocation ('../libs');
// get the parent element of the viewer
let parentDiv = document.getElementById ('viewer');
// initialize the viewer with the parent element and some parameters
let viewer = new OV.EmbeddedViewer (parentDiv, {
camera : new OV.Camera (
new OV.Coord3D (-1.5, 2.0, 3.0),
new OV.Coord3D (0.0, 0.0, 0.0),
new OV.Coord3D (0.0, 1.0, 0.0),
45.0
),
backgroundColor : new OV.RGBAColor (255, 255, 255, 255),
defaultColor : new OV.RGBColor (200, 200, 200),
edgeSettings : new OV.EdgeSettings (false, new OV.RGBColor (0, 0, 0), 1),
environmentSettings : new OV.EnvironmentSettings (
[
'assets/envmaps/fishermans_bastion/posx.jpg',
'assets/envmaps/fishermans_bastion/negx.jpg',
'assets/envmaps/fishermans_bastion/posy.jpg',
'assets/envmaps/fishermans_bastion/negy.jpg',
'assets/envmaps/fishermans_bastion/posz.jpg',
'assets/envmaps/fishermans_bastion/negz.jpg'
],
false
)
});
// load a model providing model urls
viewer.LoadModelFromUrlList ([
'model.obj',
'model.mtl'
]);
});</code></pre>
<ul>
<li><a href="SetUpEnvironment.html">Set Up Environment</a> - Helps you understanding how the environment works.</li>
</ul>

4
docs/static/style.css vendored
View File

@ -152,7 +152,7 @@ li
.main
{
height: 100%;
padding: 20px 30px;
padding: 20px;
margin-left: 300px;
box-sizing: border-box;
overflow: auto;
@ -233,7 +233,7 @@ li
code.inline
{
background: #fafafa;
background: #f0f0f0;
font-family: monospace;
padding: 2px 4px;
border-radius: 3px;

47
tools/generate_docs.py
View File

@ -361,39 +361,46 @@ def CreateFromTemplate (templateHtmlPath, resultHtmlPath, navigation, title, con
('$$$MAIN$$$', content)
])
def BuildNavigation (pages, hierarchy):
def BuildNavigation (pageGroups, hierarchy):
navigation = Navigation ()
pagesGroup = NavigationGroup ('Pages', False)
for pageGroup in pageGroups:
navGroup = NavigationGroup (pageGroup['name'], False)
for page in pageGroup['pages']:
navGroup.AddLink (page['name'], page['url'])
navigation.AddGroup (navGroup)
classesGroup = NavigationGroup ('Classes', True)
functionsGroup = NavigationGroup ('Functions', True)
enumsGroup = NavigationGroup ('Enums', True)
for page in pages:
pagesGroup.AddLink (page['name'], page['url'])
for classDoc in hierarchy['classes']:
navigation.AddEntityLink (classDoc.name, classDoc.name + '.html')
classesGroup.AddLink (classDoc.name, classDoc.name + '.html')
navigation.AddGroup (classesGroup)
functionsGroup = NavigationGroup ('Functions', True)
for methodDoc in hierarchy['functions']:
navigation.AddEntityLink (methodDoc.name, methodDoc.name + '.html')
functionsGroup.AddLink (methodDoc.name, methodDoc.name + '.html')
navigation.AddGroup (functionsGroup)
enumsGroup = NavigationGroup ('Enums', True)
for enumDoc in hierarchy['enums']:
navigation.AddEntityLink (enumDoc.name, enumDoc.name + '.html')
enumsGroup.AddLink (enumDoc.name, enumDoc.name + '.html')
navigation.AddGroup (pagesGroup)
navigation.AddGroup (classesGroup)
navigation.AddGroup (functionsGroup)
navigation.AddGroup (enumsGroup)
return navigation
def BuildDocumentationFiles (navigation, pages, hierarchy, sourceDir, resultDir):
def BuildDocumentationFiles (navigation, pageGroups, hierarchy, sourceDir, resultDir):
templateHtmlPath = os.path.join (sourceDir, 'Template.html')
for page in pages:
if page['url'].startswith ('http'):
continue
sourceHtmlPath = os.path.join (sourceDir, page['url'])
pageHtmlPath = os.path.join (resultDir, page['url'])
pageContent = '<div class="page">\n' + Tools.GetFileContent (sourceHtmlPath) + '\n</div>'
CreateFromTemplate (templateHtmlPath, pageHtmlPath, navigation, page['name'], pageContent)
for pageGroup in pageGroups:
for page in pageGroup['pages']:
if page['url'].startswith ('http'):
continue
sourceHtmlPath = os.path.join (sourceDir, page['url'])
pageHtmlPath = os.path.join (resultDir, page['url'])
pageContent = '<div class="page">\n' + Tools.GetFileContent (sourceHtmlPath) + '\n</div>'
CreateFromTemplate (templateHtmlPath, pageHtmlPath, navigation, page['name'], pageContent)
for classDoc in hierarchy['classes']:
classHtmlPath = os.path.join (resultDir, classDoc.name + '.html')
@ -426,14 +433,14 @@ def Main (argv):
config = json.load (configJson)
doclets = GetDocumentedDoclets (resultJson)
pages = config['pages']
pageGroups = config['page_groups']
hierarchy = BuildHierarchy (doclets)
navigation = BuildNavigation (pages, hierarchy)
navigation = BuildNavigation (pageGroups, hierarchy)
for name in config['external_refs']:
navigation.AddEntityLink (name, config['external_refs'][name])
BuildDocumentationFiles (navigation, pages, hierarchy, sourceDir, resultDir)
BuildDocumentationFiles (navigation, pageGroups, hierarchy, sourceDir, resultDir)
return 0