Doni/ModelHandle
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make File Upload Possible in the Embedded Viewer #253

Browse Source
This commit is contained in:
kovacsv 2022-05-05 22:02:56 +02:00
parent 9f26a3ab5f
commit b3ab00fbbe
3 changed files with 88 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
sandbox/embed_selfhost_code_file.html Normal file
View File

@ -0,0 +1,74 @@
<!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'>
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 : false
}
});
// load a model selected by file input
let fileInput = document.getElementById ('open_file');
fileInput.addEventListener ('change', (ev) => {
if (ev.target.files.length > 0) {
viewer.LoadModelFromFileList (ev.target.files);
}
});
});
</script>
</head>
<body>
<div>
<input type="file" id="open_file" multiple></input>
</div>
<div class="online_3d_viewer" id="viewer">
</div>
</body>
</html>

2
sandbox/embed_selfhost_code.html → sandbox/embed_selfhost_code_url.html
View File

@ -48,7 +48,7 @@
'../website/assets/envmaps/fishermans_bastion/posz.jpg', '../website/assets/envmaps/fishermans_bastion/posz.jpg',
'../website/assets/envmaps/fishermans_bastion/negz.jpg' '../website/assets/envmaps/fishermans_bastion/negz.jpg'
], ],
backgroundIsEnvMap : true backgroundIsEnvMap : false
} }
}); });

17
source/engine/viewer/embeddedviewer.js
View File

@ -53,13 +53,22 @@ export class EmbeddedViewer
LoadModelFromUrls (modelUrls) LoadModelFromUrls (modelUrls)
{ {
this.viewer.Clear (); TransformFileHostUrls (modelUrls);
this.LoadModelInternal (modelUrls, FileSource.Url);
}
if (modelUrls === null || modelUrls.length === 0) { LoadModelFromFileList (fileList)
{
this.LoadModelInternal (fileList, FileSource.File);
}
LoadModelInternal (fileList, fileSource)
{
if (fileList === null || fileList.length === 0) {
return null; return null;
} }
TransformFileHostUrls (modelUrls);
this.viewer.Clear ();
let settings = new ImportSettings (); let settings = new ImportSettings ();
if (this.parameters.defaultColor) { if (this.parameters.defaultColor) {
settings.defaultColor = this.parameters.defaultColor; settings.defaultColor = this.parameters.defaultColor;
@ -68,7 +77,7 @@ export class EmbeddedViewer
this.model = null; 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 (fileList, fileSource, settings, {
onLoadStart : () => { onLoadStart : () => {
this.canvas.style.display = 'none'; this.canvas.style.display = 'none';
progressDiv = document.createElement ('div'); progressDiv = document.createElement ('div');