Self-hosted viewers should detect size automatically based on the size of the container div #43
Now the viewer's size is based on the parent container's size (not the width and height attribute) so it's possible to style the parent container with css and even use it in fullscreen.
This commit is contained in:
Viktor Kovacs
parent
2cfbc59821
commit
d43477d726
@ -22,10 +22,9 @@ OV.Init3DViewerElements = function ()
|
||||
let viewer = new OV.Viewer ();
|
||||
viewer.Init (canvas);
|
||||
|
||||
let width = parseInt (element.getAttribute ('width'));
|
||||
let height = parseInt (element.getAttribute ('height'));
|
||||
element.style.width = width + 'px';
|
||||
element.style.height = height + 'px';
|
||||
let width = element.clientWidth;
|
||||
let height = element.clientHeight;
|
||||
console.log (element.clientHeight);
|
||||
viewer.Resize (width, height);
|
||||
|
||||
let loader = new OV.ThreeModelLoader ();
|
||||
@ -45,7 +44,7 @@ OV.Init3DViewerElements = function ()
|
||||
},
|
||||
onModelFinished : function (importResult, threeMeshes) {
|
||||
element.removeChild (progressDiv);
|
||||
canvas.style.display = 'initial';
|
||||
canvas.style.display = 'inherit';
|
||||
viewer.AddMeshes (threeMeshes);
|
||||
let boundingSphere = viewer.GetBoundingSphere (function (meshUserData) {
|
||||
return true;
|
||||
@ -73,13 +72,28 @@ OV.Init3DViewerElements = function ()
|
||||
}
|
||||
|
||||
loader.LoadFromUrlList (modelUrls);
|
||||
return {
|
||||
element: element,
|
||||
viewer: viewer
|
||||
};
|
||||
}
|
||||
|
||||
let viewerElements = [];
|
||||
window.addEventListener ('load', function () {
|
||||
let elements = document.getElementsByClassName ('online_3d_viewer');
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
let element = elements[i];
|
||||
LoadElement (element);
|
||||
let viewerElement = LoadElement (element);
|
||||
viewerElements.push (viewerElement);
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener ('resize', function () {
|
||||
for (let i = 0; i < viewerElements.length; i++) {
|
||||
let viewerElement = viewerElements[i];
|
||||
let width = viewerElement.element.clientWidth;
|
||||
let height = viewerElement.element.clientHeight;
|
||||
viewerElement.viewer.Resize (width, height);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
@ -1,53 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html;charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no">
|
||||
<link rel="icon" type="image/png" href="assets/images/3dviewer_net_favicon.png">
|
||||
|
||||
<title>Online 3D Viewer</title>
|
||||
|
||||
<script type="text/javascript" src="../../libs/three.min-126.js"></script>
|
||||
<script type="text/javascript" src="../../build/final/website/o3dv/o3dv.min.js"></script>
|
||||
|
||||
<script type='text/javascript'>
|
||||
OV.Init3DViewerElements ();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
div.online_3d_viewer
|
||||
{
|
||||
float: left;
|
||||
border: 1px solid #eeeeee;
|
||||
margin: 0px 4px 4px 0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="online_3d_viewer"
|
||||
width="360" height="240"
|
||||
model="../../test/testfiles/3ds/cube_four_instances.3ds,../../test/testfiles/3ds/texture.png">
|
||||
</div>
|
||||
<div class="online_3d_viewer"
|
||||
width="360" height="240"
|
||||
model="../../test/testfiles/obj/hundred_cubes.obj,../../test/testfiles/obj/hundred_cubes.mtl">
|
||||
</div>
|
||||
<div class="online_3d_viewer"
|
||||
width="360" height="240"
|
||||
model="../../test/testfiles/3ds/cube_four_instances.3ds,../../test/testfiles/3ds/texture.png"
|
||||
camera="3.929421317669367,6.153966358575169,2.7076091223424714,1.5,1.5,0.5,0,0,1">
|
||||
</div>
|
||||
<div class="online_3d_viewer"
|
||||
width="360" height="240"
|
||||
model="../../test/testfiles/obj/hundred_cubes.obj,../../test/testfiles/obj/hundred_cubes.mtl"
|
||||
camera="1,1,1,0,0,0,0,0,1">
|
||||
</div>
|
||||
<div class="online_3d_viewer"
|
||||
width="360" height="240"
|
||||
model="wrong.3ds">
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,25 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html;charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no">
|
||||
|
||||
<title>Online 3D Viewer</title>
|
||||
|
||||
<script type="text/javascript" src="../../libs/three.min-126.js"></script>
|
||||
<script type="text/javascript" src="../../build/final/website/o3dv/o3dv.min.js"></script>
|
||||
<script type='text/javascript'>
|
||||
OV.Init3DViewerElements ();
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="online_3d_viewer"
|
||||
width="800" height="600"
|
||||
model="../../test/testfiles/obj/hundred_cubes.obj,../../test/testfiles/obj/hundred_cubes.mtl"
|
||||
camera="3,1,2,0,0,0,0,0,1">
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
80
tools/sandbox/embed_selfhost_fullscreen.html
Normal file
80
tools/sandbox/embed_selfhost_fullscreen.html
Normal file
@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html;charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no">
|
||||
|
||||
<title>Online 3D Viewer</title>
|
||||
|
||||
<script type="text/javascript" src="../../libs/three.min-126.js"></script>
|
||||
<!-- importer 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/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/model/modelentities.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/model.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/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/importer.js"></script>
|
||||
<script type="text/javascript" src="../../source/export/exporterutils.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/exporter.js"></script>
|
||||
<script type="text/javascript" src="../../source/external/three.converter.js"></script>
|
||||
<script type="text/javascript" src="../../source/external/three.model.loader.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/viewer.js"></script>
|
||||
<script type="text/javascript" src="../../source/viewer/domviewer.js"></script>
|
||||
<!-- importer end -->
|
||||
|
||||
<script type='text/javascript'>
|
||||
OV.Init3DViewerElements ();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html, body
|
||||
{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="online_3d_viewer"
|
||||
style="width: 100%; height: 100%;"
|
||||
model="../../test/testfiles/obj/hundred_cubes.obj,../../test/testfiles/obj/hundred_cubes.mtl"
|
||||
camera="3,1,2,0,0,0,0,0,1">
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
98
tools/sandbox/embed_selfhost_multiple.html
Normal file
98
tools/sandbox/embed_selfhost_multiple.html
Normal file
@ -0,0 +1,98 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html;charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no">
|
||||
<link rel="icon" type="image/png" href="assets/images/3dviewer_net_favicon.png">
|
||||
|
||||
<title>Online 3D Viewer</title>
|
||||
|
||||
<script type="text/javascript" src="../../libs/three.min-126.js"></script>
|
||||
|
||||
<!-- importer 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/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/model/modelentities.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/model.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/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/importer.js"></script>
|
||||
<script type="text/javascript" src="../../source/export/exporterutils.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/exporter.js"></script>
|
||||
<script type="text/javascript" src="../../source/external/three.converter.js"></script>
|
||||
<script type="text/javascript" src="../../source/external/three.model.loader.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/viewer.js"></script>
|
||||
<script type="text/javascript" src="../../source/viewer/domviewer.js"></script>
|
||||
<!-- importer end -->
|
||||
|
||||
<script type='text/javascript'>
|
||||
OV.Init3DViewerElements ();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
div.online_3d_viewer
|
||||
{
|
||||
float: left;
|
||||
border: 1px solid #eeeeee;
|
||||
margin: 0px 4px 4px 0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="online_3d_viewer"
|
||||
style="width: 360px; height: 240px;"
|
||||
model="../../test/testfiles/3ds/cube_four_instances.3ds,../../test/testfiles/3ds/texture.png">
|
||||
</div>
|
||||
<div class="online_3d_viewer"
|
||||
style="width: 360px; height: 240px;"
|
||||
model="../../test/testfiles/obj/hundred_cubes.obj,../../test/testfiles/obj/hundred_cubes.mtl">
|
||||
</div>
|
||||
<div class="online_3d_viewer"
|
||||
style="width: 360px; height: 240px;"
|
||||
model="../../test/testfiles/3ds/cube_four_instances.3ds,../../test/testfiles/3ds/texture.png"
|
||||
camera="3.929421317669367,6.153966358575169,2.7076091223424714,1.5,1.5,0.5,0,0,1">
|
||||
</div>
|
||||
<div class="online_3d_viewer"
|
||||
style="width: 360px; height: 240px;"
|
||||
model="../../test/testfiles/obj/hundred_cubes.obj,../../test/testfiles/obj/hundred_cubes.mtl"
|
||||
camera="1,1,1,0,0,0,0,0,1">
|
||||
</div>
|
||||
<div class="online_3d_viewer"
|
||||
style="width: 360px; height: 240px;"
|
||||
model="wrong.3ds">
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
69
tools/sandbox/embed_selfhost_single.html
Normal file
69
tools/sandbox/embed_selfhost_single.html
Normal file
@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html;charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no">
|
||||
|
||||
<title>Online 3D Viewer</title>
|
||||
|
||||
<script type="text/javascript" src="../../libs/three.min-126.js"></script>
|
||||
<!-- importer 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/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/model/modelentities.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/model.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/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/importer.js"></script>
|
||||
<script type="text/javascript" src="../../source/export/exporterutils.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/exporter.js"></script>
|
||||
<script type="text/javascript" src="../../source/external/three.converter.js"></script>
|
||||
<script type="text/javascript" src="../../source/external/three.model.loader.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/viewer.js"></script>
|
||||
<script type="text/javascript" src="../../source/viewer/domviewer.js"></script>
|
||||
<!-- importer end -->
|
||||
<script type='text/javascript'>
|
||||
OV.Init3DViewerElements ();
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="online_3d_viewer"
|
||||
style="width: 800px; height: 600px;"
|
||||
model="../../test/testfiles/obj/hundred_cubes.obj,../../test/testfiles/obj/hundred_cubes.mtl"
|
||||
camera="3,1,2,0,0,0,0,0,1">
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -19,8 +19,12 @@ def Main (argv):
|
||||
config = json.load (configJson)
|
||||
|
||||
rootDir = os.path.abspath ('..')
|
||||
for htmlFileName in ['index.html', 'embed.html']:
|
||||
htmlFilePath = os.path.join (rootDir, 'website', htmlFileName)
|
||||
websiteFiles = [
|
||||
os.path.join ('website', 'index.html'),
|
||||
os.path.join ('website', 'embed.html')
|
||||
]
|
||||
for htmlFileName in websiteFiles:
|
||||
htmlFilePath = os.path.join (rootDir, htmlFileName)
|
||||
replacer = Tools.TokenReplacer (htmlFilePath, True)
|
||||
libFiles = Tools.CreateFileList (config['lib_files'], 'libs/', '../libs/')
|
||||
importerFiles = Tools.CreateFileList (config['importer_files'], 'source/', '../source/')
|
||||
@ -29,6 +33,18 @@ def Main (argv):
|
||||
replacer.ReplaceTokenFileLinks ('<!-- importer start -->', '<!-- importer end -->', importerFiles, None)
|
||||
replacer.ReplaceTokenFileLinks ('<!-- website start -->', '<!-- website end -->', websiteFiles, None)
|
||||
replacer.WriteToFile (htmlFilePath)
|
||||
|
||||
sandboxFiles = [
|
||||
os.path.join ('tools', 'sandbox', 'embed_selfhost_single.html'),
|
||||
os.path.join ('tools', 'sandbox', 'embed_selfhost_multiple.html'),
|
||||
os.path.join ('tools', 'sandbox', 'embed_selfhost_fullscreen.html')
|
||||
]
|
||||
for htmlFileName in sandboxFiles:
|
||||
htmlFilePath = os.path.join (rootDir, htmlFileName)
|
||||
replacer = Tools.TokenReplacer (htmlFilePath, True)
|
||||
importerFiles = Tools.CreateFileList (config['importer_files'], 'source/', '../../source/')
|
||||
replacer.ReplaceTokenFileLinks ('<!-- importer start -->', '<!-- importer end -->', importerFiles, None)
|
||||
replacer.WriteToFile (htmlFilePath)
|
||||
|
||||
return 0
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user