Use web viewer in FileMaker to show 3D models

Recently a client asked how to show 3D models in FileMaker on Windows. We looked for various solutions and on the end came to using JavaScript viewer for 3D objects: js-3d-model-viewer.

To show a file, you would export it to a temporary folder with FileMaker. You put the JavaScript file into the same folder and have your script export also the html file there. The HTML file needs to reference the model file by name. Although you could just name the model file the same each time and just use the same html.

To access local files in the same folder, you need to overcome Cross-origin resource sharing (CORS) rules. Basically all files must be hosted on the same domain. So let's make the folder to a local domain. For the browser, our plugin can pretend to load something from a server, but actually load the files from disk.

We got two new functions to create virtual hosts and redirect http/https traffic to a local folder:

MBS( "WebView.SetVirtualHostNameToFolderMapping"; WebViewerRef; hostName; folderPath; accessKind )
MBS( "WebView.ClearVirtualHostNameToFolderMapping"; WebViewerRef; hostName )

There you pass the domain name e.g. "MyFiles" and the folder path e.g. "C:\Test" and whether to allow or deny. Here is a sample script to create the virtual host for the folder where the database resides and then loads the html file:

# we link folder to virtual domain, so we can load object file
Set Variable [ $path ; Value: Get(FilePath) ]
Set Variable [ $path ; Value: MBS( "Path.FileMakerPathToNativePath"; $path) ]
Set Variable [ $path ; Value: MBS( "Path.RemoveLastPathComponent"; $Path ) ]
# 
Set Variable [ $r ; Value: MBS( "WebView.SetVirtualHostNameToFolderMapping"; "web"; "MyFiles"; $path; "allow") ]
#
# now load HTML
Set Variable [ $url ; Value: "https://MyFiles/js-3d-model-viewer.html" ]
Set Web Viewer [ Object Name: "web" ; URL: $url ]

Please try the new plugin (Download builds here) and the example files and let us know. Loading local files may be useful for many other use cases.

Download example files: WebView3D.zip

2 Likes