Can't calculate the volume on model in the Embedded Viewer #241
This commit is contained in:
parent
104fa9a0ff
commit
e9a308bcfe
80
sandbox/embed_selfhost_calculate.html
Normal file
80
sandbox/embed_selfhost_calculate.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.js"></script>
|
||||||
|
<script type="text/javascript" src="../build/o3dv.min-dev.js"></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div.online_3d_viewer
|
||||||
|
{
|
||||||
|
float: left;
|
||||||
|
border: 1px solid #eeeeee;
|
||||||
|
width: 640px;
|
||||||
|
height: 480px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script type='text/javascript'>
|
||||||
|
function OnModelLoaded (model)
|
||||||
|
{
|
||||||
|
let calculationDiv = document.getElementById ('calculation_result');
|
||||||
|
calculationDiv.innerHTML =
|
||||||
|
'Surface area: ' + OV.CalculateSurfaceArea (model).toFixed (2) + '<br>' +
|
||||||
|
'Volume: ' + OV.CalculateVolume (model).toFixed (2) + '<br>';
|
||||||
|
}
|
||||||
|
|
||||||
|
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
|
||||||
|
let viewer = new OV.EmbeddedViewer (parentDiv, {
|
||||||
|
camera : new OV.Camera (
|
||||||
|
new OV.Coord3D (-1.5, 2.0, 3.0),
|
||||||
|
new OV.Coord3D (0.0, 0.0, 0.0),
|
||||||
|
new OV.Coord3D (0.0, 1.0, 0.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
|
||||||
|
},
|
||||||
|
environmentSettings : {
|
||||||
|
environmentMap : [
|
||||||
|
'../website/assets/envmaps/fishermans_bastion/posx.jpg',
|
||||||
|
'../website/assets/envmaps/fishermans_bastion/negx.jpg',
|
||||||
|
'../website/assets/envmaps/fishermans_bastion/posy.jpg',
|
||||||
|
'../website/assets/envmaps/fishermans_bastion/negy.jpg',
|
||||||
|
'../website/assets/envmaps/fishermans_bastion/posz.jpg',
|
||||||
|
'../website/assets/envmaps/fishermans_bastion/negz.jpg'
|
||||||
|
],
|
||||||
|
backgroundIsEnvMap : true
|
||||||
|
},
|
||||||
|
onModelLoaded : () => {
|
||||||
|
OnModelLoaded (viewer.GetModel ());
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 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>
|
||||||
|
<div id="calculation_result"></div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -44,6 +44,8 @@ export class EmbeddedViewer
|
|||||||
this.viewer.SetEnvironmentMapSettings (environmentMap, backgroundIsEnvMap);
|
this.viewer.SetEnvironmentMapSettings (environmentMap, backgroundIsEnvMap);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.model = null;
|
||||||
|
|
||||||
window.addEventListener ('resize', () => {
|
window.addEventListener ('resize', () => {
|
||||||
this.Resize ();
|
this.Resize ();
|
||||||
});
|
});
|
||||||
@ -63,6 +65,7 @@ export class EmbeddedViewer
|
|||||||
settings.defaultColor = this.parameters.defaultColor;
|
settings.defaultColor = this.parameters.defaultColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.model = null;
|
||||||
let progressDiv = null;
|
let progressDiv = null;
|
||||||
let loader = new ThreeModelLoader ();
|
let loader = new ThreeModelLoader ();
|
||||||
loader.LoadModel (modelUrls, FileSource.Url, settings, {
|
loader.LoadModel (modelUrls, FileSource.Url, settings, {
|
||||||
@ -92,6 +95,11 @@ export class EmbeddedViewer
|
|||||||
this.viewer.SetUpVector (Direction.Y, false);
|
this.viewer.SetUpVector (Direction.Y, false);
|
||||||
}
|
}
|
||||||
this.viewer.FitSphereToWindow (boundingSphere, false);
|
this.viewer.FitSphereToWindow (boundingSphere, false);
|
||||||
|
|
||||||
|
this.model = importResult.model;
|
||||||
|
if (this.parameters.onModelLoaded) {
|
||||||
|
this.parameters.onModelLoaded ();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
onTextureLoaded : () => {
|
onTextureLoaded : () => {
|
||||||
this.viewer.Render ();
|
this.viewer.Render ();
|
||||||
@ -118,6 +126,11 @@ export class EmbeddedViewer
|
|||||||
return this.viewer;
|
return this.viewer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
GetModel ()
|
||||||
|
{
|
||||||
|
return this.model;
|
||||||
|
}
|
||||||
|
|
||||||
Resize ()
|
Resize ()
|
||||||
{
|
{
|
||||||
let width = this.parentElement.clientWidth;
|
let width = this.parentElement.clientWidth;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user