Using three.js in Grafana plugin

Grafana Plugin Development
1

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!

2

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

1 Like
3

Hi sir, sorry for dig so back in time.
Can you upload somewhere the two file that you have used?

The ā€œmodule.jsā€ what file is it?

4

@Yusseiin is the main plugin entry file. Nowadays since plugins are developed with typescript you will find it as ā€œmodule.tsā€ and ā€œmodule.jsā€ is generated as a built file by webpack which you should not manually modify.

5

@academo Thanks, i am trying to making three.js working with grafana but it still not working :frowning:

6

What do you want to visual using three js

7

@yosiasz any 3d model. STL, STEP, gltf etc.

8

Can you provide one simple sample we might be able to use dynamic text plugin for this

9

@yosiasz yes, you can take any element from the three.js github page like:

I want to be able to zoom in, zoom out and rotate the model. i do not need any background or similar. Just the model.

here the example:
https://threejs.org/examples/#webgl_loader_gltf

1 Like