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

Add experiment to load models using three.js loaders.

Browse Source
This commit is contained in:
kovacsv 2021-08-06 17:00:29 +02:00
parent c9125c53b2
commit 0a269785da
15 changed files with 4068 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3872
libs/three_loaders/FBXLoader.js Normal file
View File

File diff suppressed because it is too large Load Diff

7
libs/three_loaders/fflate.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
sandbox/embed_selfhost_errors.html
View File

@ -61,6 +61,7 @@
<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/threeimporter.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>

1
sandbox/embed_selfhost_externallibs.html
View File

@ -61,6 +61,7 @@
<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/threeimporter.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>

1
sandbox/embed_selfhost_fullscreen.html
View File

@ -60,6 +60,7 @@
<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/threeimporter.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>

1
sandbox/embed_selfhost_manual.html
View File

@ -61,6 +61,7 @@
<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/threeimporter.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>

1
sandbox/embed_selfhost_multiple.html
View File

@ -61,6 +61,7 @@
<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/threeimporter.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>

1
sandbox/embed_selfhost_single.html
View File

@ -60,6 +60,7 @@
<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/threeimporter.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>

1
sandbox/embed_selfhost_single_scroll.html
View File

@ -60,6 +60,7 @@
<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/threeimporter.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>

119
source/threejs/threeimporter.js Normal file
View File

@ -0,0 +1,119 @@
OV.ThreeImporter = class extends OV.ImporterBase
{
constructor ()
{
super ();
}
CanImportExtension (extension)
{
return extension === 'fbx';
}
GetKnownFileFormats ()
{
return {
'fbx' : OV.FileFormat.Binary
};
}
GetUpDirection ()
{
return OV.Direction.Z;
}
ClearContent ()
{
}
ResetContent ()
{
}
ImportContent (fileContent, onFinish)
{
const libraries = this.GetExternalLibraries ();
if (libraries === null) {
onFinish ();
return;
}
Promise.all (libraries).then (() => {
const mainFileUrl = OV.CreateObjectUrl (fileContent);
const loader = this.CreateLoader (mainFileUrl);
this.LoadModel (mainFileUrl, loader, onFinish);
}).catch (() => {
onFinish ();
});
}
GetExternalLibraries ()
{
if (this.extension === 'fbx') {
return [
OV.LoadExternalLibrary ('three_loaders/FBXLoader.js'),
OV.LoadExternalLibrary ('three_loaders/fflate.min.js')
];
}
return null;
}
CreateLoader (mainFileUrl)
{
const manager = new THREE.LoadingManager ();
manager.setURLModifier ((url) => {
if (url === mainFileUrl) {
return mainFileUrl;
}
const fileBuffer = this.callbacks.getFileBuffer (url);
const fileUrl = OV.CreateObjectUrl (fileBuffer);
return fileUrl;
});
let loader = null;
if (this.extension === 'fbx') {
loader = new THREE.FBXLoader (manager);
}
return loader;
}
LoadModel (mainFileUrl, loader, onFinish)
{
function SetColor (color, threeColor)
{
color.Set (
parseInt (threeColor.r * 255.0, 10),
parseInt (threeColor.g * 255.0, 10),
parseInt (threeColor.b * 255.0, 10)
);
}
if (loader === null) {
onFinish ();
return;
}
// TODO: error
loader.load (mainFileUrl, (object) => {
object.traverse ((child) => {
if (child.isMesh) {
// TODO: merge same materials
// TODO: PBR materials
console.log (child);
let threeMaterial = child.material;
let material = new OV.Material (OV.MaterialType.Phong);
material.name = threeMaterial.name;
SetColor (material.color, threeMaterial.color);
if (threeMaterial.type === 'MeshPhongMaterial') {
SetColor (material.specular, threeMaterial.specular);
material.shininess = threeMaterial.shininess / 100.0;
}
const materialIndex = this.model.AddMaterial (material);
let mesh = OV.ConvertThreeGeometryToMesh (child.geometry, materialIndex);
this.model.AddMesh (mesh);
}
});
onFinish ();
});
}
};

1
source/threejs/threemodelloader.js
View File

@ -3,6 +3,7 @@ OV.ThreeModelLoader = class
constructor ()
{
this.importer = new OV.Importer ();
this.importer.AddImporter (new OV.ThreeImporter ());
this.callbacks = null;
this.inProgress = false;
this.defaultMaterial = null;

59
source/threejs/threeutils.js
View File

@ -54,3 +54,62 @@ OV.HasHighpDriverIssue = function ()
}
return false;
};
OV.ConvertThreeGeometryToMesh = function (threeGeometry, materialIndex)
{
// TODO: check if buffergeometry
// TODO: name
let mesh = new OV.Mesh ();
let vertices = threeGeometry.attributes.position.array;
for (let i = 0; i < vertices.length; i += 3) {
let x = vertices[i];
let y = vertices[i + 1];
let z = vertices[i + 2];
mesh.AddVertex (new OV.Coord3D (x, y, z));
}
let hasNormals = (threeGeometry.attributes.normal !== undefined);
if (hasNormals) {
let normals = threeGeometry.attributes.normal.array;
for (let i = 0; i < normals.length; i += 3) {
let x = normals[i];
let y = normals[i + 1];
let z = normals[i + 2];
mesh.AddNormal (new OV.Coord3D (x, y, z));
}
}
let hasUVs = (threeGeometry.attributes.uv !== undefined);
if (hasUVs) {
let uvs = threeGeometry.attributes.uv.array;
for (let i = 0; i < uvs.length; i += 2) {
let x = uvs[i];
let y = uvs[i + 1];
mesh.AddTextureUV (new OV.Coord2D (x, y));
}
}
let indices = null;
if (threeGeometry.index !== null) {
indices = threeGeometry.index.array;
} else {
indices = [];
for (let i = 0; i < vertices.length / 3; i++) {
indices.push (i);
}
}
for (let i = 0; i < indices.length; i += 3) {
let v0 = indices[i];
let v1 = indices[i + 1];
let v2 = indices[i + 2];
let triangle = new OV.Triangle (v0, v1, v2);
if (hasNormals) {
triangle.SetNormals (v0, v1, v2);
}
if (hasUVs) {
triangle.SetTextureUVs (v0, v1, v2);
}
if (materialIndex !== null) {
triangle.SetMaterial (materialIndex);
}
mesh.AddTriangle (triangle);
}
return mesh;
};

1
tools/config.json
View File

@ -55,6 +55,7 @@
"source/export/exporter.js",
"source/threejs/threeutils.js",
"source/threejs/threeconverter.js",
"source/threejs/threeimporter.js",
"source/threejs/threemodelloader.js",
"source/parameters/parameterlist.js",
"source/viewer/domutils.js",

1
website/embed.html
View File

@ -68,6 +68,7 @@
<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/threeimporter.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>

1
website/index.html
View File

@ -68,6 +68,7 @@
<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/threeimporter.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>