Using three.js in Grafana plugin

Hi,

I am trying to make a panel in Grafana with a 3D model in it. To make this possible, I want to use threejs and FBXLoader. I made a file called three_with_fbxloader.min.js that contains three.js, FBXLoader.js, zlib.js and OrbitControls.js. I need all these libraries for the 3D model to work. However, when trying to import this file, I get an error. I have tried to import the file like this:
<script type="text/javascript" src="./external/three_with_fbxloader.min.js"> </script>
inside module.html. This results in the error:

GET http://localhost:8080/external/three_with_fbxloader.min.js 404 (Not Found)

I don’t get why the file is not found, because it is present in the ‘external’ folder and also gets copied to the ‘dist’ folder when running grunt. I also tried to import the file like this:
import THREE from './external/three_with_fbxloader.min.js'
or
import './external/three_with_fbxloader.min.js'
inside module.js. These statements both result in the error

Plugin Error
THREE is not defined Instantiating http://localhost:8080/public/plugins/grafana-Model-panel/external/three_with_fbxloader.min.js Loading http://localhost:8080/public/plugins/grafana-Model-panel/module.js Loading plugins/grafana-Model-panel/module

I don’t understand why THREE would not be defined. When I use the same file in my browser it works fine.

Finally, I looked for URLs to put in the src="" attribute inside a script tag, but I cannot find this for all the libraries I am using. Next to that, FBXLoader.js somehow does not work when it is not in the same file as three.js.

Does anyone have experience with using three.js in a plugin, or with importing files like this? I would like to know how you get the import statements to work.

Thanks in advance!

For anyone who is still struggling with this, I have finally found a solution.

In the external folder, two files are needed: three.min.js and another file (I named this file three_with_fbxloader.js) which contains all the other libraries that use threejs that you need. In this other file, start the file with

let THREE = require('./three.min');

After this, paste all the libraries you want to use. Then, at the end of the file, type

module.exports = THREE; 

Then, in your JavaScript file (module.js), start with the following import:

import THREE from './external/three_with_fbxloader.min';

and this should work. I hope that this answer is helpful for anyone having trouble with this!

Kind regards,

Esmee

2 Likes