Hello,

I have general issue with my lack of understanding of including multiple, mutually dependent javascripts into a plugin. So some help, examples or tutorial about that would be great to have and learn. 

As I am not sure whom to address this question I also announced it in Beginning development group.

At the moment I try to include three.js into my plugin and I succeeded.

But when I try to include another javascript from the same bundle which are related through GLOBAL object "THREE" I receive error message in the web browser (undefined object "THREE").

Here is my code in short:

start.php

...

init(){

...

elgg_define_js('three', [

'src' => elgg_get_simplecache_url('three.js'),

'exports' => 'THREE',

]); 

elgg_define_js('OrbitControls', [

'src' => elgg_get_simplecache_url('OrbitControls.js'),

// 'deps' => ['THREE'],

// 'exports' => 'THREE.OrbitControls',

]); 

elgg_define_js('OBJLoader', [

'src' => elgg_get_simplecache_url('OBJLoader.js'),

// 'deps' => ['THREE'],

]); 

...

}

...

my_plugin/view.php

...

elgg_require_js("my_plugin/three_my_app");

...

my_plugin/views/default/js/my_plugin/three_my_app.js

define(function(require) {

    var elgg = require("elgg");

    var $ = require("jquery");

    var THREE = require("three");

window.THREE = THREE; 

require('OBJLoader');

require('OrbitControls'); 



// these need to be accessed inside more than one function so we'll declare them first

let container;

let camera;

let controls;

let renderer;

let scene;



const mixers = [];

const clock = new THREE.Clock();



function init() {



  container = document.querySelector( '#container' );



  scene = new THREE.Scene();

  scene.background = new THREE.Color( 0x8FBCD4 );



  initCamera();

  initControls();

  initLights();

  loadModels();

  initRenderer();



  renderer.setAnimationLoop( () => {



    update();

    render();



  } );



}



function initCamera() {

  camera = new THREE.PerspectiveCamera( 35, container.clientWidth / container.clientHeight, 1, 1000 );

  camera.position.set( -50, 50, 150 );

}



function initControls() {

  controls = new THREE.OrbitControls( camera, container );



}

....

....

});

<?php


return [

    'default' => [

'/' => [

__DIR__ . '/vendors/three-js/build/',

__DIR__ . '/vendors/three-js/loaders/',

__DIR__ . '/vendors/three-js/libs/',

__DIR__ . '/vendors/three-js/controls/',

],

    ],

];

I found on the internet the solution for regular web developers but I don't know how to include that into elgg.

2. And Maybe someone can explain where and how to properly include the following code: 

define('three', ['three.js'], function ( THREE ) {

window.THREE = THREE;

return THREE;

});