Add possibility to init only one viewer manually.
This commit is contained in:
kovacsv
parent
bbfd5f9cf7
commit
239a4df91c
120
sandbox/embed_selfhost_manual.html
Normal file
120
sandbox/embed_selfhost_manual.html
Normal file
@ -0,0 +1,120 @@
|
||||
<!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-129.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/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/element.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/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/importer.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/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/domviewer.js"></script>
|
||||
<!-- importer end -->
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
float: left;
|
||||
border: 1px solid #eeeeee;
|
||||
margin: 0px 4px 4px 0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script type='text/javascript'>
|
||||
{
|
||||
let container = document.createElement ('div');
|
||||
container.style.width = '400px';
|
||||
container.style.height = '300px';
|
||||
document.body.appendChild (container);
|
||||
let modelUrls = [
|
||||
'../../test/testfiles/3ds/cube_four_instances.3ds',
|
||||
'../../test/testfiles/3ds/texture.png'
|
||||
];
|
||||
OV.Init3DViewerElement (container, modelUrls, null, null, null);
|
||||
}
|
||||
{
|
||||
let container = document.createElement ('div');
|
||||
container.style.width = '400px';
|
||||
container.style.height = '300px';
|
||||
document.body.appendChild (container);
|
||||
let modelUrls = [
|
||||
'../../test/testfiles/obj/hundred_cubes.obj',
|
||||
'../../test/testfiles/obj/hundred_cubes.mtl'
|
||||
];
|
||||
OV.Init3DViewerElement (container, modelUrls, null, null, null);
|
||||
}
|
||||
{
|
||||
let container = document.createElement ('div');
|
||||
container.style.width = '400px';
|
||||
container.style.height = '300px';
|
||||
document.body.appendChild (container);
|
||||
let modelUrls = [
|
||||
'../../test/testfiles/obj/hundred_cubes.obj?param1=value1¶m2=value2',
|
||||
'../../test/testfiles/obj/hundred_cubes.mtl?param1=value1¶m2=value2'
|
||||
];
|
||||
OV.Init3DViewerElement (container, modelUrls, null, null, null);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,92 +1,102 @@
|
||||
OV.Init3DViewerElement = function (parentDiv, modelUrls, camera, backgroundColor, defaultColor)
|
||||
{
|
||||
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);
|
||||
|
||||
let loader = new OV.ThreeModelLoader ();
|
||||
let progressDiv = null;
|
||||
loader.Init ({
|
||||
onLoadStart : function () {
|
||||
canvas.style.display = 'none';
|
||||
progressDiv = document.createElement ('div');
|
||||
parentDiv.appendChild (progressDiv);
|
||||
progressDiv.innerHTML = 'Loading model...';
|
||||
},
|
||||
onImportStart : function () {
|
||||
progressDiv.innerHTML = 'Importing model...';
|
||||
},
|
||||
onVisualizationStart : function () {
|
||||
progressDiv.innerHTML = 'Visualizing model...';
|
||||
},
|
||||
onModelFinished : function (importResult, threeMeshes) {
|
||||
parentDiv.removeChild (progressDiv);
|
||||
canvas.style.display = 'inherit';
|
||||
viewer.AddMeshes (threeMeshes);
|
||||
let boundingSphere = viewer.GetBoundingSphere ((meshUserData) => {
|
||||
return true;
|
||||
});
|
||||
viewer.AdjustClippingPlanes (boundingSphere);
|
||||
if (camera !== null) {
|
||||
viewer.SetCamera (camera);
|
||||
} else {
|
||||
viewer.SetUpVector (importResult.upVector, false);
|
||||
}
|
||||
viewer.FitToWindow (boundingSphere, false);
|
||||
},
|
||||
onTextureLoaded : function () {
|
||||
viewer.Render ();
|
||||
},
|
||||
onLoadError : function (importError) {
|
||||
progressDiv.innerHTML = 'Unknown error.';
|
||||
},
|
||||
});
|
||||
|
||||
if (modelUrls === null || modelUrls.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (backgroundColor !== null) {
|
||||
viewer.SetBackgroundColor (backgroundColor);
|
||||
}
|
||||
|
||||
let settings = new OV.ImportSettings ();
|
||||
if (defaultColor !== null) {
|
||||
settings.defaultColor = defaultColor;
|
||||
}
|
||||
|
||||
loader.LoadFromUrlList (modelUrls, settings);
|
||||
return {
|
||||
element: parentDiv,
|
||||
viewer: viewer
|
||||
};
|
||||
};
|
||||
|
||||
OV.Init3DViewerElements = function (onReady)
|
||||
{
|
||||
function LoadElement (element)
|
||||
{
|
||||
let canvas = document.createElement ('canvas');
|
||||
element.appendChild (canvas);
|
||||
|
||||
let viewer = new OV.Viewer ();
|
||||
viewer.Init (canvas);
|
||||
|
||||
let width = element.clientWidth;
|
||||
let height = element.clientHeight;
|
||||
viewer.Resize (width, height);
|
||||
|
||||
let loader = new OV.ThreeModelLoader ();
|
||||
let progressDiv = null;
|
||||
loader.Init ({
|
||||
onLoadStart : function () {
|
||||
canvas.style.display = 'none';
|
||||
progressDiv = document.createElement ('div');
|
||||
element.appendChild (progressDiv);
|
||||
progressDiv.innerHTML = 'Loading model...';
|
||||
},
|
||||
onImportStart : function () {
|
||||
progressDiv.innerHTML = 'Importing model...';
|
||||
},
|
||||
onVisualizationStart : function () {
|
||||
progressDiv.innerHTML = 'Visualizing model...';
|
||||
},
|
||||
onModelFinished : function (importResult, threeMeshes) {
|
||||
element.removeChild (progressDiv);
|
||||
canvas.style.display = 'inherit';
|
||||
viewer.AddMeshes (threeMeshes);
|
||||
let boundingSphere = viewer.GetBoundingSphere ((meshUserData) => {
|
||||
return true;
|
||||
});
|
||||
viewer.AdjustClippingPlanes (boundingSphere);
|
||||
let camera = null;
|
||||
let cameraParams = element.getAttribute ('camera');
|
||||
if (cameraParams) {
|
||||
camera = OV.ParameterConverter.StringToCamera (cameraParams);
|
||||
}
|
||||
if (camera !== null) {
|
||||
viewer.SetCamera (camera);
|
||||
} else {
|
||||
viewer.SetUpVector (importResult.upVector, false);
|
||||
}
|
||||
viewer.FitToWindow (boundingSphere, false);
|
||||
},
|
||||
onTextureLoaded : function () {
|
||||
viewer.Render ();
|
||||
},
|
||||
onLoadError : function (importError) {
|
||||
progressDiv.innerHTML = 'Unknown error.';
|
||||
},
|
||||
});
|
||||
|
||||
let backgroundParam = element.getAttribute ('backgroundcolor');
|
||||
if (backgroundParam) {
|
||||
let backgroundColor = OV.ParameterConverter.StringToColor (backgroundParam);
|
||||
if (backgroundColor !== null) {
|
||||
viewer.SetBackgroundColor (backgroundColor);
|
||||
}
|
||||
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 modelUrls = null;
|
||||
let modelParams = element.getAttribute ('model');
|
||||
if (!modelParams) {
|
||||
return;
|
||||
if (modelParams) {
|
||||
modelUrls = OV.ParameterConverter.StringToModelUrls (modelParams);
|
||||
}
|
||||
|
||||
let modelUrls = OV.ParameterConverter.StringToModelUrls (modelParams);
|
||||
if (modelUrls === null || modelUrls.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
let settings = new OV.ImportSettings ();
|
||||
let colorParam = element.getAttribute ('defaultcolor');
|
||||
if (colorParam) {
|
||||
let defaultColor = OV.ParameterConverter.StringToColor (colorParam);
|
||||
if (defaultColor !== null) {
|
||||
settings.defaultColor = defaultColor;
|
||||
}
|
||||
}
|
||||
|
||||
loader.LoadFromUrlList (modelUrls, settings);
|
||||
return {
|
||||
element: element,
|
||||
viewer: viewer
|
||||
};
|
||||
return OV.Init3DViewerElement (element, modelUrls, camera, backgroundColor, defaultColor);
|
||||
}
|
||||
|
||||
let viewerElements = [];
|
||||
|
||||
Loading…
Reference in New Issue
Block a user