Magento2 : third party js file including issue

Question

I am using three.js (source code) in a module page:

requirejs-config.js

var config = {
    map: {
        "*": {
            three: "Vendor_Module/js/three/build/three",

and in the phtml file :

require([ 'jquery', 'three', 'jquery/ui'],function($, THREE) {

It works.

I would like now to add one of the three.js tools called OrbitControl (source code). I did the same principle, ie :

requirejs-config.js

var config = {
    map: {
        "*": {
            three: "Vendor_Module/js/three/build/three",
            orbitcontrols : "Vendor_Module/js/three/examples/js/controls/OrbitControls",

phtml file :

require([ 'jquery', 'three', 'orbitcontrols', 'jquery/ui'],function($, THREE) {

but when I call it in my page script :

var controls = new THREE.OrbitControls( camera, renderer.domElement );

I have 2 errors in my browser console :

THREE is not defined in OrbitControls.js

THREE.OrbitControls is not a constructor

What did I miss?

Thank you for your help.

Answer 1

I had same problem and fixed it after seeing this thread: https://github.com/mrdoob/three.js/issues/9602

After defining three.js I shimed it into plugins

define('three', ['Vendor_Module/js/three.min'], function ( THREE ) {
    window.THREE = THREE;
    return THREE;
});

define('datGui', ['Vendor_Module/js/3D/libs/dat.gui.min'], function ( dat ) {
    window.dat = dat;
    return dat;
});

var config = {
    paths: {
        'orbitalControls': 'Vendor_Module/js/3D/controls/OrbitControls',
        'pointerLockControls': 'Vendor_Module/js/3D/controls/PointerLockControls',
        'gltfLoader': 'Vendor_Module/js/3D/loaders/GLTFLoader',
        'detector': 'Vendor_Module/js/3D/Detector',
        'bootstrapBundle': 'Vendor_Module/js/bootstrap.bundle.min'
    },
    shim: {
        'orbitalControls': {
            deps: ['three']
        },
        'pointerLockControls': {
            deps: ['three']
        },
        'gltfLoader': {
            deps: ['three']
        },
        'bootstrapBundle': {
            deps: ['jquery', 'jquery/ui']
        }
    }
};

And How I required them:

require([
    'jquery',
    'three',
    'datGui',
    'detector',
    'gltfLoader',
    'orbitalControls',
    'bootstrapBundle'
], function ($) {});