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

Update info page.

Browse Source
This commit is contained in:
kovacsv 2022-06-04 08:14:44 +02:00
parent 8194ef9849
commit 8a56d50c87
17 changed files with 556 additions and 442 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
tools/generate_icon_font.py
View File

@ -43,7 +43,7 @@ def Main (argv):
Tools.ReplaceStringInFile (websiteIconsCssPath, './O3DVIcons.woff', 'O3DVIcons/O3DVIcons.woff')
shutil.copy (os.path.join (iconFontDir, 'O3DVIcons.woff'), websiteIconFontDir)
infoCssDir = os.path.join (rootDir, 'website', 'info')
infoCssDir = os.path.join (rootDir, 'website', 'info', 'css')
shutil.copy (os.path.join (iconFontDir, 'O3DVIcons.css'), os.path.join (infoCssDir, 'icons.css'))
shutil.copy (os.path.join (iconFontDir, 'O3DVIcons.woff'), os.path.join (infoCssDir, 'O3DVIcons.woff'))

108
website/info/cookies.html
View File

@ -6,9 +6,11 @@
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="icon" type="image/png" href="../assets/images/3dviewer_net_favicon.ico">
<title>Online 3D Viewer Cookies Policy</title>
<title>Online 3D Viewer</title>
<link rel="stylesheet" type="text/css" href="info.css">
<link rel="stylesheet" type="text/css" href="css/icons.css">
<link rel="stylesheet" type="text/css" href="css/info.css">
<script type="text/javascript" src="js/info.js"></script>
<!-- meta start -->
<!-- meta end -->
@ -19,55 +21,59 @@
</head>
<body>
<div class="main">
<h1><a href="cookies.html">Online 3D Viewer Cookies Policy</a></h1>
<p>
Like most similar websites, <a href="https://3dviewer.net">Online 3D Viewer</a> (the "Website") uses cookies.
On this page we explain more about cookies and how we use them.
</p>
<h2>What are cookies?</h2>
<p>
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.
</p>
<p>
Cookies might be used for the following purposes:
</p>
<ul>
<li>To provide analytics</li>
<li>To store your preferences</li>
</ul>
<p>
Online 3D Viewer uses both session cookies and persistent cookies.
</p>
<p>
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.
</p>
<p>
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.
</p>
<h2>How do third parties use cookies on the Website?</h2>
<p>
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.
</p>
<h2>What are your cookies options?</h2>
<p>
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.
</p>
<p>
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.
</p>
<script type="text/javascript">
GenerateHeader ('COOKIES');
</script>
<div class="frame">
<div class="main">
<h1 class="first">Cookies Policy</h1>
<p>
Like most similar websites, <a href="https://3dviewer.net">Online 3D Viewer</a> (the "Website") uses cookies.
On this page we explain more about cookies and how we use them.
</p>
<h2>What are cookies?</h2>
<p>
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.
</p>
<p>
Cookies might be used for the following purposes:
</p>
<ul>
<li>To provide analytics</li>
<li>To store your preferences</li>
</ul>
<p>
Online 3D Viewer uses both session cookies and persistent cookies.
</p>
<p>
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.
</p>
<p>
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.
</p>
<h2>How do third parties use cookies on the Website?</h2>
<p>
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.
</p>
<h2>What are your cookies options?</h2>
<p>
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.
</p>
<p>
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.
</p>
</div>
</div>
</body>

0
website/info/O3DVIcons.woff → website/info/css/O3DVIcons.woff
View File

93
website/info/css/Quicksand/OFL.txt Normal file
View File

@ -0,0 +1,93 @@
Copyright 2011 The Quicksand Project Authors (https://github.com/andrew-paglinawan/QuicksandFamily), with Reserved Font Name “Quicksand”.
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

BIN
website/info/css/Quicksand/Quicksand-Bold.ttf Normal file
View File

Binary file not shown.

BIN
website/info/css/Quicksand/Quicksand-Light.ttf Normal file
View File

Binary file not shown.

BIN
website/info/css/Quicksand/Quicksand-Medium.ttf Normal file
View File

Binary file not shown.

BIN
website/info/css/Quicksand/Quicksand-Regular.ttf Normal file
View File

Binary file not shown.

BIN
website/info/css/Quicksand/Quicksand-SemiBold.ttf Normal file
View File

Binary file not shown.

0
website/info/icons.css → website/info/css/icons.css
View File

232
website/info/css/info.css Normal file
View File

@ -0,0 +1,232 @@
@font-face
{
font-family: Quicksand;
src: url('Quicksand/Quicksand-Regular.ttf');
}
html, body
{
color: #000000;
background: #ffffff;
font-size: 16px;
font-family: Quicksand, Arial, Helvetica, sans-serif;
scroll-behavior: smooth;
margin: 0px;
padding: 0px;
}
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: 25px;
margin-top: 50px;
margin-bottom: 20px;
}
h1.first
{
margin-top: 0px;
}
h2
{
font-size: 19px;
margin-top: 30px;
margin-bottom: 20px;
}
p
{
text-align: justify;
line-height: 25px;
margin-top: 0px;
margin-bottom: 15px;
}
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
{
width: 100%;
border-collapse: collapse;
}
table td, th
{
text-align: left;
padding: 6px 10px;
border: 1px solid #dddddd;
}
table td.hidden
{
display: none;
}
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.header
{
margin-bottom: 20px;
box-shadow: 0px 0px 10px #dddddd;
overflow: auto;
}
div.frame
{
padding: 15px;
width: 920px;
margin: 0px auto;
overflow: auto;
}
div.logo
{
float: left;
}
div.logo img
{
height: 40px;
display: block;
}
div.logo img.logo_with_text
{
display: block;
}
div.logo img.logo_without_text
{
display: none;
}
div.menu
{
float: right;
}
div.menu a
{
color: #000000;
padding: 10px;
display: block;
float: left;
text-decoration: none;
}
div.menu a.active
{
font-weight: bold;
}
div.main
{
padding: 10px 0px;
overflow: auto;
}
@media only screen and (max-width: 500px)
{
div.logo img.logo_with_text
{
display: none;
}
div.logo img.logo_without_text
{
display: block;
}
div.menu
{
float: left;
margin-left: 15px;
}
}
@media only screen and (max-width: 1000px)
{
div.frame
{
width: auto;
}
div.manual_menu
{
display: none;
}
div.manual_main
{
margin-left: 0px;
}
table.formats th:nth-child(1),
table.formats td:nth-child(1),
table.formats th:nth-child(6),
table.formats td:nth-child(6)
{
display: none;
}
}

178
website/info/faq.html
View File

@ -6,10 +6,11 @@
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="icon" type="image/png" href="../assets/images/3dviewer_net_favicon.ico">
<title>Online 3D Viewer Frequently Asked Questions</title>
<title>Online 3D Viewer</title>
<link rel="stylesheet" type="text/css" href="icons.css">
<link rel="stylesheet" type="text/css" href="info.css">
<link rel="stylesheet" type="text/css" href="css/icons.css">
<link rel="stylesheet" type="text/css" href="css/info.css">
<script type="text/javascript" src="js/info.js"></script>
<!-- meta start -->
<!-- meta end -->
@ -17,113 +18,76 @@
<!-- analytics start -->
<!-- analytics end -->
<script type="text/javascript">
window.addEventListener ('load', function () {
let questions = document.getElementsByClassName ('question');
let answers = document.getElementsByClassName ('answer');
for (let questionIndex = 0; questionIndex < questions.length; questionIndex++) {
let question = questions[questionIndex];
let answer = answers[questionIndex];
question.addEventListener ('click', () => {
if (answer.style.display === 'block') {
answer.style.display = 'none';
} else {
answer.style.display = 'block';
}
});
}
});
</script>
</head>
<body>
<div class="main">
<h1><a href="faq.html">Online 3D Viewer Frequently Asked Questions</a></h1>
<p>
Here you can find the frequently asked questions for <a href="https://3dviewer.net">Online 3D Viewer</a>.
Click on a question to see the answer. If you can't find your answer here, feel free to
<a href="https://github.com/kovacsv/Online3DViewer/issues">create an issue on GitHub</a>.
</p>
<h2>Model Loading</h2>
<h3 class="question">No importable file found - what does that mean?</h3>
<div class="answer">
<p>
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 <a href="index.html#supported_file_formats">supported file formats list</a>, and make sure that you use the
proper extension.
</p>
</div>
<h3 class="question">Failed to load file for import - what does that mean?</h3>
<div class="answer">
<p>
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.
</p>
<p>
To resolve this issue, check if your url works in a browser window.
<ul>
<li>
If it works, it means that your url is ok, but the website can't access it. Usually it's caused by a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">CORS (Cross-Origin Resource Sharing)</a> 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.
</li>
<li>
If it doesn't work, it means that your url is wrong. Fix the url.
</li>
</ul>
</p>
</div>
<h3 class="question">Failed to import model - what does that mean?</h3>
<div class="answer">
<p>
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, <a href="https://github.com/kovacsv/Online3DViewer/issues">create an issue on GitHub</a>.
</p>
</div>
<h3 class="question">Why does my model works fine locally, but not from an url?</h3>
<div class="answer">
<p>
Usually it's caused by a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">CORS (Cross-Origin Resource Sharing)</a> 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.
</p>
</div>
<h2>Model Display</h2>
<h3 class="question">Why is my model completely gray?</h3>
<div class="answer">
<p>
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 (<i class="icon icon-settings"></i>) on the right.
</p>
<p>
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 (<i class="icon icon-missing_files"></i>), and if you
have the file, import it together with the main file.
</p>
</div>
<h2>Model Share</h2>
<h3 class="question">Why does sharing fail?</h3>
<div class="answer">
<p>
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 (<i class="icon icon-open_url"></i>).
</p>
<p>
When you drag and drop a model, or load it using the open button (<i class="icon icon-open"></i>), the model
is not publicly available, so in this case sharing is not possible.
</p>
</div>
<script type="text/javascript">
GenerateHeader ('FAQ');
</script>
<div class="frame">
<div class="main">
<p>
Here you can find the frequently asked questions for <a href="https://3dviewer.net">3dviewer.net</a>.
If you can't find your answer here, feel free to
<a href="https://github.com/kovacsv/Online3DViewer/issues">create an issue on GitHub</a>.
</p>
<h1 id="model_loading">Model loading</h1>
<h2>No importable file found - what does that mean?</h2>
<p>
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 <a href="index.html#supported_formats">supported file formats list</a>, and make sure that you use the
proper extension.
</p>
<h2>Failed to load file for import - what does that mean?</h2>
<p>
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.
</p>
<p>
To resolve this issue, check if your url works in a browser window.
<ul>
<li>
If it works, it means that your url is ok, but the website can't access it. Usually it's caused by a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">CORS (Cross-Origin Resource Sharing)</a> 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.
</li>
<li>
If it doesn't work, it means that your url is wrong. Fix the url.
</li>
</ul>
</p>
<h2>Failed to import model - what does that mean?</h2>
<p>
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, <a href="https://github.com/kovacsv/Online3DViewer/issues">create an issue on GitHub</a>.
</p>
<h2>Why does my model works fine locally, but not from an url?</h2>
<p>
Usually it's caused by a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">CORS (Cross-Origin Resource Sharing)</a> 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.
</p>
<h1 id="model_display">Model display</h1>
<h2>Why is my model completely gray?</h2>
<p>
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 (<i class="icon icon-settings"></i>) on the right.
</p>
<p>
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 (<i class="icon icon-missing_files"></i>), and if you
have the file, import it together with the main file.
</p>
<h1 id="model_sharing">Model sharing</h1>
<h2>Why does sharing fail?</h2>
<p>
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 (<i class="icon icon-open_url"></i>).
</p>
<p>
When you drag and drop a model, or load it using the open button (<i class="icon icon-open"></i>), the model
is not publicly available, so in this case sharing is not possible.
</p>
</div>
</div>
</body>

2
website/info/images/3dviewer_net_logo.svg Normal file
View File

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="logo" version="1.1" viewBox="0 0 60 60" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><clipPath id="d-5"><use width="100%" height="100%" overflow="visible" xlink:href="#c"/></clipPath></defs><g transform="translate(4.4 -.117)"><defs><path id="a" d="m-5-1h62v62h-62z"/></defs><clipPath id="b"><use width="100%" height="100%" overflow="visible" xlink:href="#a"/></clipPath><g clip-path="url(#b)"><defs><path id="c" d="m-5-1h62v62h-62z"/></defs><clipPath id="d"><use width="100%" height="100%" overflow="visible" xlink:href="#c"/></clipPath><g stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"><path transform="translate(.039092 .02257)" d="m38.361 22.877-12.4-7.3 9.2e-5 -14.177 24.8 14.2v28.8l-12.4-7.3226z" clip-path="url(#d)" fill="#4688b4"/><path transform="rotate(120,26,30.082)" d="m38.4 22.923-12.522-7.0887 0.14178-14.4 24.78 14.166v28.8l-12.522-7.0883z" clip-path="url(#d-5)" fill="#64c0ff"/><path d="m26 30v14.4l12.4-7.3v-14.2z" clip-path="url(#d)" fill="#294e67"/><path d="m13.6 37.1v-14.2l12.4-7.3v-14.177l-24.8 14.177v28.8z" clip-path="url(#d)" fill="#294e67"/><path d="m26 15.6-12.4 7.3 12.4 7.1 12.4-7.1z" clip-path="url(#d)" fill="#64c0ff"/><path d="m13.6 22.9 12.4 7.1v14.4l-12.4-7.3z" clip-path="url(#d)" fill="#4688b4"/></g></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

2
website/info/images/3dviewer_net_logo_text.svg Normal file
View File

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="logo" version="1.1" viewBox="0 0 286 60" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M-5-1h62v62H-5z"/><clipPath id="d-5"><use width="100%" height="100%" overflow="visible" xlink:href="#c"/></clipPath><path id="a-85" d="m-5-1h62v62h-62z"/><path id="c" d="m-5-1h62v62h-62z"/></defs><clipPath id="b"><use width="100%" height="100%" overflow="visible" xlink:href="#a"/></clipPath><g transform="translate(.10025)" fill="#15334a"><path transform="matrix(.78095 0 0 .78095 14.238 8.152)" d="m75.237 18.5c-6.008 0-10.237 4.52-10.237 10.528 0 5.98 4.229 10.47 10.237 10.47 5.979 0 10.207-4.49 10.207-10.47 0-6.007-4.228-10.528-10.207-10.528zm6.97 10.528c0 4.375-2.741 7.612-6.97 7.612-4.23 0-7-3.237-7-7.612 0-4.403 2.77-7.699 7-7.699 4.229 0 6.97 3.296 6.97 7.7zm21.839-10.236v16.332l-10.906-16.332h-3.88v20.415h3.091v-16.39l10.879 16.39h3.908v-20.415zm10.978 17.615v-17.615h-3.15v20.415h13.649v-2.8zm14.597-17.615v20.415h3.15v-20.415zm22.843 0v16.332l-10.907-16.332h-3.88v20.415h3.092v-16.39l10.879 16.39h3.908v-20.415zm22.031 2.741v-2.741h-14.203v20.415h14.203v-2.742h-11.112v-6.59h10.733v-2.655h-10.733v-5.687zm18.205 6.067 5.599-8.663v-0.145h-13.24v2.712h8.486l-5.425 8.195v0.146h2.625c2.77 0 4.696 1.458 4.696 3.47 0 1.984-1.663 3.442-4.083 3.442-1.692 0-3.908-0.67-6.33-2.07v3.382c2.334 1.05 4.434 1.459 6.242 1.43 4.258-0.03 7.291-2.538 7.291-6.154 0-3.092-2.537-5.25-5.862-5.746zm17.266-8.808h-7.408v20.415h7.408c6.183 0 10.849-4.2 10.849-10.208 0-5.92-4.666-10.207-10.85-10.207zm0.029 17.586h-4.287v-14.758h4.287c4.345 0 7.583 3.062 7.583 7.378 0 4.346-3.15 7.379-7.583 7.379zm34.925-17.586-5.833 17.47-5.862-17.47h-3.587l7.262 20.415h4.316l7.291-20.415zm7.056 0v20.415h3.15v-20.415zm22.26 2.741v-2.741h-14.203v20.415h14.203v-2.742h-11.112v-6.59h10.733v-2.655h-10.733v-5.687zm29.18-2.741-3.996 17.09-5.308-17.09h-3.733l-5.045 17.061-4.229-17.061h-3.733l5.687 20.415h4.404l4.754-17.411 5.045 17.41h4.404l5.454-20.414zm21.231 2.741v-2.741h-14.203v20.415h14.203v-2.742h-11.111v-6.59h10.732v-2.655h-10.732v-5.687zm17.253 17.674h4.024l-6.27-8.341c3.353-0.525 5.6-2.946 5.6-6.037 0-3.413-2.888-6.037-7-6.037h-9.012v20.415h3.15v-8.225h3.995zm-9.508-17.703h5.745c2.391 0 4.025 1.458 4.025 3.354 0 1.954-1.634 3.5-4.025 3.5h-5.745z" fill="#15334a" stroke-width="2.2231" aria-label="ONLINE 3D VIEWER"/></g><g transform="translate(-.7 .077394)"><clipPath id="b-3"><use width="100%" height="100%" overflow="visible" xlink:href="#a-85"/></clipPath><g clip-path="url(#b-3)"><clipPath id="d"><use width="100%" height="100%" overflow="visible" xlink:href="#c"/></clipPath><g stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"><path transform="translate(.039092 .02257)" d="m38.361 22.877-12.4-7.3 9.2e-5 -14.177 24.8 14.2v28.8l-12.4-7.3226z" clip-path="url(#d)" fill="#4688b4"/><path transform="rotate(120,26,30.082)" d="m38.4 22.923-12.522-7.0887 0.14178-14.4 24.78 14.166v28.8l-12.522-7.0883z" clip-path="url(#d-5)" fill="#64c0ff"/><path d="m26 30v14.4l12.4-7.3v-14.2z" clip-path="url(#d)" fill="#294e67"/><path d="m13.6 37.1v-14.2l12.4-7.3v-14.177l-24.8 14.177v28.8z" clip-path="url(#d)" fill="#294e67"/><path d="m26 15.6-12.4 7.3 12.4 7.1 12.4-7.1z" clip-path="url(#d)" fill="#64c0ff"/><path d="m13.6 22.9 12.4 7.1v14.4l-12.4-7.3z" clip-path="url(#d)" fill="#4688b4"/></g></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

173
website/info/index.html
View File

@ -6,10 +6,11 @@
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="icon" type="image/png" href="../assets/images/3dviewer_net_favicon.ico">
<title>Online 3D Viewer Manual</title>
<title>Online 3D Viewer</title>
<link rel="stylesheet" type="text/css" href="icons.css">
<link rel="stylesheet" type="text/css" href="info.css">
<link rel="stylesheet" type="text/css" href="css/icons.css">
<link rel="stylesheet" type="text/css" href="css/info.css">
<script type="text/javascript" src="js/info.js"></script>
<!-- meta start -->
<!-- meta end -->
@ -20,40 +21,23 @@
</head>
<body>
<div class="main">
<h1><a href=".">Online 3D Viewer Manual</a></h1>
<script type="text/javascript">
GenerateHeader ('MANUAL');
</script>
<div class="frame">
<div class="main">
<p>
This is the user manual for the <a href="https://3dviewer.net">3dviewer.net</a> 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 <a href="https://3dviewer.net">3dviewer.net</a>.
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.
</p>
<p>
<ol>
<li><a href="#supported_file_formats">Supported file formats</a></li>
<li><a href="#loading_models">Loading models</a></li>
<ol>
<li><a href="#loading_models_computer">Loading models from your computer</a></li>
<li><a href="#loading_models_server">Loading models hosted on a web server</a></li>
<li><a href="#loading_models_github">Loading models models hosted on GitHub</a></li>
<li><a href="#loading_models_dropbox">Loading models models hosted on DropBox</a></li>
<li><a href="#loading_models_missing_files">Missing files</a></li>
</ol>
<li><a href="#sharing_and_embedding_models">Sharing and embedding models</a></li>
<li><a href="#settings_panel">Model and visualization settings</a></li>
<li><a href="#exporting_models">Exporting models</a></li>
<li><a href="#troubleshooting">Troubleshooting</a></li>
<li><a href="#embed_selfhost">Self-hosted viewer</a></li>
<li><a href="#cookies_policy">Cookies policy</a></li>
</ol>
</p>
<h2 id="supported_file_formats">Supported file formats</h2>
<h1 id="supported_formats">Supported formats</h2>
<p>
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.
</p>
<p>
<table>
<table class="formats">
<tr>
<th>Format</th>
<th>Extension</th>
@ -61,7 +45,6 @@
<th>Import</th>
<th>Export</th>
<th>Source</th>
<th>Comment</th>
</tr>
<tr>
<td>Wavefront</td>
@ -70,7 +53,6 @@
<td class="center green">&#x2713</td>
<td class="center green">&#x2713</td>
<td>Native</td>
<td></td>
</tr>
<tr>
<td>3D Studio</td>
@ -79,7 +61,6 @@
<td class="center green">&#x2713</td>
<td class="center red">&#x2717</td>
<td>Native</td>
<td></td>
</tr>
<tr>
<td rowspan="2">Stereolithography</td>
@ -88,14 +69,14 @@
<td class="center green">&#x2713</td>
<td class="center green">&#x2713</td>
<td>Native</td>
<td></td>
</tr>
<tr>
<td class="hidden"></td>
<td class="hidden"></td>
<td>binary</td>
<td class="center green">&#x2713</td>
<td class="center green">&#x2713</td>
<td>Native</td>
<td></td>
</tr>
<tr>
<td rowspan="2">Polygon File Format</td>
@ -104,14 +85,14 @@
<td class="center green">&#x2713</td>
<td class="center green">&#x2713</td>
<td>Native</td>
<td></td>
</tr>
<tr>
<td class="hidden"></td>
<td class="hidden"></td>
<td>binary</td>
<td class="center green">&#x2713</td>
<td class="center green">&#x2713</td>
<td>Native</td>
<td></td>
</tr>
<tr>
<td rowspan="2">glTF</td>
@ -120,15 +101,14 @@
<td class="center green">&#x2713</td>
<td class="center green">&#x2713</td>
<td>Native</td>
<td></td>
</tr>
<tr>
<td class="hidden"></td>
<td>glb</td>
<td>binary</td>
<td class="center green">&#x2713</td>
<td class="center green">&#x2713</td>
<td>Native</td>
<td></td>
</tr>
<tr>
<td rowspan="2">Object File Format</td>
@ -137,14 +117,14 @@
<td class="center green">&#x2713</td>
<td class="center green">&#x2713</td>
<td>Native</td>
<td></td>
</tr>
<tr>
<td class="hidden"></td>
<td class="hidden"></td>
<td>binary</td>
<td class="center red">&#x2717</td>
<td class="center red">&#x2717</td>
<td>Native</td>
<td></td>
</tr>
<tr>
<td>Dotbim</td>
@ -153,7 +133,6 @@
<td class="center green">&#x2713</td>
<td class="center green">&#x2713</td>
<td>Native</td>
<td></td>
</tr>
<tr>
<td>Rhinoceros 3D</td>
@ -162,7 +141,6 @@
<td class="center green">&#x2713</td>
<td class="center green">&#x2713</td>
<td><a href="https://github.com/mcneel/rhino3dm">rhino3dm</a></td>
<td>experimental</td>
</tr>
<tr>
<td rowspan="2">Filmbox</td>
@ -171,14 +149,14 @@
<td class="center green">&#x2713</td>
<td class="center red">&#x2717</td>
<td><a href="https://github.com/mrdoob/three.js">three.js</a></td>
<td>experimental</td>
</tr>
<tr>
<td class="hidden"></td>
<td class="hidden"></td>
<td>binary</td>
<td class="center green">&#x2713</td>
<td class="center red">&#x2717</td>
<td><a href="https://github.com/mrdoob/three.js">three.js</a></td>
<td>experimental</td>
</tr>
<tr>
<td>Collada</td>
@ -187,7 +165,6 @@
<td class="center green">&#x2713</td>
<td class="center red">&#x2717</td>
<td><a href="https://github.com/mrdoob/three.js">three.js</a></td>
<td>experimental</td>
</tr>
<tr>
<td>Virtual Reality Modeling Language</td>
@ -196,7 +173,6 @@
<td class="center green">&#x2713</td>
<td class="center red">&#x2717</td>
<td><a href="https://github.com/mrdoob/three.js">three.js</a></td>
<td>experimental</td>
</tr>
<tr>
<td>3D Manufacturing Format</td>
@ -205,7 +181,6 @@
<td class="center green">&#x2713</td>
<td class="center red">&#x2717</td>
<td><a href="https://github.com/mrdoob/three.js">three.js</a></td>
<td>experimental</td>
</tr>
<tr>
<td>STEP</td>
@ -214,7 +189,6 @@
<td class="center green">&#x2713</td>
<td class="center red">&#x2717</td>
<td><a href="https://github.com/kovacsv/occt-import-js">occt-import-js</a></td>
<td>highly experimental</td>
</tr>
<tr>
<td>Industry Foundation Classes</td>
@ -223,25 +197,22 @@
<td class="center green">&#x2713</td>
<td class="center red">&#x2717</td>
<td><a href="https://github.com/tomvandig/web-ifc">web-ifc</a></td>
<td>highly experimental</td>
</tr>
</table>
</p>
<h2 id="loading_models">Loading models</h2>
<h1 id="loading_models">Loading models</h1>
<p>
There are several ways to load models. You can use files from your computer or load files hosted on an external web server.
</p>
<p class="info">
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 <a href="#loading_models_missing_files">Missing files</a>
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 <a href="#missing_files">Missing files</a>
section for more details.
</p>
<h3 id="loading_models_computer">Loading models from your computer</h3>
<h2>Loading models from your computer</h2>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<h3 id="loading_models_server">Loading models hosted on a web server</h3>
<h2>Loading models hosted on a web server</h2>
<p>
You can load models by url with the open url button (<i class="icon icon-open_url"></i>) 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.
</p>
<p class="info">
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.
</p>
<h3 id="loading_models_github">Loading models hosted on GitHub</h3>
<h2>Loading models hosted on GitHub</h2>
<p>
To load a model hosted on GitHub follow the steps below:
To load a model hosted on GitHub follow the steps below.
</p>
<p>
<ol>
<li>Commit models to GitHub with all the required files.</li>
<li>Open the file or files on GitHub, and copy the link of them from the address bar.</li>
<li>Go to <a href="https://3dviewer.net">3dviewer.net</a>, and click on the open url button (<i class="icon icon-open_url"></i>) on the toolbar.</li>
<li>
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.
<div class="code">
https://github.com/kovacsv/Online3DViewer/blob/master/test/testfiles/3ds/cube_four_instances.3ds<br>
https://github.com/kovacsv/Online3DViewer/blob/master/test/testfiles/3ds/texture.png
</div>
</li>
<li>Click on OK.</li>
<li>Paste file the link or links in the dialog, and click on OK.</li>
</ol>
</p>
<h3 id="loading_models_dropbox">Loading models hosted on DropBox</h3>
<h2>Loading models hosted on DropBox</h2>
<p>
To load a model hosted on DropBox follow the steps below:
</p>
<p>
<ol>
<li>Upload models to DropBox with all the required files.</li>
<li>Get the sharing link or links from DropBox.</li>
<li>Go to <a href="https://3dviewer.net">3dviewer.net</a>, and click on the open url button (<i class="icon icon-open_url"></i>) on the toolbar.</li>
<li>
Get the sharing link from DropBox for all of the files, and paste it in the dialog. See the example below.
<div class="code">
https://www.dropbox.com/s/wd6lt7h4xa8fuv0/cube_four_instances.3ds?dl=0<br>
https://www.dropbox.com/s/6dfk1jveevbofxm/texture.png?dl=0
</div>
</li>
<li>Click on OK.</li>
<li>Paste file the link or links in the dialog, and click on OK.</li>
</ol>
</p>
<h3 id="loading_models_missing_files">Missing files</h3>
<h2 id="missing_files">Missing files</h2>
<p>
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.
</p>
<h2 id="sharing_and_embedding_models">Sharing and embedding models</h2>
<h1 id="exporting_models">Exporting models</h1>
<p>
You can export your model in several file formats. To achieve this, click on the export button (<i class="icon icon-export"></i>) 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.
</p>
<h1 id="sharing_models">Sharing models</h1>
<p>
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 (<i class="icon icon-share"></i>) on the toolbar.
</p>
<h2 id="settings_panel">Model and visualization settings</h2>
<h1 id="settings">Settings</h1>
<p>
You can access model and visualization settings by opening the settings panel (<i class="icon icon-settings"></i>) on the right.
</p>
@ -330,7 +288,12 @@
<ul>
<li>
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.
</li>
<li>
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.
</li>
<li>
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.
</li>
<li>
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.
</li>
<li>
Appearance: Switch between light and dark themes.
Dark Mode: Switch between light and dark themes.
</li>
</ul>
</p>
<h2 id="troubleshooting">Troubleshooting</h2>
<p>
If you have issues, you can check the <a href="faq.html">Frequently Asked Questions</a> page, or you can <a href="https://github.com/kovacsv/Online3DViewer/issues">create an issue on GitHub</a>.
</p>
<h2 id="exporting_models">Exporting models</h2>
<p>
You can export your model in several file formats. To achieve this, click on the export button (<i class="icon icon-export"></i>) on the toolbar.
After that, select the format you would like to export to, and download the resulting files one by one.
</p>
<h2 id="embed_selfhost">Self-hosted viewer</h2>
<p>
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 <a href="https://github.com/kovacsv/Online3DViewer/wiki">developer documentation</a> for details.
</p>
<h2 id="cookies_policy">Cookies policy</h2>
<h1 id="cookies">Cookies</h1>
<p>
You can check the policy at the <a href="cookies.html">Cookies Policy</a> page.
</p>

166
website/info/info.css
View File

@ -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;
}
}

42
website/info/js/info.js Normal file
View File

@ -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);
}