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 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:
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;
});
info@elgg.org
Security issues should be reported to security@elgg.org!
©2014 the Elgg Foundation
Elgg is a registered trademark of Thematic Networks.
Cover image by RaĆ¼l Utrera is used under Creative Commons license.
Icons by Flaticon and FontAwesome.