Online 3D Viewer Cookies Policy
- -- Like most similar websites, Online 3D Viewer (the "Website") uses cookies. - On this page we explain more about cookies and how we use them. -
-What are cookies?
-- Cookies are small text files that are stored in your web browser that allows Online 3D Viewer or a third party to recognize you. - Cookies can be used to collect, store and share bits of information about your activities across websites, including on - Online 3D Viewer Website. -
-- Cookies might be used for the following purposes: -
--
-
- To provide analytics -
- To store your preferences -
- Online 3D Viewer uses both session cookies and persistent cookies. -
-- A session cookie is used to identify a particular visit to our Website. These cookies expire after a short time, - or when you close your web browser after using our Website. We use these cookies to identify you during a single browsing session, - such as when you visit our Website. -
-- A persistent cookie will remain on your devices for a set period of time specified in the cookie. - We use these cookies where we need to identify you over a longer period of time. For example, - we would use a persistent cookie to store your preferences on the Website. -
-How do third parties use cookies on the Website?
-- Third party companies like analytics companies use cookies to collect user information on an anonymous basis. - They may use that information to build a profile of your activities on the Online 3D Viewer Website and - other websites that you've visited. -
-What are your cookies options?
-- If you don't like the idea of cookies or certain types of cookies, you can change your browser's settings to - delete cookies that have already been set and to not accept new cookies. To learn more about how to do this, - visit the help pages of your browser. -
-- Please note, however, that if you delete cookies or do not accept them, you might not be able to use all of - the features we offer, you may not be able to store your preferences, and some of our pages might not display properly. -
+ +Cookies Policy
++ Like most similar websites, Online 3D Viewer (the "Website") uses cookies. + On this page we explain more about cookies and how we use them. +
+What are cookies?
++ Cookies are small text files that are stored in your web browser that allows Online 3D Viewer or a third party to recognize you. + Cookies can be used to collect, store and share bits of information about your activities across websites, including on + Online 3D Viewer Website. +
++ Cookies might be used for the following purposes: +
+-
+
- To provide analytics +
- To store your preferences +
+ Online 3D Viewer uses both session cookies and persistent cookies. +
++ A session cookie is used to identify a particular visit to our Website. These cookies expire after a short time, + or when you close your web browser after using our Website. We use these cookies to identify you during a single browsing session, + such as when you visit our Website. +
++ A persistent cookie will remain on your devices for a set period of time specified in the cookie. + We use these cookies where we need to identify you over a longer period of time. For example, + we would use a persistent cookie to store your preferences on the Website. +
+How do third parties use cookies on the Website?
++ Third party companies like analytics companies use cookies to collect user information on an anonymous basis. + They may use that information to build a profile of your activities on the Online 3D Viewer Website and + other websites that you've visited. +
+What are your cookies options?
++ If you don't like the idea of cookies or certain types of cookies, you can change your browser's settings to + delete cookies that have already been set and to not accept new cookies. To learn more about how to do this, + visit the help pages of your browser. +
++ Please note, however, that if you delete cookies or do not accept them, you might not be able to use all of + the features we offer, you may not be able to store your preferences, and some of our pages might not display properly. +
+Online 3D Viewer Frequently Asked Questions
- -- Here you can find the frequently asked questions for Online 3D Viewer. - Click on a question to see the answer. If you can't find your answer here, feel free to - create an issue on GitHub. -
- -Model Loading
- -No importable file found - what does that mean?
-- It means that none of your files are importable. Online 3D Viewer tries to detect importable files - by extension. Check if your format in the supported file formats list, and make sure that you use the - proper extension. -
-Failed to load file for import - what does that mean?
-- It means that an importable file format is detected, but the website failed to load the file. It usually - happens when you try to load a model from an external url. -
-- To resolve this issue, check if your url works in a browser window. -
-
-
- - If it works, it means that your url is ok, but the website can't access it. Usually it's caused by a CORS (Cross-Origin Resource Sharing) policy violation. - It means that the server that hosts the model doesn't allow requests from a different origin. To resolve this issue, allow CORS requests on the server. - -
- - If it doesn't work, it means that your url is wrong. Fix the url. - -
Failed to import model - what does that mean?
-- It means that an importable file is found, the import process is started, but failed for some reason. - If the error message doesn't help, create an issue on GitHub. -
-Why does my model works fine locally, but not from an url?
-- Usually it's caused by a CORS (Cross-Origin Resource Sharing) policy violation. - It means that the server that hosts the model doesn't allow requests from a different origin. To resolve this issue, allow CORS requests on the server. -
-Model Display
- -Why is my model completely gray?
-- Some file formats are coming with no material information (e.g. stl). These models will be visualized - with a default gray color. You can easily change this color in the settings panel () on the right. -
-- Some file formats are coming in multiple files, and material information can be in a separate file - (e.g. obj files are usually working with mtl files). Check the files panel for any missing files (), and if you - have the file, import it together with the main file. -
-Model Share
- -Why does sharing fail?
-- Online 3D Viewer doesn't store models, everything happens in your browser. Sharing possible only if your - files are coming from an external server. For example you can share a model that is loaded using the - open url button (). -
-- When you drag and drop a model, or load it using the open button (), the model - is not publicly available, so in this case sharing is not possible. -
-+ Here you can find the frequently asked questions for 3dviewer.net. + If you can't find your answer here, feel free to + create an issue on GitHub. +
+Model loading
+No importable file found - what does that mean?
++ It means that none of your files are importable. Online 3D Viewer tries to detect importable files + by extension. Check if your format in the supported file formats list, and make sure that you use the + proper extension. +
+Failed to load file for import - what does that mean?
++ It means that an importable file format is detected, but the website failed to load the file. It usually + happens when you try to load a model from an external url. +
++ To resolve this issue, check if your url works in a browser window. +
-
+
- + If it works, it means that your url is ok, but the website can't access it. Usually it's caused by a CORS (Cross-Origin Resource Sharing) policy violation. + It means that the server that hosts the model doesn't allow requests from a different origin. To resolve this issue, allow CORS requests on the server. + +
- + If it doesn't work, it means that your url is wrong. Fix the url. + +
Failed to import model - what does that mean?
++ It means that an importable file is found, the import process is started, but failed for some reason. + If the error message doesn't help, create an issue on GitHub. +
+Why does my model works fine locally, but not from an url?
++ Usually it's caused by a CORS (Cross-Origin Resource Sharing) policy violation. + It means that the server that hosts the model doesn't allow requests from a different origin. To resolve this issue, allow CORS requests on the server. +
+Model display
+Why is my model completely gray?
++ Some file formats are coming with no material information (e.g. stl). These models will be visualized + with a default gray color. You can easily change this color in the settings panel () on the right. +
++ Some file formats are coming in multiple files, and material information can be in a separate file + (e.g. obj files are usually working with mtl files). Check the files panel for any missing files (), and if you + have the file, import it together with the main file. +
+Model sharing
+Why does sharing fail?
++ Online 3D Viewer doesn't store models, everything happens in your browser. Sharing possible only if your + files are coming from an external server. For example you can share a model that is loaded using the + open url button (). +
++ When you drag and drop a model, or load it using the open button (), the model + is not publicly available, so in this case sharing is not possible. +
+Online 3D Viewer Manual
+ +- This is the user manual for the 3dviewer.net website. - The website can open several 3D file formats and visualize the model in your browser. - It supports obj, 3ds, stl, ply, gltf, glb, off, 3dm, fbx, and more. + This is the user manual of 3dviewer.net. + The website can open several 3D file formats and visualize them in your browser. + It supports obj, 3ds, stl, ply, gltf, glb, off, 3dm, fbx, and much more.
--
-
-
- Supported file formats -
- Loading models -
- Loading models from your computer -
- Loading models hosted on a web server -
- Loading models models hosted on GitHub -
- Loading models models hosted on DropBox -
- Missing files -
- Sharing and embedding models -
- Model and visualization settings -
- Exporting models -
- Troubleshooting -
- Self-hosted viewer -
- Cookies policy -
-
-
Supported file formats
+Supported formats
The website supports several file formats for import and export. If a file format has text and binary version, usually it's recommended to use the binary version.
-
| Format | Extension | @@ -61,7 +45,6 @@Import | Export | Source | -Comment | |
|---|---|---|---|---|---|---|
| Wavefront | @@ -70,7 +53,6 @@✓ | ✓ | Native | -|||
| 3D Studio | @@ -79,7 +61,6 @@✓ | ✗ | Native | -|||
| Stereolithography | @@ -88,14 +69,14 @@✓ | ✓ | Native | -|||
| + | binary | ✓ | ✓ | Native | -||
| Polygon File Format | @@ -104,14 +85,14 @@✓ | ✓ | Native | -|||
| + | binary | ✓ | ✓ | Native | -||
| glTF | @@ -120,15 +101,14 @@✓ | ✓ | Native | -|||
| glb | binary | ✓ | ✓ | Native | -||
| Object File Format | @@ -137,14 +117,14 @@✓ | ✓ | Native | -|||
| + | binary | ✗ | ✗ | Native | -||
| Dotbim | @@ -153,7 +133,6 @@✓ | ✓ | Native | -|||
| Rhinoceros 3D | @@ -162,7 +141,6 @@✓ | ✓ | rhino3dm | -experimental | ||
| Filmbox | @@ -171,14 +149,14 @@✓ | ✗ | three.js | -experimental | ||
| + | binary | ✓ | ✗ | three.js | -experimental | |
| Collada | @@ -187,7 +165,6 @@✓ | ✗ | three.js | -experimental | ||
| Virtual Reality Modeling Language | @@ -196,7 +173,6 @@✓ | ✗ | three.js | -experimental | ||
| 3D Manufacturing Format | @@ -205,7 +181,6 @@✓ | ✗ | three.js | -experimental | ||
| STEP | @@ -214,7 +189,6 @@✓ | ✗ | occt-import-js | -highly experimental | ||
| Industry Foundation Classes | @@ -223,25 +197,22 @@✓ | ✗ | web-ifc | -highly experimental |
Loading models
+Loading models
There are several ways to load models. You can use files from your computer or load files hosted on an external web server.
- Please note, that some 3D models are built up from multiple files (for example an obj file usually comes with an mtl file, - and some texture files). For the correct visualization you have to import all of the required files. See the Missing files + Please note, that some 3D models are built up from multiple files (for example an obj file usually comes with an mtl file + and some texture files). For the correct visualization you have to import all of the required files. See the Missing files section for more details.
- -Loading models from your computer
+Loading models from your computer
You can load models from your computer. In this case the model won't be uploaded to any web server, - the whole visualization happens in your browser. + the entire process happens in your browser.
There are two ways to load models from your computer: @@ -259,70 +230,57 @@ it's also possible to load an entire folder from your computer.
- If multiple files can be loaded, a dialog will appear, where you can select which file would you like to import. + If multiple files can be loaded, a dialog will appear where you can select which file would you like to import.
- -Loading models hosted on a web server
+Loading models hosted on a web server
You can load models by url with the open url button () on the toolbar. - Here you can list all of the model files. You should place every file in a separate line. + Here you can list all the required files. You should place every file in a separate line.
- To make this work, CORS (Cross-Origin Resource Sharing) must be enabled on the server. + To make this work, CORS (Cross-Origin Resource Sharing) must be enabled on the remote server.
- -Loading models hosted on GitHub
+Loading models hosted on GitHub
- To load a model hosted on GitHub follow the steps below: + To load a model hosted on GitHub follow the steps below.
-
-
- Commit models to GitHub with all the required files. +
- Open the file or files on GitHub, and copy the link of them from the address bar.
- Go to 3dviewer.net, and click on the open url button () on the toolbar. -
-
- Open the files on GitHub, copy the link of the file from the address bar, and paste it in the dialog. See the example below.
- - https://github.com/kovacsv/Online3DViewer/blob/master/test/testfiles/3ds/cube_four_instances.3ds-
- https://github.com/kovacsv/Online3DViewer/blob/master/test/testfiles/3ds/texture.png -
- - Click on OK. +
- Paste file the link or links in the dialog, and click on OK.
Loading models hosted on DropBox
+Loading models hosted on DropBox
To load a model hosted on DropBox follow the steps below:
- Upload models to DropBox with all the required files. +
- Get the sharing link or links from DropBox.
- Go to 3dviewer.net, and click on the open url button () on the toolbar. -
-
- Get the sharing link from DropBox for all of the files, and paste it in the dialog. See the example below.
- - https://www.dropbox.com/s/wd6lt7h4xa8fuv0/cube_four_instances.3ds?dl=0-
- https://www.dropbox.com/s/6dfk1jveevbofxm/texture.png?dl=0 -
- - Click on OK. +
- Paste file the link or links in the dialog, and click on OK.
Missing files
+Missing files
Sometimes you see missing files in the tree. It means that your model refers to another files, but they are not selected to import. To solve the issue you have to import the model again together with the referenced files, or just import the missing files on their own.
- -Sharing and embedding models
+Exporting models
++ You can export your model in several file formats. To achieve this, click on the export button () on the toolbar. + After that, select the format you would like to export to, and click on Export. If the result contains multiple files, + they will be automatically zipped. +
+Sharing models
If your models are hosted on a web server, you can share the link with others, or you can generate embedding code to integrate the viewer in your website. To get the sharing link or the embedding code, click on the share model button () on the toolbar.
- -Model and visualization settings
+Settings
You can access model and visualization settings by opening the settings panel () on the right.
@@ -330,7 +288,12 @@- Background Color: This will change the background color of the canvas. It has no effect on model export, - but the background color will be visible when you export a png image. + but the background color will be visible when you create a snapshot. + +
- + Show Edges: Here you can set the edge display parameters. If edges are visible, you can choose a color + for all edges, and a threshold angle. Edges will be visible only if the angle between the adjoining faces + exceeds the threshold.
- Default Color: This color is used when there is no material information in the model (for example in case @@ -338,35 +301,11 @@ with the chosen color.
- - Edge Display: Here you can set the edge display parameters. If edges are visible, you can choose a color - for all edges, and a threshold angle. Edges will be visible only if the angle between the adjoining faces - exceeds the threshold. - -
- - Appearance: Switch between light and dark themes. + Dark Mode: Switch between light and dark themes.
Troubleshooting
-- If you have issues, you can check the Frequently Asked Questions page, or you can create an issue on GitHub. -
- -Exporting models
-- You can export your model in several file formats. To achieve this, click on the export button () on the toolbar. - After that, select the format you would like to export to, and download the resulting files one by one. -
- -Self-hosted viewer
-- You can use the code without involving the official website. - In this case you should self-host the viewer code and the models as well. - See the developer documentation for details. -
- -Cookies policy
+Cookies
You can check the policy at the Cookies Policy page.
diff --git a/website/info/info.css b/website/info/info.css deleted file mode 100644 index 4d642b8..0000000 --- a/website/info/info.css +++ /dev/null @@ -1,166 +0,0 @@ -html, body -{ - color: #000000; - background: #ffffff; - font-size: 16px; - font-family: Arial, Helvetica, sans-serif; - scroll-behavior: smooth -} - -a -{ - color: #3393bd; - text-decoration: none; -} - -a:hover -{ - text-decoration: underline; -} - -i.icon -{ - font-size: 16px; - margin: 0px 2px; - display: inline-block; - position: relative; - bottom: -4px; -} - -h1 -{ - font-size: 27px; - font-weight: normal; - margin-top: 30px; - margin-bottom: 20px; - padding: 10px 0px; - border-bottom: 1px solid #cccccc; -} - -h1 a -{ - color: inherit; -} - -h1 a:hover -{ - text-decoration: none; -} - -h2 -{ - font-size: 25px; - font-weight: normal; - margin-top: 30px; - margin-bottom: 20px; - padding: 10px 0px; - border-bottom: 1px solid #cccccc; -} - -h3 -{ - font-size: 21px; - font-weight: normal; - margin-top: 30px; - margin-bottom: 20px; -} - -p -{ - text-align: justify; - margin: 10px 0px; - line-height: 25px; -} - -p.info -{ - background: #e4f4ff; - padding: 10px; - border-left: 3px solid #3393bd; -} - -ol, ul -{ - padding: 0px 0px 0px 25px; -} - -li -{ - text-align: justify; - line-height: 25px; - margin: 10px 0px; -} - -table -{ - border-collapse: collapse; -} - -table td, th -{ - padding: 10px; - border: 1px solid #dddddd; -} - -table th -{ - background: #fafafa; -} - -table td.center -{ - text-align: center; -} - -table td.green -{ - color: #21c23c; - font-weight: bold; -} - -table td.red -{ - color: #bf233d; - font-weight: bold; -} - -div.main -{ - width: 920px; - margin: 30px auto; -} - -div.code -{ - background: #f0f0f0; - font-family: monospace; - font-size: 14px; - margin: 10px 0px; - padding : 5px; - overflow: auto; - white-space: nowrap; -} - -h3.question -{ - cursor: pointer; - margin-top: 15px; - margin-bottom: 20px; -} - -div.answer -{ - display: none; - margin-bottom: 30px; -} - -@media only screen and (max-width: 1000px) -{ - -div.main -{ - width: auto; - margin: 0px 20px; -} - -} diff --git a/website/info/js/info.js b/website/info/js/info.js new file mode 100644 index 0000000..41b7df3 --- /dev/null +++ b/website/info/js/info.js @@ -0,0 +1,42 @@ +function CreateElement (parentElem, typeName, className) +{ + let elem = document.createElement (typeName); + if (className !== null) { + elem.classList.add (className); + } + parentElem.appendChild (elem); + return elem; +} + +function GenerateMenu (menuDiv, activeMenu) +{ + let items = [ + { name: 'MANUAL', link: 'index.html' }, + { name: 'FAQ', link: 'faq.html' } + ]; + for (let item of items) { + let element = CreateElement (menuDiv, 'a', null) + element.innerHTML = item.name; + element.setAttribute ('href', item.link); + if (item.name === activeMenu) { + element.classList.add ('active'); + } + } +} + +function GenerateHeader (activeMenu) +{ + let headerDiv = CreateElement (document.body, 'div', 'header'); + let frameDiv = CreateElement (headerDiv, 'div', 'frame'); + + let logoDiv = CreateElement (frameDiv, 'div', 'logo'); + let logoImgLink = CreateElement (logoDiv, 'a', null); + logoImgLink.setAttribute ('href', 'index.html'); + let logoImgWithTextDiv = CreateElement (logoImgLink, 'img', 'logo_with_text'); + logoImgWithTextDiv.src = 'images/3dviewer_net_logo_text.svg'; + let logoImgWithoutTextDiv = CreateElement (logoImgLink, 'img', 'logo_without_text'); + logoImgWithoutTextDiv.src = 'images/3dviewer_net_logo.svg'; + + let menuDiv = CreateElement (frameDiv, 'div', 'menu'); + GenerateMenu (menuDiv, activeMenu); +}