Some of the importers are implemented using external libraries. These are found in the libs folder of the package. To make these libraries available, you have to tell the engine where to find them. The location of the external libraries can be set with the {@link SetExternalLibLocation} function. Make sure to call it before any other engine calls.
Create some elements anywhere on your page with the class name online-3d-viewer
. You can create multiple elements with different parameters.
<div class="online_3d_viewer"
style="width: 800px; height: 600px;"
model="model.obj, model.mtl">
</div>
You can specify several attributes:
After placing the elements, call the {@link Init3DViewerElements} function to initalize all the viewers. It must be called after the document is loaded.
window.addEventListener ('load', () => {
// tell the engine where to find the libs folder
OV.SetExternalLibLocation ('libs');
// init all viewers on the page
OV.Init3DViewerElements ();
});
You can also initalize the engine from code. In this case you can provide all the parameters as a JavaScript object. See the {@link EmbeddedViewer} documentation for more details.
window.addEventListener ('load', () => {
// set the location of the external libraries
OV.SetExternalLibLocation ('../libs');
// 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),
45.0
),
backgroundColor : new OV.RGBAColor (255, 255, 255, 255),
defaultColor : new OV.RGBColor (200, 200, 200),
edgeSettings : new OV.EdgeSettings (false, new OV.RGBColor (0, 0, 0), 1),
environmentSettings : new OV.EnvironmentSettings (
[
'assets/envmaps/fishermans_bastion/posx.jpg',
'assets/envmaps/fishermans_bastion/negx.jpg',
'assets/envmaps/fishermans_bastion/posy.jpg',
'assets/envmaps/fishermans_bastion/negy.jpg',
'assets/envmaps/fishermans_bastion/posz.jpg',
'assets/envmaps/fishermans_bastion/negz.jpg'
],
false
)
});
// load a model providing model urls
viewer.LoadModelFromUrlList ([
'model.obj',
'model.mtl'
]);
});