How to include THREE.JS with OrbitControls.js and OBJLoader.js into elgg ?


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 don't know whom to address this issue I also announce this post in Plugin 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:





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'],










define(function(require) {

    var elgg = require("elgg");

    var $ = require("jquery");

    var THREE = require("three");

window.THREE = THREE; 



// 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 );






  renderer.setAnimationLoop( () => {



  } );


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 );




I copied three javascript files I need into my plugin vendors folder and gave them reference through views.php :

return [

    'default' => [

'/' => [

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

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

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

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



The Three files I use are on following links:
The issue is that in any of dependent js files there is definition of object based on global THREE object (for example line 27 in OrbitControls.js : THREE.OrbitControls = function ( objectdomElementlocalElement ) {
) which is not visible in dependent javascript file and the web browser raise error message THREE in not defined . 
I have two questions.
1. Can someone explain how to include multiply dependent javascript files in own plugin based on this case ?

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;

Beginning Developers

Beginning Developers

This space is for newcomers, who wish to build a new plugin or to customize an existing one to their liking