Require.js not loading Three.js

Question

So I have some generated JavaScript (from TypeScript):

define([\"require\", \"exports\", \"three\", \"jquery\", \"./test\"], function (require, exports, THRE         


        

Answer 1

From r72 onwards

From r72 onwards, three does call define. So you should not set a shim. If you do not have code that relies on THREE being available in the global space, you're done.

However, if there is code that relies on THREE being available in the global space, that's a problem because, as a well-behaved AMD module, THREE no longer just leaks to the global space. For code that needs THREE in the global space, you can just create a module like this which you can put just before your call to requirejs.config:

define("three-glue", ["three"], function (three) {
    window.THREE = three;
    return three;
});

Your RequireJS configuration should contain this map:

map: {
  '*': {
    three: 'three-glue'
  },
  'three-glue': {
    three: 'three'
  }
}

This tells RequireJS "wherever three is required, load three-glue instead, but when three is required in three-glue load three."

All together:

define("three-glue", ["three"], function (three) {
    window.THREE = three;
    return three;
});

requirejs.config({
    baseUrl: "src",
    paths: {
        "main": "../main",
        "test": "../test",
        "three": "../three/three",
        "sizzle": "/src/sizzle/dist/sizzle"
    },
    map: {
        '*': {
            three: 'three-glue'
        },
        'three-glue': {
            three: 'three'
        }
    }
});

(Technical note: r72 actually still performed the leak to the global space, and some versions after it do. The latest released version at the time of editing this answer (r83) does not leak to the global space by itself. I've not examined every version between r72 and r83 to check when the change was made. Using the code above with an old AMD-compliant version that does the leak is safe. It just results in unnecessary code.)

For r71 and earlier

If this file is any guide, three does not call define. So you need a shim for it if you want it to have a value when you require it as a module. Something like this:

shim: {
    three: {
        exports: 'THREE'
    }
}

Based on the config you have in your question:

requirejs.config({
    baseUrl: "src",
    paths: {
        "main": "../main",
        "test": "../test",
        "three": "../three/three",
        "sizzle": "/src/sizzle/dist/sizzle"
    },
    shim: {
        three: {
            exports: 'THREE'
        }
    }
});