From 68cdf2f3eb7e21d3283161d244e3b1cad2e78fa7 Mon Sep 17 00:00:00 2001 From: kovacsv Date: Tue, 10 Jan 2023 22:59:45 +0100 Subject: [PATCH] Restructure documentation. --- docs/Camera.html | 9 ++ docs/CameraMode.html | 9 ++ docs/EdgeSettings.html | 9 ++ docs/EmbeddedViewer.html | 9 ++ docs/EnvironmentSettings.html | 9 ++ docs/FileSource.html | 9 ++ docs/Init3DViewerElement.html | 9 ++ docs/Init3DViewerElements.html | 9 ++ docs/InputFile.html | 9 ++ docs/Installation.html | 87 ++++++++++++++++++ docs/RGBAColor.html | 9 ++ docs/RGBColor.html | 9 ++ docs/SetExternalLibLocation.html | 9 ++ docs/SetUpEnvironment.html | 126 ++++++++++++++++++++++++++ docs/Usage.html | 146 ++++++++++++++++++++++++++++++ docs/index.html | 116 +++++------------------- docs/source/Installation.html | 21 +++++ docs/source/SetUpEnvironment.html | 60 ++++++++++++ docs/source/Usage.html | 80 ++++++++++++++++ docs/source/config.json | 37 +++++++- docs/source/index.html | 107 +++------------------- docs/static/style.css | 4 +- tools/generate_docs.py | 47 ++++++---- 23 files changed, 724 insertions(+), 215 deletions(-) create mode 100644 docs/Installation.html create mode 100644 docs/SetUpEnvironment.html create mode 100644 docs/Usage.html create mode 100644 docs/source/Installation.html create mode 100644 docs/source/SetUpEnvironment.html create mode 100644 docs/source/Usage.html diff --git a/docs/Camera.html b/docs/Camera.html index 76229d6..a658440 100644 --- a/docs/Camera.html +++ b/docs/Camera.html @@ -24,6 +24,15 @@
+
Engine Usage
+ + +
+
+
Contribution
+ +
+
Classes
diff --git a/docs/CameraMode.html b/docs/CameraMode.html index 15ade8d..1f98089 100644 --- a/docs/CameraMode.html +++ b/docs/CameraMode.html @@ -24,6 +24,15 @@
+
Engine Usage
+ + +
+
+
Contribution
+ +
+
Classes
diff --git a/docs/EdgeSettings.html b/docs/EdgeSettings.html index 6fdf7e7..7741a3e 100644 --- a/docs/EdgeSettings.html +++ b/docs/EdgeSettings.html @@ -24,6 +24,15 @@
+
Engine Usage
+ + +
+
+
Contribution
+ +
+
Classes
diff --git a/docs/EmbeddedViewer.html b/docs/EmbeddedViewer.html index 2bff765..8164cfb 100644 --- a/docs/EmbeddedViewer.html +++ b/docs/EmbeddedViewer.html @@ -24,6 +24,15 @@
+
Engine Usage
+ + +
+
+
Contribution
+ +
+
Classes
diff --git a/docs/EnvironmentSettings.html b/docs/EnvironmentSettings.html index bf707c5..f79b482 100644 --- a/docs/EnvironmentSettings.html +++ b/docs/EnvironmentSettings.html @@ -24,6 +24,15 @@
+
Engine Usage
+ + +
+
+
Contribution
+ +
+
Classes
diff --git a/docs/FileSource.html b/docs/FileSource.html index f5b00b8..934f7a5 100644 --- a/docs/FileSource.html +++ b/docs/FileSource.html @@ -24,6 +24,15 @@
+
Engine Usage
+ + +
+
+
Contribution
+ +
+
Classes
diff --git a/docs/Init3DViewerElement.html b/docs/Init3DViewerElement.html index 54980a4..9a46580 100644 --- a/docs/Init3DViewerElement.html +++ b/docs/Init3DViewerElement.html @@ -24,6 +24,15 @@
+
Engine Usage
+ + +
+
+
Contribution
+ +
+
Classes
diff --git a/docs/Init3DViewerElements.html b/docs/Init3DViewerElements.html index 9b01ed4..d390409 100644 --- a/docs/Init3DViewerElements.html +++ b/docs/Init3DViewerElements.html @@ -24,6 +24,15 @@
+
Engine Usage
+ + +
+
+
Contribution
+ +
+
Classes
diff --git a/docs/InputFile.html b/docs/InputFile.html index 54d5e8f..e01bbe1 100644 --- a/docs/InputFile.html +++ b/docs/InputFile.html @@ -24,6 +24,15 @@
+
Engine Usage
+ + +
+
+
Contribution
+ +
+
Classes
diff --git a/docs/Installation.html b/docs/Installation.html new file mode 100644 index 0000000..dcf7d51 --- /dev/null +++ b/docs/Installation.html @@ -0,0 +1,87 @@ + + + + + + + + + Online 3D Viewer - Installation + + + + + + + + + + + +
+
+

Installation

+ +

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.

+ +

Install from NPM (recommended)

+ +

The engine is available as an NPM package called online-3d-viewer. The package itself is an ES6 module, so it can be used with several different bundlers.

+ +

You can install it by running the following command.

+ +
npm install online-3d-viewer
+ +

After installation you can import it like any other packages.

+ +
import * as OV from 'online-3d-viewer';
+ +

Download as browser-ready bundle

+ +

A bundle is available for every release. You need to download the zip file attached to the latest release. After that, copy the content of the zip file on your server, and include the main file on your site.

+ +
<script type="text/javascript" src="o3dv.min.js"></script>
+ +
+
+ + + + diff --git a/docs/RGBAColor.html b/docs/RGBAColor.html index 82112e3..c1e2ac5 100644 --- a/docs/RGBAColor.html +++ b/docs/RGBAColor.html @@ -24,6 +24,15 @@
+
Engine Usage
+ + +
+
+
Contribution
+ +
+
Classes
diff --git a/docs/RGBColor.html b/docs/RGBColor.html index 91c68e5..26f8374 100644 --- a/docs/RGBColor.html +++ b/docs/RGBColor.html @@ -24,6 +24,15 @@
+
Engine Usage
+ + +
+
+
Contribution
+ +
+
Classes
diff --git a/docs/SetExternalLibLocation.html b/docs/SetExternalLibLocation.html index ec9b936..b02da41 100644 --- a/docs/SetExternalLibLocation.html +++ b/docs/SetExternalLibLocation.html @@ -24,6 +24,15 @@
+
Engine Usage
+ + +
+
+
Contribution
+ +
+
Classes
diff --git a/docs/SetUpEnvironment.html b/docs/SetUpEnvironment.html new file mode 100644 index 0000000..d4854bb --- /dev/null +++ b/docs/SetUpEnvironment.html @@ -0,0 +1,126 @@ + + + + + + + + + Online 3D Viewer - Set Up Environment + + + + + + + + + + + +
+
+

Set Up the Development Environment

+ +

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.

+ +

Quick Start

+ +

After cloning the repository run these commands from the root directory.

+ +
npm install
+npm start
+ +

This will compile the development version of the code and start a web server. Now you can open http://localhost:8080 to check the result.

+ +

Source Structure

+ +

The source contains the following folders.

+ +
    +
  • assets: Various assets used in the code or in any other media platforms.
    • +
  • docs: Code of this documentation.
    • +
  • libs: External libraries used by the solution.
    • +
  • sandbox: Various examples mostly for using the engine.
    • +
  • source: Source code of the engine and the website. +
      +
    • engine: Source code of the engine. It doesn't contain any website specific codes.
      • +
    • website: Source code of the website.
      • +
    +
    • +
  • test: Automatic tests for the engine.
    • +
  • tools: Tools for building the library.
    • +
  • website: Static resources for the website.
    • +
+ +

Scripts

+ +

Several scripts are available for building, testing and publishing.

+ +

Building

+ +
    +
  • npm run build_dev: Builds the development version of the engine and the website.
    • +
  • npm run build_engine_dev: Builds the development version of the engine.
    • +
  • npm run build_engine_prod: Builds the production version of the engine.
    • +
  • npm run build_website_dev: Builds the development version of the website.
    • +
  • npm run build_website_prod: Builds the production version of the website.
    • +
+ +

Testing

+ +
    +
  • npm run test: Runs all unit tests.
    • +
  • npm run lint: Runs eslint on the codebase.
    • +
+ +

Packaging

+ +
    +
  • npm run create_package: Generates the production version of the engine and the website.
    • +
  • npm run create_dist: Generates the production version of the engine and the website, and runs all the possible checks.
    • +
+ +
+
+ + + + diff --git a/docs/Usage.html b/docs/Usage.html new file mode 100644 index 0000000..fb800a3 --- /dev/null +++ b/docs/Usage.html @@ -0,0 +1,146 @@ + + + + + + + + + Online 3D Viewer - Usage + + + + + + + + + + + +
+
+

Usage

+ +There are two ways to use the library: +
    +
  • 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.
    • +
  • Initialization from code: Needs a bit more typing, but it's more flexible than the previous one.
    • +
+ +

External library handling

+ +

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 SetExternalLibLocation function. Make sure to call it before any other engine calls.

+ +

Automatic initialization

+ +

Create some elements anywhere on your page with the class name online-3d-viewer. You can create multiple elements with different parameters.

+ +
<div class="online_3d_viewer"
+    style="width: 800px; height: 600px;"
+    model="model.obj, model.mtl">
+</div>
+ +

You can specify several attributes:

+
    +
  • model: Relative path to model files separated by comma.
    • +
  • camera: Camera parameters (eye, center, up). 9 comma separated number values.
    • +
  • defaultcolor: Default color for surfaces with no material. 3 comma separated number values for r, g, b.
    • +
  • backgroundcolor: Canvas background color. 3 comma separated number values for r, g, b or four comma separated number values for r, g, b, a.
    • +
  • edgesettings: Edge display settings. 5 comma separated values for 'on'/'off', r, g, b, threshold angle.
    • +
  • environmentmap: Comma separated list of six images forming a texture box.
    • +
  • environmentmapbg: Boolean ("true" or "false") to set the environment map as background.
    • +
+ +

After placing the elements, call the Init3DViewerElements function to initalize all the viewers. It must be called from the main JavaScript file outside of the onload event.

+ +
// tell the engine where to find the libs folder
+OV.SetExternalLibLocation ('libs');
+// init all viewers on the page
+OV.Init3DViewerElements ();
+ +

Initialization from code

+ +

You can also initalize the engine from code. In this case you can provide all the parameters as a JavaScript object. See the EmbeddedViewer documentation for more details.

+ +
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'
+    ]);
+});
+ +
+
+ + + + diff --git a/docs/index.html b/docs/index.html index e7fc0b5..15ba61f 100644 --- a/docs/index.html +++ b/docs/index.html @@ -24,6 +24,15 @@
+
Engine Usage
+ + +
+
+
Contribution
+ +
+
Classes
@@ -48,112 +57,31 @@
-

Online 3D Viewer Engine

+

Online 3D Viewer

-

The Online 3D Viewer Engine allows you to easily embed 3D models on your website. Although the engine is primarily designed to serve the https://3dviewer.net website, it's possible to use it on any page to visualize 3D models.

+

Online 3D Viewer is a solution to visualize and explore 3D models in your browser. The solution builds up from two parts.

-

Installation

- -

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.

- -

Install from NPM (preferred)

- -

The engine is available as an NPM package called online-3d-viewer. The package itself is an ES6 module, so it can be used with several different bundlers.

- -

You can install it by running the following command.

- -
npm install online-3d-viewer
- -

After installation you can import it like any other packages.

- -
import * as OV from 'online-3d-viewer';
- -

Download as browser-ready bundle

- -

A bundle is available for every release. You need to download the zip file attached to the latest release. After that, copy the content of the zip file on your server, and include the main file on your site.

- -
<script type="text/javascript" src="o3dv.min.js"></script>
- -

Usage

- -There are two ways to use the library:
    -
  • 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.
    • -
  • Initialization from code: Needs a bit more typing, but it's more flexible than the previous one.
    • +
  • Engine: A library to import, visualize and export 3D models. It can be used on any website to embed 3D models easily.
    • +
  • Website: The source code of the https://3dviewer.net site which uses the engine under the hood.
-

External library handling

+

Engine Usage

-

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 SetExternalLibLocation function. Make sure to call it before any other engine calls.

+

These documents help you understanding how to use the engine in your own solution.

-

Automatic initialization

- -

Create some elements anywhere on your page with the class name online-3d-viewer. You can create multiple elements with different parameters.

- -
<div class="online_3d_viewer"
-    style="width: 800px; height: 600px;"
-    model="model.obj, model.mtl">
-</div>
- -

You can specify several attributes:

    -
  • model: Relative path to model files separated by comma.
    • -
  • camera: Camera parameters (eye, center, up). 9 comma separated number values.
    • -
  • defaultcolor: Default color for surfaces with no material. 3 comma separated number values for r, g, b.
    • -
  • backgroundcolor: Canvas background color. 3 comma separated number values for r, g, b or four comma separated number values for r, g, b, a.
    • -
  • edgesettings: Edge display settings. 5 comma separated values for 'on'/'off', r, g, b, threshold angle.
    • -
  • environmentmap: Comma separated list of six images forming a texture box.
    • -
  • environmentmapbg: Boolean ("true" or "false") to set the environment map as background.
    • +
  • Installation - Explains ways to get the package.
    • +
  • Usage - Provides some usage examples.
-

After placing the elements, call the Init3DViewerElements function to initalize all the viewers. It must be called from the main JavaScript file outside of the onload event.

+

Contribution

-
// tell the engine where to find the libs folder
-OV.SetExternalLibLocation ('libs');
-// init all viewers on the page
-OV.Init3DViewerElements ();
+

If you would like to contribute to the codebase, these documents help you to start.

-

Initialization from code

- -

You can also initalize the engine from code. In this case you can provide all the parameters as a JavaScript object. See the EmbeddedViewer documentation for more details.

- -
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'
-    ]);
-});
+
diff --git a/docs/source/Installation.html b/docs/source/Installation.html new file mode 100644 index 0000000..48f8bc2 --- /dev/null +++ b/docs/source/Installation.html @@ -0,0 +1,21 @@ +

Installation

+ +

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.

+ +

Install from NPM (recommended)

+ +

The engine is available as an NPM package called online-3d-viewer. The package itself is an ES6 module, so it can be used with several different bundlers.

+ +

You can install it by running the following command.

+ +
npm install online-3d-viewer
+ +

After installation you can import it like any other packages.

+ +
import * as OV from 'online-3d-viewer';
+ +

Download as browser-ready bundle

+ +

A bundle is available for every release. You need to download the zip file attached to the latest release. After that, copy the content of the zip file on your server, and include the main file on your site.

+ +
<script type="text/javascript" src="o3dv.min.js"></script>
diff --git a/docs/source/SetUpEnvironment.html b/docs/source/SetUpEnvironment.html new file mode 100644 index 0000000..7361501 --- /dev/null +++ b/docs/source/SetUpEnvironment.html @@ -0,0 +1,60 @@ +

Set Up the Development Environment

+ +

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.

+ +

Quick Start

+ +

After cloning the repository run these commands from the root directory.

+ +
npm install
+npm start
+ +

This will compile the development version of the code and start a web server. Now you can open http://localhost:8080 to check the result.

+ +

Source Structure

+ +

The source contains the following folders.

+ + + +

Scripts

+ +

Several scripts are available for building, testing and publishing.

+ +

Building

+ + + +

Testing

+ + + +

Packaging

+ + diff --git a/docs/source/Usage.html b/docs/source/Usage.html new file mode 100644 index 0000000..f9d8cb0 --- /dev/null +++ b/docs/source/Usage.html @@ -0,0 +1,80 @@ +

Usage

+ +There are two ways to use the library: + + +

External library handling

+ +

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 SetExternalLibLocation function. Make sure to call it before any other engine calls.

+ +

Automatic initialization

+ +

Create some elements anywhere on your page with the class name online-3d-viewer. You can create multiple elements with different parameters.

+ +
<div class="online_3d_viewer"
+    style="width: 800px; height: 600px;"
+    model="model.obj, model.mtl">
+</div>
+ +

You can specify several attributes:

+ + +

After placing the elements, call the Init3DViewerElements function to initalize all the viewers. It must be called from the main JavaScript file outside of the onload event.

+ +
// tell the engine where to find the libs folder
+OV.SetExternalLibLocation ('libs');
+// init all viewers on the page
+OV.Init3DViewerElements ();
+ +

Initialization from code

+ +

You can also initalize the engine from code. In this case you can provide all the parameters as a JavaScript object. See the EmbeddedViewer documentation for more details.

+ +
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'
+    ]);
+});
diff --git a/docs/source/config.json b/docs/source/config.json index 964e2a5..52f319d 100644 --- a/docs/source/config.json +++ b/docs/source/config.json @@ -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" : { diff --git a/docs/source/index.html b/docs/source/index.html index c9eba1f..26161ad 100644 --- a/docs/source/index.html +++ b/docs/source/index.html @@ -1,106 +1,25 @@ -

Online 3D Viewer Engine

+

Online 3D Viewer

-

The Online 3D Viewer Engine allows you to easily embed 3D models on your website. Although the engine is primarily designed to serve the https://3dviewer.net website, it's possible to use it on any page to visualize 3D models.

+

Online 3D Viewer is a solution to visualize and explore 3D models in your browser. The solution builds up from two parts.

-

Installation

- -

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.

- -

Install from NPM (preferred)

- -

The engine is available as an NPM package called online-3d-viewer. The package itself is an ES6 module, so it can be used with several different bundlers.

- -

You can install it by running the following command.

- -
npm install online-3d-viewer
- -

After installation you can import it like any other packages.

- -
import * as OV from 'online-3d-viewer';
- -

Download as browser-ready bundle

- -

A bundle is available for every release. You need to download the zip file attached to the latest release. After that, copy the content of the zip file on your server, and include the main file on your site.

- -
<script type="text/javascript" src="o3dv.min.js"></script>
- -

Usage

- -There are two ways to use the library: -

External library handling

+

Engine Usage

-

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 SetExternalLibLocation function. Make sure to call it before any other engine calls.

+

These documents help you understanding how to use the engine in your own solution.

-

Automatic initialization

- -

Create some elements anywhere on your page with the class name online-3d-viewer. You can create multiple elements with different parameters.

- -
<div class="online_3d_viewer"
-    style="width: 800px; height: 600px;"
-    model="model.obj, model.mtl">
-</div>
- -

You can specify several attributes:

-

After placing the elements, call the Init3DViewerElements function to initalize all the viewers. It must be called from the main JavaScript file outside of the onload event.

+

Contribution

-
// tell the engine where to find the libs folder
-OV.SetExternalLibLocation ('libs');
-// init all viewers on the page
-OV.Init3DViewerElements ();
+

If you would like to contribute to the codebase, these documents help you to start.

-

Initialization from code

- -

You can also initalize the engine from code. In this case you can provide all the parameters as a JavaScript object. See the EmbeddedViewer documentation for more details.

- -
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'
-    ]);
-});
+ diff --git a/docs/static/style.css b/docs/static/style.css index 9c5d704..5d7e680 100644 --- a/docs/static/style.css +++ b/docs/static/style.css @@ -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; diff --git a/tools/generate_docs.py b/tools/generate_docs.py index 1f13f80..6c62b15 100644 --- a/tools/generate_docs.py +++ b/tools/generate_docs.py @@ -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 = '
\n' + Tools.GetFileContent (sourceHtmlPath) + '\n
' - 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 = '
\n' + Tools.GetFileContent (sourceHtmlPath) + '\n
' + 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