import GLTFLoader

[RobotART_Walter]

<Hello
<I want to use the threeJS library with the GLTF loader function. Normally you need to import this seperatel. How do we do this from the web-Q enviroment? I have already imported the ThreeJS library and and the GLTF loader. I can import OBJ files without any problems. But I am not able to load a GLTF file, because the constructor is not recognized.

Thank you!

[HmiGuide]

Do you know the How To: Store-and-How-to/WebIQ-Render-a-3D-model maybe you find some helpful information there

[RobotART_Walter]

Thanks. 
I have already read that how-to. I already succesfully loaded my model in .obj format. You can use the OBJloader without importing anyhing else but ThreeJS. 
But I want to display a model with texture and for this a gltf file is easier. Therefor I have imported the ThreeJS GLTF loader. But I am not able to call/use this package. Normally you would need to import this in your script in order to use it. But If I try to do that I receive the following message: 

Am I doing something wrong here? 

Thanks!

[webiq-sk]

This is a normal JavaScript error:
https://www.google.com/search?q=%22cannot+use+import+statement+outside+of+module%22

The message is fully correct, you'd have to include your script like this:

<script type="module" src="....">

However, you cannot specify this currently in WebIQ. The workaround would be to modify the index.html file of the HMI manually, however please note that this will be updated (read: overwritten) on each publish automatically.

[PlcCoder · Accepted solution]

Instead of the manual entry in the index.html this can also be done by a "Local script" in WebIQ. This has the advantage that it does not have to be inserted manually again and again. 

The attached example shows a module that exports 2 functions:

• which are imported into WebIQ and
• called via buttons

HINTS:

• The module myModule.js is manualy copied into workspace/js/custom-libs/modules
• The module functions can be used, but when saving any script in WebIQ an error is always displayed, because even WebIQ script check seems not to support the module syntax. This happens in both cases, code added manually or be local script.
  Uncaught SyntaxError: Unexpected token 'export' - source: js/custom-libs/modules/myModule.js, line: 12 column: 1
• Keep in mind that modules are only supported via http and https protocol. This means they are NOT working within WebIQ standard preview. But they are working within the browser preview of WebIQ.

Example module

const iTest = 10

function myLog1(sInfo) {
let dt = new Date()
shmi.notify(`myLog1:${sInfo} ${("" + dt.getSeconds()).padStart(2, "0")}`)
}

function myLog2(sInfo) {
let dt = new Date()
shmi.notify(`myLog2:${sInfo} ${("" + dt.getSeconds()).padStart(3, "0")}`)
}
export {iTest, myLog1, myLog2}

Local script which adds the modul to WebIQ

(function () {
  var MODULE_NAME = "initModul",
  ENABLE_LOGGING = false,
  RECORD_LOG = false,
  logger = shmi.requires("visuals.tools.logging").createLogger(MODULE_NAME, 
  ENABLE_LOGGING, RECORD_LOG),
  fLog = logger.fLog,
  log = logger.log,
  module = shmi.pkg(MODULE_NAME);
/**
* loads a module into WebIQ...
*/
module.run = function (self) {
  // create script and add it to section head of HTML document
  let myScript = document.createElement("script")
  myScript.type = "module"
  myScript.text = `
  import * as myModule from "./js/custom-libs/modules/myModule.js"
  window.myModule = myModule`
  document.getElementsByTagName("head")[0].appendChild(myScript)

  /* called when this local-script is disabled */
  self.onDisable = function () {
  self.run = false; /* from original .onDisable function of LocalScript control */
  };
};
// MODULE CODE - END
fLog("module loaded");
})();