Simplify event handler interface.
This commit is contained in:
kovacsv
parent
dbf1865c46
commit
74134c94a4
@ -2,213 +2,221 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html;charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no">
|
||||
<link rel="icon" type="image/png" href="assets/images/3dviewer_net_favicon.ico">
|
||||
<meta http-equiv="content-type" content="text/html;charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no">
|
||||
<link rel="icon" type="image/png" href="assets/images/3dviewer_net_favicon.ico">
|
||||
|
||||
<title>Online 3D Viewer</title>
|
||||
<title>Online 3D Viewer</title>
|
||||
|
||||
<!-- website libs start -->
|
||||
<link rel="stylesheet" type="text/css" href="../libs/pickr.monolith.min.css">
|
||||
<script type="text/javascript" src="../libs/pickr.es5.min.js"></script>
|
||||
<script type="text/javascript" src="../libs/three.min.js"></script>
|
||||
<!-- website libs end -->
|
||||
<!-- website libs start -->
|
||||
<link rel="stylesheet" type="text/css" href="../libs/pickr.monolith.min.css">
|
||||
<script type="text/javascript" src="../libs/pickr.es5.min.js"></script>
|
||||
<script type="text/javascript" src="../libs/three.min.js"></script>
|
||||
<!-- website libs end -->
|
||||
|
||||
<!-- meta start -->
|
||||
<!-- meta end -->
|
||||
<!-- meta start -->
|
||||
<!-- meta end -->
|
||||
|
||||
<!-- engine start -->
|
||||
<script type="text/javascript" src="../source/core/core.js"></script>
|
||||
<script type="text/javascript" src="../source/core/taskrunner.js"></script>
|
||||
<script type="text/javascript" src="../source/geometry/geometry.js"></script>
|
||||
<script type="text/javascript" src="../source/geometry/coord2d.js"></script>
|
||||
<script type="text/javascript" src="../source/geometry/coord3d.js"></script>
|
||||
<script type="text/javascript" src="../source/geometry/coord4d.js"></script>
|
||||
<script type="text/javascript" src="../source/geometry/quaternion.js"></script>
|
||||
<script type="text/javascript" src="../source/geometry/box3d.js"></script>
|
||||
<script type="text/javascript" src="../source/geometry/octree.js"></script>
|
||||
<script type="text/javascript" src="../source/geometry/matrix.js"></script>
|
||||
<script type="text/javascript" src="../source/geometry/transformation.js"></script>
|
||||
<script type="text/javascript" src="../source/geometry/tween.js"></script>
|
||||
<script type="text/javascript" src="../source/io/binaryreader.js"></script>
|
||||
<script type="text/javascript" src="../source/io/binarywriter.js"></script>
|
||||
<script type="text/javascript" src="../source/io/textwriter.js"></script>
|
||||
<script type="text/javascript" src="../source/io/bufferutils.js"></script>
|
||||
<script type="text/javascript" src="../source/io/fileutils.js"></script>
|
||||
<script type="text/javascript" src="../source/io/externallibs.js"></script>
|
||||
<script type="text/javascript" src="../source/model/color.js"></script>
|
||||
<script type="text/javascript" src="../source/model/material.js"></script>
|
||||
<script type="text/javascript" src="../source/model/triangle.js"></script>
|
||||
<script type="text/javascript" src="../source/model/property.js"></script>
|
||||
<script type="text/javascript" src="../source/model/object.js"></script>
|
||||
<script type="text/javascript" src="../source/model/mesh.js"></script>
|
||||
<script type="text/javascript" src="../source/model/meshbuffer.js"></script>
|
||||
<script type="text/javascript" src="../source/model/node.js"></script>
|
||||
<script type="text/javascript" src="../source/model/meshinstance.js"></script>
|
||||
<script type="text/javascript" src="../source/model/model.js"></script>
|
||||
<script type="text/javascript" src="../source/model/topology.js"></script>
|
||||
<script type="text/javascript" src="../source/model/meshutils.js"></script>
|
||||
<script type="text/javascript" src="../source/model/modelutils.js"></script>
|
||||
<script type="text/javascript" src="../source/model/modelfinalization.js"></script>
|
||||
<script type="text/javascript" src="../source/model/quantities.js"></script>
|
||||
<script type="text/javascript" src="../source/model/generator.js"></script>
|
||||
<script type="text/javascript" src="../source/import/importerutils.js"></script>
|
||||
<script type="text/javascript" src="../source/import/importerbase.js"></script>
|
||||
<script type="text/javascript" src="../source/import/importerobj.js"></script>
|
||||
<script type="text/javascript" src="../source/import/importerstl.js"></script>
|
||||
<script type="text/javascript" src="../source/import/importeroff.js"></script>
|
||||
<script type="text/javascript" src="../source/import/importerply.js"></script>
|
||||
<script type="text/javascript" src="../source/import/importer3ds.js"></script>
|
||||
<script type="text/javascript" src="../source/import/importergltf.js"></script>
|
||||
<script type="text/javascript" src="../source/import/importero3dv.js"></script>
|
||||
<script type="text/javascript" src="../source/import/importerthree.js"></script>
|
||||
<script type="text/javascript" src="../source/import/importersvg.js"></script>
|
||||
<script type="text/javascript" src="../source/import/importer3dm.js"></script>
|
||||
<script type="text/javascript" src="../source/import/importerifc.js"></script>
|
||||
<script type="text/javascript" src="../source/import/filelist.js"></script>
|
||||
<script type="text/javascript" src="../source/import/importer.js"></script>
|
||||
<script type="text/javascript" src="../source/export/exportermodel.js"></script>
|
||||
<script type="text/javascript" src="../source/export/exporterbase.js"></script>
|
||||
<script type="text/javascript" src="../source/export/exporterobj.js"></script>
|
||||
<script type="text/javascript" src="../source/export/exporterstl.js"></script>
|
||||
<script type="text/javascript" src="../source/export/exporterply.js"></script>
|
||||
<script type="text/javascript" src="../source/export/exporteroff.js"></script>
|
||||
<script type="text/javascript" src="../source/export/exportergltf.js"></script>
|
||||
<script type="text/javascript" src="../source/export/exporter3dm.js"></script>
|
||||
<script type="text/javascript" src="../source/export/exporter.js"></script>
|
||||
<script type="text/javascript" src="../source/threejs/threeutils.js"></script>
|
||||
<script type="text/javascript" src="../source/threejs/threeconverter.js"></script>
|
||||
<script type="text/javascript" src="../source/threejs/threemodelloader.js"></script>
|
||||
<script type="text/javascript" src="../source/parameters/parameterlist.js"></script>
|
||||
<script type="text/javascript" src="../source/viewer/domutils.js"></script>
|
||||
<script type="text/javascript" src="../source/viewer/navigation.js"></script>
|
||||
<script type="text/javascript" src="../source/viewer/viewergeometry.js"></script>
|
||||
<script type="text/javascript" src="../source/viewer/viewer.js"></script>
|
||||
<script type="text/javascript" src="../source/viewer/measuretool.js"></script>
|
||||
<script type="text/javascript" src="../source/viewer/embeddedviewer.js"></script>
|
||||
<!-- engine end -->
|
||||
<!-- engine start -->
|
||||
<script type="text/javascript" src="../source/core/core.js"></script>
|
||||
<script type="text/javascript" src="../source/core/taskrunner.js"></script>
|
||||
<script type="text/javascript" src="../source/geometry/geometry.js"></script>
|
||||
<script type="text/javascript" src="../source/geometry/coord2d.js"></script>
|
||||
<script type="text/javascript" src="../source/geometry/coord3d.js"></script>
|
||||
<script type="text/javascript" src="../source/geometry/coord4d.js"></script>
|
||||
<script type="text/javascript" src="../source/geometry/quaternion.js"></script>
|
||||
<script type="text/javascript" src="../source/geometry/box3d.js"></script>
|
||||
<script type="text/javascript" src="../source/geometry/octree.js"></script>
|
||||
<script type="text/javascript" src="../source/geometry/matrix.js"></script>
|
||||
<script type="text/javascript" src="../source/geometry/transformation.js"></script>
|
||||
<script type="text/javascript" src="../source/geometry/tween.js"></script>
|
||||
<script type="text/javascript" src="../source/io/binaryreader.js"></script>
|
||||
<script type="text/javascript" src="../source/io/binarywriter.js"></script>
|
||||
<script type="text/javascript" src="../source/io/textwriter.js"></script>
|
||||
<script type="text/javascript" src="../source/io/bufferutils.js"></script>
|
||||
<script type="text/javascript" src="../source/io/fileutils.js"></script>
|
||||
<script type="text/javascript" src="../source/io/externallibs.js"></script>
|
||||
<script type="text/javascript" src="../source/model/color.js"></script>
|
||||
<script type="text/javascript" src="../source/model/material.js"></script>
|
||||
<script type="text/javascript" src="../source/model/triangle.js"></script>
|
||||
<script type="text/javascript" src="../source/model/property.js"></script>
|
||||
<script type="text/javascript" src="../source/model/object.js"></script>
|
||||
<script type="text/javascript" src="../source/model/mesh.js"></script>
|
||||
<script type="text/javascript" src="../source/model/meshbuffer.js"></script>
|
||||
<script type="text/javascript" src="../source/model/node.js"></script>
|
||||
<script type="text/javascript" src="../source/model/meshinstance.js"></script>
|
||||
<script type="text/javascript" src="../source/model/model.js"></script>
|
||||
<script type="text/javascript" src="../source/model/topology.js"></script>
|
||||
<script type="text/javascript" src="../source/model/meshutils.js"></script>
|
||||
<script type="text/javascript" src="../source/model/modelutils.js"></script>
|
||||
<script type="text/javascript" src="../source/model/modelfinalization.js"></script>
|
||||
<script type="text/javascript" src="../source/model/quantities.js"></script>
|
||||
<script type="text/javascript" src="../source/model/generator.js"></script>
|
||||
<script type="text/javascript" src="../source/import/importerutils.js"></script>
|
||||
<script type="text/javascript" src="../source/import/importerbase.js"></script>
|
||||
<script type="text/javascript" src="../source/import/importerobj.js"></script>
|
||||
<script type="text/javascript" src="../source/import/importerstl.js"></script>
|
||||
<script type="text/javascript" src="../source/import/importeroff.js"></script>
|
||||
<script type="text/javascript" src="../source/import/importerply.js"></script>
|
||||
<script type="text/javascript" src="../source/import/importer3ds.js"></script>
|
||||
<script type="text/javascript" src="../source/import/importergltf.js"></script>
|
||||
<script type="text/javascript" src="../source/import/importero3dv.js"></script>
|
||||
<script type="text/javascript" src="../source/import/importerthree.js"></script>
|
||||
<script type="text/javascript" src="../source/import/importersvg.js"></script>
|
||||
<script type="text/javascript" src="../source/import/importer3dm.js"></script>
|
||||
<script type="text/javascript" src="../source/import/importerifc.js"></script>
|
||||
<script type="text/javascript" src="../source/import/filelist.js"></script>
|
||||
<script type="text/javascript" src="../source/import/importer.js"></script>
|
||||
<script type="text/javascript" src="../source/export/exportermodel.js"></script>
|
||||
<script type="text/javascript" src="../source/export/exporterbase.js"></script>
|
||||
<script type="text/javascript" src="../source/export/exporterobj.js"></script>
|
||||
<script type="text/javascript" src="../source/export/exporterstl.js"></script>
|
||||
<script type="text/javascript" src="../source/export/exporterply.js"></script>
|
||||
<script type="text/javascript" src="../source/export/exporteroff.js"></script>
|
||||
<script type="text/javascript" src="../source/export/exportergltf.js"></script>
|
||||
<script type="text/javascript" src="../source/export/exporter3dm.js"></script>
|
||||
<script type="text/javascript" src="../source/export/exporter.js"></script>
|
||||
<script type="text/javascript" src="../source/threejs/threeutils.js"></script>
|
||||
<script type="text/javascript" src="../source/threejs/threeconverter.js"></script>
|
||||
<script type="text/javascript" src="../source/threejs/threemodelloader.js"></script>
|
||||
<script type="text/javascript" src="../source/parameters/parameterlist.js"></script>
|
||||
<script type="text/javascript" src="../source/viewer/domutils.js"></script>
|
||||
<script type="text/javascript" src="../source/viewer/navigation.js"></script>
|
||||
<script type="text/javascript" src="../source/viewer/viewergeometry.js"></script>
|
||||
<script type="text/javascript" src="../source/viewer/viewer.js"></script>
|
||||
<script type="text/javascript" src="../source/viewer/measuretool.js"></script>
|
||||
<script type="text/javascript" src="../source/viewer/embeddedviewer.js"></script>
|
||||
<!-- engine end -->
|
||||
|
||||
<!-- website start -->
|
||||
<link rel="stylesheet" type="text/css" href="o3dv/css/icons.css">
|
||||
<link rel="stylesheet" type="text/css" href="o3dv/css/themes.css">
|
||||
<link rel="stylesheet" type="text/css" href="o3dv/css/core.css">
|
||||
<link rel="stylesheet" type="text/css" href="o3dv/css/controls.css">
|
||||
<link rel="stylesheet" type="text/css" href="o3dv/css/dialogs.css">
|
||||
<link rel="stylesheet" type="text/css" href="o3dv/css/treeview.css">
|
||||
<link rel="stylesheet" type="text/css" href="o3dv/css/panelset.css">
|
||||
<link rel="stylesheet" type="text/css" href="o3dv/css/navigator.css">
|
||||
<link rel="stylesheet" type="text/css" href="o3dv/css/sidebar.css">
|
||||
<link rel="stylesheet" type="text/css" href="o3dv/css/website.css">
|
||||
<link rel="stylesheet" type="text/css" href="o3dv/css/embed.css">
|
||||
<script type="text/javascript" src="o3dv/js/featureset.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/eventhandler.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/utils.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/cookies.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/settings.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/toolbar.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/treeview.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/splitter.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/modal.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/dialogs.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/openurldialog.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/exportdialog.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/sharingdialog.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/panelset.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/navigatoritems.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/navigatorpanel.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/navigatorfilespanel.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/navigatormaterialspanel.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/navigatormeshespanel.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/navigator.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/sidebarpanel.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/sidebardetailspanel.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/sidebarsettingspanel.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/sidebarmeasurepanel.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/sidebar.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/hashhandler.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/threemodelloaderui.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/themehandler.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/website.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/embed.js"></script>
|
||||
<!-- website end -->
|
||||
<!-- website start -->
|
||||
<link rel="stylesheet" type="text/css" href="o3dv/css/icons.css">
|
||||
<link rel="stylesheet" type="text/css" href="o3dv/css/themes.css">
|
||||
<link rel="stylesheet" type="text/css" href="o3dv/css/core.css">
|
||||
<link rel="stylesheet" type="text/css" href="o3dv/css/controls.css">
|
||||
<link rel="stylesheet" type="text/css" href="o3dv/css/dialogs.css">
|
||||
<link rel="stylesheet" type="text/css" href="o3dv/css/treeview.css">
|
||||
<link rel="stylesheet" type="text/css" href="o3dv/css/panelset.css">
|
||||
<link rel="stylesheet" type="text/css" href="o3dv/css/navigator.css">
|
||||
<link rel="stylesheet" type="text/css" href="o3dv/css/sidebar.css">
|
||||
<link rel="stylesheet" type="text/css" href="o3dv/css/website.css">
|
||||
<link rel="stylesheet" type="text/css" href="o3dv/css/embed.css">
|
||||
<script type="text/javascript" src="o3dv/js/featureset.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/eventhandler.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/utils.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/cookies.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/settings.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/toolbar.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/treeview.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/splitter.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/modal.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/dialogs.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/openurldialog.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/exportdialog.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/sharingdialog.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/panelset.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/navigatoritems.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/navigatorpanel.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/navigatorfilespanel.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/navigatormaterialspanel.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/navigatormeshespanel.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/navigator.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/sidebarpanel.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/sidebardetailspanel.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/sidebarsettingspanel.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/sidebarmeasurepanel.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/sidebar.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/hashhandler.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/threemodelloaderui.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/themehandler.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/website.js"></script>
|
||||
<script type="text/javascript" src="o3dv/js/embed.js"></script>
|
||||
<!-- website end -->
|
||||
|
||||
<!-- externals start -->
|
||||
<script type="text/javascript">
|
||||
OV.ExternalLibLocation = '../libs';
|
||||
</script>
|
||||
<!-- externals end -->
|
||||
<!-- externals start -->
|
||||
<script type="text/javascript">
|
||||
OV.ExternalLibLocation = '../libs';
|
||||
</script>
|
||||
<!-- externals end -->
|
||||
|
||||
<!-- analytics start -->
|
||||
<!-- analytics end -->
|
||||
<!-- analytics start -->
|
||||
<script type="text/javascript">
|
||||
window.viewerEventHandler = (eventName, eventData) => {
|
||||
console.log ({
|
||||
eventName : eventName,
|
||||
eventData : eventData
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<!-- analytics end -->
|
||||
|
||||
<script type="text/javascript">
|
||||
window.addEventListener ('load', function () {
|
||||
let website = new OV.Website ({
|
||||
headerDiv : document.getElementById ('header'),
|
||||
toolbarDiv : document.getElementById ('toolbar'),
|
||||
mainDiv : document.getElementById ('main'),
|
||||
introDiv : document.getElementById ('intro'),
|
||||
fileNameDiv : document.getElementById ('main_file_name'),
|
||||
navigatorDiv : document.getElementById ('main_navigator'),
|
||||
navigatorSplitterDiv : document.getElementById ('main_navigator_splitter'),
|
||||
sidebarDiv : document.getElementById ('main_sidebar'),
|
||||
sidebarSplitterDiv : document.getElementById ('main_sidebar_splitter'),
|
||||
viewerDiv : document.getElementById ('main_viewer'),
|
||||
fileInput : document.getElementById ('open_file'),
|
||||
eventHandler : window.gtagEventHandler
|
||||
});
|
||||
website.Load ();
|
||||
});
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
window.addEventListener ('load', function () {
|
||||
let website = new OV.Website ({
|
||||
headerDiv : document.getElementById ('header'),
|
||||
toolbarDiv : document.getElementById ('toolbar'),
|
||||
mainDiv : document.getElementById ('main'),
|
||||
introDiv : document.getElementById ('intro'),
|
||||
fileNameDiv : document.getElementById ('main_file_name'),
|
||||
navigatorDiv : document.getElementById ('main_navigator'),
|
||||
navigatorSplitterDiv : document.getElementById ('main_navigator_splitter'),
|
||||
sidebarDiv : document.getElementById ('main_sidebar'),
|
||||
sidebarSplitterDiv : document.getElementById ('main_sidebar_splitter'),
|
||||
viewerDiv : document.getElementById ('main_viewer'),
|
||||
fileInput : document.getElementById ('open_file'),
|
||||
eventHandler : window.viewerEventHandler
|
||||
});
|
||||
website.Load ();
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- script start -->
|
||||
<!-- script end -->
|
||||
<!-- script start -->
|
||||
<!-- script end -->
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<input type="file" id="open_file" style="display:none;" multiple></input>
|
||||
<div class="header" id="header">
|
||||
<div class="title">
|
||||
<div class="title_left">
|
||||
<a href="index.html">
|
||||
<svg class="logo_image"><use href="assets/images/3dviewer_net_logo_text.svg#logo"></use></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="title_right" id="header_buttons"></div>
|
||||
<div class="main_file_name only_full_width" id="main_file_name"></div>
|
||||
</div>
|
||||
<div class="toolbar" id="toolbar"></div>
|
||||
</div>
|
||||
<div class="main" id="main">
|
||||
<div class="main_navigator ov_panel_set_container only_full_width" id="main_navigator"></div>
|
||||
<div class="main_splitter only_full_width" id="main_navigator_splitter"></div>
|
||||
<div class="main_viewer" id="main_viewer"></div>
|
||||
<div class="main_splitter only_full_width" id="main_sidebar_splitter"></div>
|
||||
<div class="main_sidebar ov_panel_set_right_container only_full_width" id="main_sidebar"></div>
|
||||
</div>
|
||||
<div class="intro ov_thin_scrollbar" id="intro">
|
||||
<div class="intro_section only_full_width only_full_height">
|
||||
<svg class="intro_logo"><use href="assets/images/3dviewer_net_logo.svg#logo"></use></svg>
|
||||
</div>
|
||||
<div class="intro_section intro_big_text">
|
||||
Drag and drop your 3D models here.<br>
|
||||
<b>obj, 3ds, stl, ply, gltf, glb, off, 3dm, fbx, <a target="_blank" href="info/index.html#supported_file_formats">and more</a></b>
|
||||
</div>
|
||||
<div class="intro_section">
|
||||
Or you can use the browse button above.
|
||||
</div>
|
||||
<div class="intro_section">
|
||||
<div>Example models:</div>
|
||||
<div class="example_models">
|
||||
<a href="index.html#model=assets/models/logo.obj,assets/models/logo.mtl">logo</a>
|
||||
<span style="color:#aaaaaa;"> | </span>
|
||||
<a href="index.html#model=assets/models/solids.obj,assets/models/solids.mtl">solids</a>
|
||||
<span style="color:#aaaaaa;"> | </span>
|
||||
<a href="index.html#model=assets/models/DamagedHelmet.glb">helmet</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input type="file" id="open_file" style="display:none;" multiple></input>
|
||||
<div class="header" id="header">
|
||||
<div class="title">
|
||||
<div class="title_left">
|
||||
<a href="index.html">
|
||||
<svg class="logo_image"><use href="assets/images/3dviewer_net_logo_text.svg#logo"></use></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="title_right" id="header_buttons"></div>
|
||||
<div class="main_file_name only_full_width" id="main_file_name"></div>
|
||||
</div>
|
||||
<div class="toolbar" id="toolbar"></div>
|
||||
</div>
|
||||
<div class="main" id="main">
|
||||
<div class="main_navigator ov_panel_set_container only_full_width" id="main_navigator"></div>
|
||||
<div class="main_splitter only_full_width" id="main_navigator_splitter"></div>
|
||||
<div class="main_viewer" id="main_viewer"></div>
|
||||
<div class="main_splitter only_full_width" id="main_sidebar_splitter"></div>
|
||||
<div class="main_sidebar ov_panel_set_right_container only_full_width" id="main_sidebar"></div>
|
||||
</div>
|
||||
<div class="intro ov_thin_scrollbar" id="intro">
|
||||
<div class="intro_section only_full_width only_full_height">
|
||||
<svg class="intro_logo"><use href="assets/images/3dviewer_net_logo.svg#logo"></use></svg>
|
||||
</div>
|
||||
<div class="intro_section intro_big_text">
|
||||
Drag and drop your 3D models here.<br>
|
||||
<b>obj, 3ds, stl, ply, gltf, glb, off, 3dm, fbx, <a target="_blank" href="info/index.html#supported_file_formats">and more</a></b>
|
||||
</div>
|
||||
<div class="intro_section">
|
||||
Or you can use the browse button above.
|
||||
</div>
|
||||
<div class="intro_section">
|
||||
<div>Example models:</div>
|
||||
<div class="example_models">
|
||||
<a href="index.html#model=assets/models/logo.obj,assets/models/logo.mtl">logo</a>
|
||||
<span style="color:#aaaaaa;"> | </span>
|
||||
<a href="index.html#model=assets/models/solids.obj,assets/models/solids.mtl">solids</a>
|
||||
<span style="color:#aaaaaa;"> | </span>
|
||||
<a href="index.html#model=assets/models/DamagedHelmet.glb">helmet</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@ -5,11 +5,11 @@ OV.EventHandler = class
|
||||
this.eventHandler = eventHandler;
|
||||
}
|
||||
|
||||
HandleEvent (name, parameters)
|
||||
HandleEvent (eventName, eventData)
|
||||
{
|
||||
if (this.eventHandler === undefined || this.eventHandler === null) {
|
||||
return;
|
||||
}
|
||||
this.eventHandler (name, parameters);
|
||||
this.eventHandler (eventName, eventData);
|
||||
}
|
||||
};
|
||||
|
||||
@ -169,9 +169,10 @@ OV.ImageExporterUI = class extends OV.ExporterUI
|
||||
|
||||
OV.ExportDialog = class
|
||||
{
|
||||
constructor (callbacks)
|
||||
constructor (callbacks, eventHandler)
|
||||
{
|
||||
this.callbacks = callbacks;
|
||||
this.eventHandler = eventHandler;
|
||||
this.selectedExporter = null;
|
||||
this.parametersDiv = null;
|
||||
|
||||
@ -243,6 +244,7 @@ OV.ExportDialog = class
|
||||
this.callbacks.onDialog (filesDialog);
|
||||
}
|
||||
});
|
||||
this.eventHandler.HandleEvent ('model_exported', this.selectedExporter.GetName ());
|
||||
} else if (this.selectedExporter.GetType () === OV.ExportType.Image) {
|
||||
this.selectedExporter.ExportImage (viewer);
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
OV.ShowSharingDialog = function (importer, settings, camera)
|
||||
OV.ShowSharingDialog = function (fileList, settings, camera, eventHandler)
|
||||
{
|
||||
function AddCheckboxLine (parentDiv, text, id, onChange)
|
||||
{
|
||||
@ -53,23 +53,25 @@ OV.ShowSharingDialog = function (importer, settings, camera)
|
||||
return input;
|
||||
}
|
||||
|
||||
function AddSharingLinkTab (parentDiv, sharingLinkParams)
|
||||
function AddSharingLinkTab (parentDiv, sharingLinkParams, eventHandler)
|
||||
{
|
||||
let section = OV.AddDiv (parentDiv, 'ov_dialog_section');
|
||||
OV.AddDiv (section, 'ov_dialog_inner_title', 'Sharing Link');
|
||||
let sharingLinkInput = AddCopyableTextInput (section, () => {
|
||||
eventHandler.HandleEvent ('model_shared', 'sharing_link');
|
||||
return GetSharingLink (sharingLinkParams);
|
||||
});
|
||||
sharingLinkInput.value = GetSharingLink (sharingLinkParams);
|
||||
}
|
||||
|
||||
function AddEmbeddingCodeTab (parentDiv, settings, embeddingCodeParams)
|
||||
function AddEmbeddingCodeTab (parentDiv, settings, embeddingCodeParams, eventHandler)
|
||||
{
|
||||
let section = OV.AddDiv (parentDiv, 'ov_dialog_section');
|
||||
section.style.marginTop = '20px';
|
||||
OV.AddDiv (section, 'ov_dialog_inner_title', 'Embedding Code');
|
||||
let optionsSection = OV.AddDiv (section, 'ov_dialog_section');
|
||||
let embeddingCodeInput = AddCopyableTextInput (section, () => {
|
||||
eventHandler.HandleEvent ('model_shared', 'embedding_code');
|
||||
return GetEmbeddingCode (embeddingCodeParams);
|
||||
});
|
||||
AddCheckboxLine (optionsSection, 'Use current camera position', 'embed_camera', (checked) => {
|
||||
@ -96,7 +98,7 @@ OV.ShowSharingDialog = function (importer, settings, camera)
|
||||
embeddingCodeInput.value = GetEmbeddingCode (embeddingCodeParams);
|
||||
}
|
||||
|
||||
if (!importer.GetFileList ().IsOnlyUrlSource ()) {
|
||||
if (!fileList.IsOnlyUrlSource ()) {
|
||||
return OV.ShowMessageDialog (
|
||||
'Sharing Failed',
|
||||
'Sharing works only if you load files by url. Please upload your model files to a web server, open them by url, and try embedding again.',
|
||||
@ -104,7 +106,7 @@ OV.ShowSharingDialog = function (importer, settings, camera)
|
||||
);
|
||||
}
|
||||
|
||||
let files = importer.GetFileList ().GetFiles ();
|
||||
let files = fileList.GetFiles ();
|
||||
let modelFiles = [];
|
||||
for (let fileIndex = 0; fileIndex < files.length; fileIndex++) {
|
||||
let file = files[fileIndex];
|
||||
@ -139,8 +141,8 @@ OV.ShowSharingDialog = function (importer, settings, camera)
|
||||
}
|
||||
]);
|
||||
|
||||
AddSharingLinkTab (contentDiv, sharingLinkParams);
|
||||
AddEmbeddingCodeTab (contentDiv, settings, embeddingCodeParams);
|
||||
AddSharingLinkTab (contentDiv, sharingLinkParams, eventHandler);
|
||||
AddEmbeddingCodeTab (contentDiv, settings, embeddingCodeParams, eventHandler);
|
||||
|
||||
dialog.Show ();
|
||||
return dialog;
|
||||
|
||||
@ -32,6 +32,7 @@ OV.Website = class
|
||||
{
|
||||
this.settings.LoadFromCookies (this.cookieHandler);
|
||||
this.SwitchTheme (this.settings.themeId, false);
|
||||
this.eventHandler.HandleEvent ('theme_on_load', this.settings.themeId === OV.Theme.Light ? 'light' : 'dark');
|
||||
|
||||
this.InitViewer ();
|
||||
this.InitMeasureTool ();
|
||||
@ -260,7 +261,7 @@ OV.Website = class
|
||||
if (defaultColor !== null) {
|
||||
importSettings.defaultColor = defaultColor;
|
||||
}
|
||||
this.eventHandler.HandleEvent ('model_load_started', { source : 'hash' });
|
||||
this.eventHandler.HandleEvent ('model_load_started', 'hash');
|
||||
this.LoadModelFromUrlList (urls, importSettings);
|
||||
} else {
|
||||
this.ClearModel ();
|
||||
@ -364,7 +365,7 @@ OV.Website = class
|
||||
this.SetUIState (OV.WebsiteUIState.Model);
|
||||
this.OnModelLoaded (importResult, threeObject);
|
||||
let importedExtension = OV.GetFileExtension (importResult.mainFile);
|
||||
this.eventHandler.HandleEvent ('model_loaded', { extension : importedExtension });
|
||||
this.eventHandler.HandleEvent ('model_loaded', importedExtension);
|
||||
},
|
||||
onRender : () =>
|
||||
{
|
||||
@ -373,24 +374,20 @@ OV.Website = class
|
||||
onError : (importError) =>
|
||||
{
|
||||
this.SetUIState (OV.WebsiteUIState.Intro);
|
||||
let reason = 'unknown';
|
||||
if (importError.code === OV.ImportErrorCode.NoImportableFile) {
|
||||
reason = 'no_importable_file';
|
||||
} else if (importError.code === OV.ImportErrorCode.FailedToLoadFile) {
|
||||
reason = 'failed_to_load_file';
|
||||
} else if (importError.code === OV.ImportErrorCode.ImportFailed) {
|
||||
reason = 'import_failed';
|
||||
}
|
||||
let extensions = [];
|
||||
let importer = this.modelLoaderUI.GetImporter ();
|
||||
let fileList = importer.GetFileList ().GetFiles ();
|
||||
for (let i = 0; i < fileList.length; i++) {
|
||||
extensions.push (fileList[i].extension);
|
||||
}
|
||||
this.eventHandler.HandleEvent ('model_load_failed', {
|
||||
reason : reason,
|
||||
extensions : extensions
|
||||
});
|
||||
let extensionsStr = extensions.join (',');
|
||||
if (importError.code === OV.ImportErrorCode.NoImportableFile) {
|
||||
this.eventHandler.HandleEvent ('no_importable_file', extensionsStr);
|
||||
} else if (importError.code === OV.ImportErrorCode.FailedToLoadFile) {
|
||||
this.eventHandler.HandleEvent ('failed_to_load_file', extensionsStr);
|
||||
} else if (importError.code === OV.ImportErrorCode.ImportFailed) {
|
||||
this.eventHandler.HandleEvent ('import_failed', extensionsStr);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -457,10 +454,9 @@ OV.Website = class
|
||||
|
||||
InitToolbar ()
|
||||
{
|
||||
function AddButton (toolbar, eventHandler, imageName, imageTitle, classNames, onClick)
|
||||
function AddButton (toolbar, imageName, imageTitle, classNames, onClick)
|
||||
{
|
||||
let button = toolbar.AddImageButton (imageName, imageTitle, () => {
|
||||
eventHandler.HandleEvent ('toolbar_clicked', { item : imageName });
|
||||
onClick ();
|
||||
});
|
||||
for (let className of classNames) {
|
||||
@ -469,7 +465,7 @@ OV.Website = class
|
||||
return button;
|
||||
}
|
||||
|
||||
function AddRadioButton (toolbar, eventHandler, imageNames, imageTitles, selectedIndex, classNames, onClick)
|
||||
function AddRadioButton (toolbar, imageNames, imageTitles, selectedIndex, classNames, onClick)
|
||||
{
|
||||
let imageData = [];
|
||||
for (let i = 0; i < imageNames.length; i++) {
|
||||
@ -481,7 +477,6 @@ OV.Website = class
|
||||
});
|
||||
}
|
||||
let buttons = toolbar.AddImageRadioButton (imageData, selectedIndex, (buttonIndex) => {
|
||||
eventHandler.HandleEvent ('toolbar_clicked', { item : imageNames[buttonIndex] });
|
||||
onClick (buttonIndex);
|
||||
});
|
||||
for (let className of classNames) {
|
||||
@ -503,10 +498,10 @@ OV.Website = class
|
||||
|
||||
let importer = this.modelLoaderUI.GetImporter ();
|
||||
|
||||
AddButton (this.toolbar, this.eventHandler, 'open', 'Open model from your device', [], () => {
|
||||
AddButton (this.toolbar, 'open', 'Open model from your device', [], () => {
|
||||
this.OpenFileBrowserDialog ();
|
||||
});
|
||||
AddButton (this.toolbar, this.eventHandler, 'open_url', 'Open model from a url', [], () => {
|
||||
AddButton (this.toolbar, 'open_url', 'Open model from a url', [], () => {
|
||||
this.dialog = OV.ShowOpenUrlDialog ((urls) => {
|
||||
if (urls.length > 0) {
|
||||
this.hashHandler.SetModelFilesToHash (urls);
|
||||
@ -514,20 +509,20 @@ OV.Website = class
|
||||
});
|
||||
});
|
||||
AddSeparator (this.toolbar, ['only_on_model']);
|
||||
AddButton (this.toolbar, this.eventHandler, 'fit', 'Fit model to window', ['only_on_model'], () => {
|
||||
AddButton (this.toolbar, 'fit', 'Fit model to window', ['only_on_model'], () => {
|
||||
this.FitModelToWindow (false);
|
||||
});
|
||||
AddButton (this.toolbar, this.eventHandler, 'up_y', 'Set Y axis as up vector', ['only_on_model'], () => {
|
||||
AddButton (this.toolbar, 'up_y', 'Set Y axis as up vector', ['only_on_model'], () => {
|
||||
this.viewer.SetUpVector (OV.Direction.Y, true);
|
||||
});
|
||||
AddButton (this.toolbar, this.eventHandler, 'up_z', 'Set Z axis as up vector', ['only_on_model'], () => {
|
||||
AddButton (this.toolbar, 'up_z', 'Set Z axis as up vector', ['only_on_model'], () => {
|
||||
this.viewer.SetUpVector (OV.Direction.Z, true);
|
||||
});
|
||||
AddButton (this.toolbar, this.eventHandler, 'flip', 'Flip up vector', ['only_on_model'], () => {
|
||||
AddButton (this.toolbar, 'flip', 'Flip up vector', ['only_on_model'], () => {
|
||||
this.viewer.FlipUpVector ();
|
||||
});
|
||||
AddSeparator (this.toolbar, ['only_on_model']);
|
||||
AddRadioButton (this.toolbar, this.eventHandler, ['fix_up_on', 'fix_up_off'], ['Fixed up vector', 'Free orbit'], 0, ['only_on_model'], (buttonIndex) => {
|
||||
AddRadioButton (this.toolbar, ['fix_up_on', 'fix_up_off'], ['Fixed up vector', 'Free orbit'], 0, ['only_on_model'], (buttonIndex) => {
|
||||
if (buttonIndex === 0) {
|
||||
this.viewer.SetFixUpVector (true);
|
||||
} else if (buttonIndex === 1) {
|
||||
@ -535,7 +530,7 @@ OV.Website = class
|
||||
}
|
||||
});
|
||||
AddSeparator (this.toolbar, ['only_full_width', 'only_on_model']);
|
||||
AddButton (this.toolbar, this.eventHandler, 'export', 'Export model', ['only_full_width', 'only_on_model'], () => {
|
||||
AddButton (this.toolbar, 'export', 'Export model', ['only_full_width', 'only_on_model'], () => {
|
||||
let exportDialog = new OV.ExportDialog ({
|
||||
isMeshVisible : (meshInstanceId) => {
|
||||
return this.navigator.IsMeshVisible (meshInstanceId);
|
||||
@ -543,16 +538,16 @@ OV.Website = class
|
||||
onDialog : (dialog) => {
|
||||
this.dialog = dialog;
|
||||
}
|
||||
});
|
||||
}, this.eventHandler);
|
||||
exportDialog.Show (this.model, this.viewer);
|
||||
});
|
||||
AddButton (this.toolbar, this.eventHandler, 'share', 'Share model', ['only_full_width', 'only_on_model'], () => {
|
||||
this.dialog = OV.ShowSharingDialog (importer, this.settings, this.viewer.GetCamera ());
|
||||
AddButton (this.toolbar, 'share', 'Share model', ['only_full_width', 'only_on_model'], () => {
|
||||
this.dialog = OV.ShowSharingDialog (importer.GetFileList (), this.settings, this.viewer.GetCamera (), this.eventHandler);
|
||||
});
|
||||
|
||||
this.parameters.fileInput.addEventListener ('change', (ev) => {
|
||||
if (ev.target.files.length > 0) {
|
||||
this.eventHandler.HandleEvent ('model_load_started', { source : 'open_file' });
|
||||
this.eventHandler.HandleEvent ('model_load_started', 'open_file');
|
||||
this.LoadModelFromFileList (ev.target.files);
|
||||
}
|
||||
});
|
||||
@ -575,7 +570,7 @@ OV.Website = class
|
||||
ev.preventDefault ();
|
||||
OV.GetFilesFromDataTransfer (ev.dataTransfer, (files) => {
|
||||
if (files.length > 0) {
|
||||
this.eventHandler.HandleEvent ('model_load_started', { source : 'drop' });
|
||||
this.eventHandler.HandleEvent ('model_load_started', 'drop');
|
||||
this.LoadModelFromFileList (files);
|
||||
}
|
||||
});
|
||||
@ -602,9 +597,11 @@ OV.Website = class
|
||||
this.UpdateGridDisplay ();
|
||||
},
|
||||
onEdgeDisplayChange : () => {
|
||||
this.eventHandler.HandleEvent ('edge_display_changed', this.settings.showEdges ? 'on' : 'off');
|
||||
this.UpdateEdgeDisplay ();
|
||||
},
|
||||
onThemeChange : () => {
|
||||
this.eventHandler.HandleEvent ('theme_changed', this.settings.themeId === OV.Theme.Light ? 'light' : 'dark');
|
||||
this.SwitchTheme (this.settings.themeId, true);
|
||||
},
|
||||
onMeasureToolActivedChange : (isActivated) => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user