Object oriented embedding.
This commit is contained in:
kovacsv
parent
1cf59b750f
commit
9c3e6fa3ec
@ -72,7 +72,7 @@
|
|||||||
<script type="text/javascript" src="../source/viewer/navigation.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/viewer.js"></script>
|
||||||
<script type="text/javascript" src="../source/viewer/measuretool.js"></script>
|
<script type="text/javascript" src="../source/viewer/measuretool.js"></script>
|
||||||
<script type="text/javascript" src="../source/viewer/domviewer.js"></script>
|
<script type="text/javascript" src="../source/viewer/embeddedviewer.js"></script>
|
||||||
<!-- engine end -->
|
<!-- engine end -->
|
||||||
|
|
||||||
<script type='text/javascript'>
|
<script type='text/javascript'>
|
||||||
|
|||||||
@ -72,7 +72,7 @@
|
|||||||
<script type="text/javascript" src="../source/viewer/navigation.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/viewer.js"></script>
|
||||||
<script type="text/javascript" src="../source/viewer/measuretool.js"></script>
|
<script type="text/javascript" src="../source/viewer/measuretool.js"></script>
|
||||||
<script type="text/javascript" src="../source/viewer/domviewer.js"></script>
|
<script type="text/javascript" src="../source/viewer/embeddedviewer.js"></script>
|
||||||
<!-- engine end -->
|
<!-- engine end -->
|
||||||
|
|
||||||
<script type='text/javascript'>
|
<script type='text/javascript'>
|
||||||
|
|||||||
132
sandbox/embed_selfhost_code.html
Normal file
132
sandbox/embed_selfhost_code.html
Normal file
@ -0,0 +1,132 @@
|
|||||||
|
<!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.js"></script>
|
||||||
|
|
||||||
|
<!-- 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/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/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/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/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/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 -->
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div.online_3d_viewer
|
||||||
|
{
|
||||||
|
float: left;
|
||||||
|
border: 1px solid #eeeeee;
|
||||||
|
width: 640px;
|
||||||
|
height: 480px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script type='text/javascript'>
|
||||||
|
window.addEventListener ('load', () => {
|
||||||
|
// get the parent element of the viewer
|
||||||
|
let parentDiv = document.getElementById ('viewer');
|
||||||
|
|
||||||
|
// initialize the viewer with the parent element and some parameters
|
||||||
|
// the canvas will be resized according to the size of the parent
|
||||||
|
let viewer = new OV.EmbeddedViewer (parentDiv, {
|
||||||
|
camera : new OV.Camera (
|
||||||
|
new OV.Coord3D (-1.5, -3.0, 2.0),
|
||||||
|
new OV.Coord3D (0.0, 0.0, 0.0),
|
||||||
|
new OV.Coord3D (0.0, 0.0, 1.0)
|
||||||
|
),
|
||||||
|
backgroundColor : new OV.Color (255, 255, 255),
|
||||||
|
defaultColor : new OV.Color (200, 200, 200),
|
||||||
|
edgeSettings : {
|
||||||
|
showEdges : false,
|
||||||
|
edgeColor : new OV.Color (0, 0, 0),
|
||||||
|
edgeThreshold : 1
|
||||||
|
},
|
||||||
|
environmentMap : [
|
||||||
|
'../website/assets/envmaps/grayclouds/posx.jpg',
|
||||||
|
'../website/assets/envmaps/grayclouds/negx.jpg',
|
||||||
|
'../website/assets/envmaps/grayclouds/posy.jpg',
|
||||||
|
'../website/assets/envmaps/grayclouds/negy.jpg',
|
||||||
|
'../website/assets/envmaps/grayclouds/posz.jpg',
|
||||||
|
'../website/assets/envmaps/grayclouds/negz.jpg'
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
// load a model providing model urls
|
||||||
|
viewer.LoadModelFromUrls ([
|
||||||
|
'../../test/testfiles/obj/hundred_cubes.obj',
|
||||||
|
'../../test/testfiles/obj/hundred_cubes.mtl'
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="online_3d_viewer" id="viewer">
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -72,7 +72,7 @@
|
|||||||
<script type="text/javascript" src="../source/viewer/navigation.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/viewer.js"></script>
|
||||||
<script type="text/javascript" src="../source/viewer/measuretool.js"></script>
|
<script type="text/javascript" src="../source/viewer/measuretool.js"></script>
|
||||||
<script type="text/javascript" src="../source/viewer/domviewer.js"></script>
|
<script type="text/javascript" src="../source/viewer/embeddedviewer.js"></script>
|
||||||
<!-- engine end -->
|
<!-- engine end -->
|
||||||
|
|
||||||
<script type='text/javascript'>
|
<script type='text/javascript'>
|
||||||
|
|||||||
@ -72,7 +72,7 @@
|
|||||||
<script type="text/javascript" src="../source/viewer/navigation.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/viewer.js"></script>
|
||||||
<script type="text/javascript" src="../source/viewer/measuretool.js"></script>
|
<script type="text/javascript" src="../source/viewer/measuretool.js"></script>
|
||||||
<script type="text/javascript" src="../source/viewer/domviewer.js"></script>
|
<script type="text/javascript" src="../source/viewer/embeddedviewer.js"></script>
|
||||||
<!-- engine end -->
|
<!-- engine end -->
|
||||||
|
|
||||||
<script type='text/javascript'>
|
<script type='text/javascript'>
|
||||||
|
|||||||
@ -71,7 +71,7 @@
|
|||||||
<script type="text/javascript" src="../source/viewer/navigation.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/viewer.js"></script>
|
||||||
<script type="text/javascript" src="../source/viewer/measuretool.js"></script>
|
<script type="text/javascript" src="../source/viewer/measuretool.js"></script>
|
||||||
<script type="text/javascript" src="../source/viewer/domviewer.js"></script>
|
<script type="text/javascript" src="../source/viewer/embeddedviewer.js"></script>
|
||||||
<!-- engine end -->
|
<!-- engine end -->
|
||||||
|
|
||||||
<script type='text/javascript'>
|
<script type='text/javascript'>
|
||||||
|
|||||||
@ -72,7 +72,7 @@
|
|||||||
<script type="text/javascript" src="../source/viewer/navigation.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/viewer.js"></script>
|
||||||
<script type="text/javascript" src="../source/viewer/measuretool.js"></script>
|
<script type="text/javascript" src="../source/viewer/measuretool.js"></script>
|
||||||
<script type="text/javascript" src="../source/viewer/domviewer.js"></script>
|
<script type="text/javascript" src="../source/viewer/embeddedviewer.js"></script>
|
||||||
<!-- engine end -->
|
<!-- engine end -->
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@ -96,7 +96,7 @@
|
|||||||
'../../test/testfiles/3ds/cube_four_instances.3ds',
|
'../../test/testfiles/3ds/cube_four_instances.3ds',
|
||||||
'../../test/testfiles/3ds/texture.png'
|
'../../test/testfiles/3ds/texture.png'
|
||||||
];
|
];
|
||||||
OV.Init3DViewerElement (container, modelUrls, null, null, null);
|
OV.Init3DViewerElement (container, modelUrls);
|
||||||
}
|
}
|
||||||
{
|
{
|
||||||
let container = document.createElement ('div');
|
let container = document.createElement ('div');
|
||||||
@ -107,7 +107,7 @@
|
|||||||
'../../test/testfiles/obj/hundred_cubes.obj',
|
'../../test/testfiles/obj/hundred_cubes.obj',
|
||||||
'../../test/testfiles/obj/hundred_cubes.mtl'
|
'../../test/testfiles/obj/hundred_cubes.mtl'
|
||||||
];
|
];
|
||||||
OV.Init3DViewerElement (container, modelUrls, null, null, null);
|
OV.Init3DViewerElement (container, modelUrls);
|
||||||
}
|
}
|
||||||
{
|
{
|
||||||
let container = document.createElement ('div');
|
let container = document.createElement ('div');
|
||||||
@ -118,7 +118,7 @@
|
|||||||
'../../test/testfiles/obj/hundred_cubes.obj?param1=value1¶m2=value2',
|
'../../test/testfiles/obj/hundred_cubes.obj?param1=value1¶m2=value2',
|
||||||
'../../test/testfiles/obj/hundred_cubes.mtl?param1=value1¶m2=value2'
|
'../../test/testfiles/obj/hundred_cubes.mtl?param1=value1¶m2=value2'
|
||||||
];
|
];
|
||||||
OV.Init3DViewerElement (container, modelUrls, null, null, null);
|
OV.Init3DViewerElement (container, modelUrls);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -72,7 +72,7 @@
|
|||||||
<script type="text/javascript" src="../source/viewer/navigation.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/viewer.js"></script>
|
||||||
<script type="text/javascript" src="../source/viewer/measuretool.js"></script>
|
<script type="text/javascript" src="../source/viewer/measuretool.js"></script>
|
||||||
<script type="text/javascript" src="../source/viewer/domviewer.js"></script>
|
<script type="text/javascript" src="../source/viewer/embeddedviewer.js"></script>
|
||||||
<!-- engine end -->
|
<!-- engine end -->
|
||||||
|
|
||||||
<script type='text/javascript'>
|
<script type='text/javascript'>
|
||||||
|
|||||||
@ -71,7 +71,7 @@
|
|||||||
<script type="text/javascript" src="../source/viewer/navigation.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/viewer.js"></script>
|
||||||
<script type="text/javascript" src="../source/viewer/measuretool.js"></script>
|
<script type="text/javascript" src="../source/viewer/measuretool.js"></script>
|
||||||
<script type="text/javascript" src="../source/viewer/domviewer.js"></script>
|
<script type="text/javascript" src="../source/viewer/embeddedviewer.js"></script>
|
||||||
<!-- engine end -->
|
<!-- engine end -->
|
||||||
<script type='text/javascript'>
|
<script type='text/javascript'>
|
||||||
OV.Init3DViewerElements ();
|
OV.Init3DViewerElements ();
|
||||||
|
|||||||
@ -71,7 +71,7 @@
|
|||||||
<script type="text/javascript" src="../source/viewer/navigation.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/viewer.js"></script>
|
||||||
<script type="text/javascript" src="../source/viewer/measuretool.js"></script>
|
<script type="text/javascript" src="../source/viewer/measuretool.js"></script>
|
||||||
<script type="text/javascript" src="../source/viewer/domviewer.js"></script>
|
<script type="text/javascript" src="../source/viewer/embeddedviewer.js"></script>
|
||||||
<!-- engine end -->
|
<!-- engine end -->
|
||||||
<script type='text/javascript'>
|
<script type='text/javascript'>
|
||||||
OV.Init3DViewerElements ();
|
OV.Init3DViewerElements ();
|
||||||
|
|||||||
@ -1,170 +0,0 @@
|
|||||||
OV.Init3DViewerElement = function (parentDiv, modelUrls, parameters)
|
|
||||||
{
|
|
||||||
if (!parameters) {
|
|
||||||
parameters = {};
|
|
||||||
}
|
|
||||||
|
|
||||||
let canvas = document.createElement ('canvas');
|
|
||||||
parentDiv.appendChild (canvas);
|
|
||||||
|
|
||||||
let viewer = new OV.Viewer ();
|
|
||||||
viewer.Init (canvas);
|
|
||||||
|
|
||||||
let width = parentDiv.clientWidth;
|
|
||||||
let height = parentDiv.clientHeight;
|
|
||||||
viewer.Resize (width, height);
|
|
||||||
|
|
||||||
if (modelUrls === null || modelUrls.length === 0) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
OV.TransformFileHostUrls (modelUrls);
|
|
||||||
|
|
||||||
if (parameters.backgroundColor) {
|
|
||||||
viewer.SetBackgroundColor (parameters.backgroundColor);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (parameters.edgeSettings) {
|
|
||||||
viewer.SetEdgeSettings (
|
|
||||||
parameters.edgeSettings.showEdges,
|
|
||||||
parameters.edgeSettings.edgeColor,
|
|
||||||
parameters.edgeSettings.edgeThreshold
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (parameters.environmentMap) {
|
|
||||||
viewer.SetEnvironmentMap (parameters.environmentMap);
|
|
||||||
}
|
|
||||||
|
|
||||||
let settings = new OV.ImportSettings ();
|
|
||||||
if (parameters.defaultColor) {
|
|
||||||
settings.defaultColor = parameters.defaultColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
let progressDiv = null;
|
|
||||||
let loader = new OV.ThreeModelLoader ();
|
|
||||||
loader.LoadModel (modelUrls, OV.FileSource.Url, settings, {
|
|
||||||
onLoadStart : () => {
|
|
||||||
canvas.style.display = 'none';
|
|
||||||
progressDiv = document.createElement ('div');
|
|
||||||
progressDiv.innerHTML = 'Loading model...';
|
|
||||||
parentDiv.appendChild (progressDiv);
|
|
||||||
},
|
|
||||||
onImportStart : () => {
|
|
||||||
progressDiv.innerHTML = 'Importing model...';
|
|
||||||
},
|
|
||||||
onVisualizationStart : () => {
|
|
||||||
progressDiv.innerHTML = 'Visualizing model...';
|
|
||||||
},
|
|
||||||
onModelFinished : (importResult, threeObject) => {
|
|
||||||
parentDiv.removeChild (progressDiv);
|
|
||||||
canvas.style.display = 'inherit';
|
|
||||||
viewer.SetMainObject (threeObject);
|
|
||||||
let boundingSphere = viewer.GetBoundingSphere ((meshUserData) => {
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
viewer.AdjustClippingPlanesToSphere (boundingSphere);
|
|
||||||
if (parameters.camera) {
|
|
||||||
viewer.SetCamera (parameters.camera);
|
|
||||||
} else {
|
|
||||||
viewer.SetUpVector (importResult.upVector, false);
|
|
||||||
}
|
|
||||||
viewer.FitSphereToWindow (boundingSphere, false);
|
|
||||||
},
|
|
||||||
onTextureLoaded : () => {
|
|
||||||
viewer.Render ();
|
|
||||||
},
|
|
||||||
onLoadError : (importError) => {
|
|
||||||
let message = 'Unknown error';
|
|
||||||
if (importError.code === OV.ImportErrorCode.NoImportableFile) {
|
|
||||||
message = 'No importable file found';
|
|
||||||
} else if (importError.code === OV.ImportErrorCode.FailedToLoadFile) {
|
|
||||||
message = 'Failed to load file for import.';
|
|
||||||
} else if (importError.code === OV.ImportErrorCode.ImportFailed) {
|
|
||||||
message = 'Failed to import model.';
|
|
||||||
}
|
|
||||||
if (importError.message !== null) {
|
|
||||||
message += ' (' + importError.message + ')';
|
|
||||||
}
|
|
||||||
progressDiv.innerHTML = message;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
element: parentDiv,
|
|
||||||
viewer: viewer
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
OV.Init3DViewerElements = function (onReady)
|
|
||||||
{
|
|
||||||
function LoadElement (element)
|
|
||||||
{
|
|
||||||
let camera = null;
|
|
||||||
let cameraParams = element.getAttribute ('camera');
|
|
||||||
if (cameraParams) {
|
|
||||||
camera = OV.ParameterConverter.StringToCamera (cameraParams);
|
|
||||||
}
|
|
||||||
|
|
||||||
let backgroundColor = null;
|
|
||||||
let backgroundColorParams = element.getAttribute ('backgroundcolor');
|
|
||||||
if (backgroundColorParams) {
|
|
||||||
backgroundColor = OV.ParameterConverter.StringToColor (backgroundColorParams);
|
|
||||||
}
|
|
||||||
|
|
||||||
let defaultColor = null;
|
|
||||||
let defaultColorParams = element.getAttribute ('defaultcolor');
|
|
||||||
if (defaultColorParams) {
|
|
||||||
defaultColor = OV.ParameterConverter.StringToColor (defaultColorParams);
|
|
||||||
}
|
|
||||||
|
|
||||||
let edgeSettings = null;
|
|
||||||
let edgeSettingsParams = element.getAttribute ('edgesettings');
|
|
||||||
if (edgeSettingsParams) {
|
|
||||||
edgeSettings = OV.ParameterConverter.StringToEdgeSettings (edgeSettingsParams);
|
|
||||||
}
|
|
||||||
|
|
||||||
let environmentMap = null;
|
|
||||||
let environmentMapParams = element.getAttribute ('environmentmap');
|
|
||||||
if (environmentMapParams) {
|
|
||||||
let environmentMapParts = environmentMapParams.split (',');
|
|
||||||
if (environmentMapParts.length === 6) {
|
|
||||||
environmentMap = environmentMapParts;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let modelUrls = null;
|
|
||||||
let modelParams = element.getAttribute ('model');
|
|
||||||
if (modelParams) {
|
|
||||||
modelUrls = OV.ParameterConverter.StringToModelUrls (modelParams);
|
|
||||||
}
|
|
||||||
|
|
||||||
return OV.Init3DViewerElement (element, modelUrls, {
|
|
||||||
camera,
|
|
||||||
backgroundColor,
|
|
||||||
defaultColor,
|
|
||||||
edgeSettings,
|
|
||||||
environmentMap
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
let viewerElements = [];
|
|
||||||
window.addEventListener ('load', () => {
|
|
||||||
let elements = document.getElementsByClassName ('online_3d_viewer');
|
|
||||||
for (let i = 0; i < elements.length; i++) {
|
|
||||||
let element = elements[i];
|
|
||||||
let viewerElement = LoadElement (element);
|
|
||||||
viewerElements.push (viewerElement);
|
|
||||||
}
|
|
||||||
if (onReady !== undefined && onReady !== null) {
|
|
||||||
onReady (viewerElements);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
window.addEventListener ('resize', () => {
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
183
source/viewer/embeddedviewer.js
Normal file
183
source/viewer/embeddedviewer.js
Normal file
@ -0,0 +1,183 @@
|
|||||||
|
OV.EmbeddedViewer = class
|
||||||
|
{
|
||||||
|
constructor (parentElement, parameters)
|
||||||
|
{
|
||||||
|
this.parentElement = parentElement;
|
||||||
|
this.parameters = {};
|
||||||
|
if (OV.IsDefined (parameters)) {
|
||||||
|
this.parameters = parameters;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.canvas = document.createElement ('canvas');
|
||||||
|
this.parentElement.appendChild (this.canvas);
|
||||||
|
|
||||||
|
this.viewer = new OV.Viewer ();
|
||||||
|
this.viewer.Init (this.canvas);
|
||||||
|
|
||||||
|
let width = this.parentElement.clientWidth;
|
||||||
|
let height = this.parentElement.clientHeight;
|
||||||
|
this.viewer.Resize (width, height);
|
||||||
|
|
||||||
|
if (this.parameters.backgroundColor) {
|
||||||
|
this.viewer.SetBackgroundColor (this.parameters.backgroundColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.parameters.edgeSettings) {
|
||||||
|
this.viewer.SetEdgeSettings (
|
||||||
|
this.parameters.edgeSettings.showEdges,
|
||||||
|
this.parameters.edgeSettings.edgeColor,
|
||||||
|
this.parameters.edgeSettings.edgeThreshold
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.parameters.environmentMap) {
|
||||||
|
this.viewer.SetEnvironmentMap (this.parameters.environmentMap);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener ('resize', () => {
|
||||||
|
this.Resize ();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
LoadModelFromUrls (modelUrls)
|
||||||
|
{
|
||||||
|
if (modelUrls === null || modelUrls.length === 0) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
OV.TransformFileHostUrls (modelUrls);
|
||||||
|
|
||||||
|
let settings = new OV.ImportSettings ();
|
||||||
|
if (this.parameters.defaultColor) {
|
||||||
|
settings.defaultColor = this.parameters.defaultColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
let progressDiv = null;
|
||||||
|
let loader = new OV.ThreeModelLoader ();
|
||||||
|
loader.LoadModel (modelUrls, OV.FileSource.Url, settings, {
|
||||||
|
onLoadStart : () => {
|
||||||
|
this.canvas.style.display = 'none';
|
||||||
|
progressDiv = document.createElement ('div');
|
||||||
|
progressDiv.innerHTML = 'Loading model...';
|
||||||
|
this.parentElement.appendChild (progressDiv);
|
||||||
|
},
|
||||||
|
onImportStart : () => {
|
||||||
|
progressDiv.innerHTML = 'Importing model...';
|
||||||
|
},
|
||||||
|
onVisualizationStart : () => {
|
||||||
|
progressDiv.innerHTML = 'Visualizing model...';
|
||||||
|
},
|
||||||
|
onModelFinished : (importResult, threeObject) => {
|
||||||
|
this.parentElement.removeChild (progressDiv);
|
||||||
|
this.canvas.style.display = 'inherit';
|
||||||
|
this.viewer.SetMainObject (threeObject);
|
||||||
|
let boundingSphere = this.viewer.GetBoundingSphere ((meshUserData) => {
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
this.viewer.AdjustClippingPlanesToSphere (boundingSphere);
|
||||||
|
if (this.parameters.camera) {
|
||||||
|
this.viewer.SetCamera (this.parameters.camera);
|
||||||
|
} else {
|
||||||
|
this.viewer.SetUpVector (importResult.upVector, false);
|
||||||
|
}
|
||||||
|
this.viewer.FitSphereToWindow (boundingSphere, false);
|
||||||
|
},
|
||||||
|
onTextureLoaded : () => {
|
||||||
|
this.viewer.Render ();
|
||||||
|
},
|
||||||
|
onLoadError : (importError) => {
|
||||||
|
let message = 'Unknown error';
|
||||||
|
if (importError.code === OV.ImportErrorCode.NoImportableFile) {
|
||||||
|
message = 'No importable file found';
|
||||||
|
} else if (importError.code === OV.ImportErrorCode.FailedToLoadFile) {
|
||||||
|
message = 'Failed to load file for import.';
|
||||||
|
} else if (importError.code === OV.ImportErrorCode.ImportFailed) {
|
||||||
|
message = 'Failed to import model.';
|
||||||
|
}
|
||||||
|
if (importError.message !== null) {
|
||||||
|
message += ' (' + importError.message + ')';
|
||||||
|
}
|
||||||
|
progressDiv.innerHTML = message;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
Resize ()
|
||||||
|
{
|
||||||
|
let width = this.parentElement.clientWidth;
|
||||||
|
let height = this.parentElement.clientHeight;
|
||||||
|
this.viewer.Resize (width, height);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
OV.Init3DViewerElement = function (parentElement, modelUrls, parameters)
|
||||||
|
{
|
||||||
|
let viewer = new OV.EmbeddedViewer (parentElement, parameters);
|
||||||
|
viewer.LoadModelFromUrls (modelUrls);
|
||||||
|
return viewer;
|
||||||
|
};
|
||||||
|
|
||||||
|
OV.Init3DViewerElements = function (onReady)
|
||||||
|
{
|
||||||
|
function LoadElement (element)
|
||||||
|
{
|
||||||
|
let camera = null;
|
||||||
|
let cameraParams = element.getAttribute ('camera');
|
||||||
|
if (cameraParams) {
|
||||||
|
camera = OV.ParameterConverter.StringToCamera (cameraParams);
|
||||||
|
}
|
||||||
|
|
||||||
|
let backgroundColor = null;
|
||||||
|
let backgroundColorParams = element.getAttribute ('backgroundcolor');
|
||||||
|
if (backgroundColorParams) {
|
||||||
|
backgroundColor = OV.ParameterConverter.StringToColor (backgroundColorParams);
|
||||||
|
}
|
||||||
|
|
||||||
|
let defaultColor = null;
|
||||||
|
let defaultColorParams = element.getAttribute ('defaultcolor');
|
||||||
|
if (defaultColorParams) {
|
||||||
|
defaultColor = OV.ParameterConverter.StringToColor (defaultColorParams);
|
||||||
|
}
|
||||||
|
|
||||||
|
let edgeSettings = null;
|
||||||
|
let edgeSettingsParams = element.getAttribute ('edgesettings');
|
||||||
|
if (edgeSettingsParams) {
|
||||||
|
edgeSettings = OV.ParameterConverter.StringToEdgeSettings (edgeSettingsParams);
|
||||||
|
}
|
||||||
|
|
||||||
|
let environmentMap = null;
|
||||||
|
let environmentMapParams = element.getAttribute ('environmentmap');
|
||||||
|
if (environmentMapParams) {
|
||||||
|
let environmentMapParts = environmentMapParams.split (',');
|
||||||
|
if (environmentMapParts.length === 6) {
|
||||||
|
environmentMap = environmentMapParts;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let modelUrls = null;
|
||||||
|
let modelParams = element.getAttribute ('model');
|
||||||
|
if (modelParams) {
|
||||||
|
modelUrls = OV.ParameterConverter.StringToModelUrls (modelParams);
|
||||||
|
}
|
||||||
|
|
||||||
|
return OV.Init3DViewerElement (element, modelUrls, {
|
||||||
|
camera : camera,
|
||||||
|
backgroundColor : backgroundColor,
|
||||||
|
defaultColor : defaultColor,
|
||||||
|
edgeSettings : edgeSettings,
|
||||||
|
environmentMap : environmentMap
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
let viewerElements = [];
|
||||||
|
window.addEventListener ('load', () => {
|
||||||
|
let elements = document.getElementsByClassName ('online_3d_viewer');
|
||||||
|
for (let i = 0; i < elements.length; i++) {
|
||||||
|
let element = elements[i];
|
||||||
|
let viewerElement = LoadElement (element);
|
||||||
|
viewerElements.push (viewerElement);
|
||||||
|
}
|
||||||
|
if (onReady !== undefined && onReady !== null) {
|
||||||
|
onReady (viewerElements);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
@ -62,7 +62,7 @@
|
|||||||
"source/viewer/navigation.js",
|
"source/viewer/navigation.js",
|
||||||
"source/viewer/viewer.js",
|
"source/viewer/viewer.js",
|
||||||
"source/viewer/measuretool.js",
|
"source/viewer/measuretool.js",
|
||||||
"source/viewer/domviewer.js"
|
"source/viewer/embeddedviewer.js"
|
||||||
],
|
],
|
||||||
"website_files_js" : [
|
"website_files_js" : [
|
||||||
"website/o3dv/js/featureset.js",
|
"website/o3dv/js/featureset.js",
|
||||||
|
|||||||
@ -78,7 +78,7 @@
|
|||||||
<script type="text/javascript" src="../source/viewer/navigation.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/viewer.js"></script>
|
||||||
<script type="text/javascript" src="../source/viewer/measuretool.js"></script>
|
<script type="text/javascript" src="../source/viewer/measuretool.js"></script>
|
||||||
<script type="text/javascript" src="../source/viewer/domviewer.js"></script>
|
<script type="text/javascript" src="../source/viewer/embeddedviewer.js"></script>
|
||||||
<!-- engine end -->
|
<!-- engine end -->
|
||||||
|
|
||||||
<!-- website start -->
|
<!-- website start -->
|
||||||
|
|||||||
@ -80,7 +80,7 @@
|
|||||||
<script type="text/javascript" src="../source/viewer/navigation.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/viewer.js"></script>
|
||||||
<script type="text/javascript" src="../source/viewer/measuretool.js"></script>
|
<script type="text/javascript" src="../source/viewer/measuretool.js"></script>
|
||||||
<script type="text/javascript" src="../source/viewer/domviewer.js"></script>
|
<script type="text/javascript" src="../source/viewer/embeddedviewer.js"></script>
|
||||||
<!-- engine end -->
|
<!-- engine end -->
|
||||||
|
|
||||||
<!-- website start -->
|
<!-- website start -->
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user