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:
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'
module.js. These statements both result in the 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!