Expertsys 3d on the web

Expertsys offers the service of creating 3d for the web. It is very simple to have them manufactured. The workflow is:

• Client asks Expertsys to create a 3d file based on 2d drawings.
• Expertsys returns a 3d file to be used on a homepage.

File returned from Expertsys are one gltf file + one bin file + one json file + several image files. These files constitute a scene.

It is very simple to use Expertsys 3d on any homepage. Just follow these simple instructions:

1. Download the files mentioned in this section here and place them next to your html file
2. Insert the following snippet in the head section on any homepage:

   <script src="jquery.js"></script>
   
   <script src="babylon.js"></script>
   
   <script src="babylonjs.loaders.js"></script>
   
   <script src="pep.js"></script>
   
   <script src="app.viewer.js"></script>

   babylon.js, babylon.loader.js, pep.js must be version 3
   jquery.js must be version 3

3. Place 3d control in the body section and define its size. Use the following snippet:

   <div id="viewer" style="position:absolute;top:0px;bottom:0px;left:0px;right:0px;">
   	<canvas id="renderCanvas" touch-action="none" style="width:100%;height:100%;"></canvas>
   </div>

   Here the viewer has fixed bounds (position:absolute), but you can make it variable if you prefer.

4. At the bottom of the body section, insert the following snippet:

   <script>
   var viewer = new Viewer(document.getElementById('renderCanvas'));
   viewer.load("url/To/Directory/With/SceneFiles", "sceneFile.gltf", function() {
   	// 3d is loaded and scene is ready to be manipulated
   })
   </script>

   "url/To/Directory/With/SceneFiles" can be replaced with url to directory with scene files
   "sceneFile.gltf" can be replaced with scene file name.
   

5. Finally make sure, that your server serves the following mime types:

   dds: image/vnd-ms.dd
   gltf: application/json
   bin: application/octet-stream

1. Load scene
2. Handle mouse events
3. Zoom
4. Highlight by color
5. Highlight by transparency
6. Animate

If you have further questions, feel free to contact us by email.