require.js and three.js: Uncaught ReferenceError: THREE is not defined - three.js

Question

I'm trying to include a threejs visual in a documentation page generated via Julia's Documenter.jl package. Unfortunately, the way Documenter currently handles javascript components is via require.js and it appears to break three.js (or its modules) with the error
Uncaught ReferenceError: THREE is not defined
My self-contained example is like this
var container = document.getElementById("three_container");
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xeeeeee );
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 200;
camera.lookAt(scene.position);
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
const frontSpot = new THREE.SpotLight(0xeeeece);
frontSpot.position.set(1000, 1000, 1000);
scene.add(frontSpot);
const frontSpot2 = new THREE.SpotLight(0xddddce);
frontSpot2.position.set(-500, -500, -500);
scene.add(frontSpot2);
scene.add(new THREE.AmbientLight(0xffffff, 1));
function createSphere(radius, segments) {
const material = new THREE.MeshStandardMaterial({
color: 0xfcc742,
emissive: 0x111111,
specular: 0xffffff,
metalness: 0.8,
roughness: 0.6,
});
return new THREE.Mesh(
new THREE.SphereGeometry(radius, segments, segments),
material
);
}
// sphere params
var radius = 1,
segments = 36,
rotation = 6;
// spheres
var sphere1 = createSphere(radius, segments);
sphere1.position.x = 35.35533905932738;
sphere1.position.y = 35.35533905932737;
sphere1.position.z = 99.99999999999999;
sphere1.scale.set(10,10,20);
sphere1.rotation.z = 3.9269908169872414;
sphere1.rotation.x = 2.137707831735906;
sphere1.rotation.y = 0.0;
sphere1.rotation.order = 'ZXY';
scene.add(sphere1);
var sphere2 = createSphere(radius, segments);
sphere2.position.x = 3.061616997868383e-15;
sphere2.position.y = 50.0;
sphere2.position.z = 74.99999999999999;
sphere2.scale.set(10,10,20);
sphere2.rotation.z = 4.71238898038469;
sphere2.rotation.x = 2.137707831735906;
sphere2.rotation.y = 0.0;
sphere2.rotation.order = 'ZXY';
scene.add(sphere2);
var sphere3 = createSphere(radius, segments);
sphere3.position.x = -35.35533905932737;
sphere3.position.y = 35.35533905932738;
sphere3.position.z = 49.999999999999986;
sphere3.scale.set(10,10,20);
sphere3.rotation.z = -0.7853981633974483;
sphere3.rotation.x = 2.137707831735906;
sphere3.rotation.y = 0.0;
sphere3.rotation.order = 'ZXY';
scene.add(sphere3);
var sphere4 = createSphere(radius, segments);
sphere4.position.x = -50.0;
sphere4.position.y = 6.123233995736766e-15;
sphere4.position.z = 24.999999999999986;
sphere4.scale.set(10,10,20);
sphere4.rotation.z = -2.220446049250313e-16;
sphere4.rotation.x = 2.137707831735906;
sphere4.rotation.y = 0.0;
sphere4.rotation.order = 'ZXY';
scene.add(sphere4);
var sphere5 = createSphere(radius, segments);
sphere5.position.x = -35.355339059327385;
sphere5.position.y = -35.35533905932737;
sphere5.position.z = 0.0;
sphere5.scale.set(10,10,20);
sphere5.rotation.z = 0.7853981633974481;
sphere5.rotation.x = 2.137707831735906;
sphere5.rotation.y = 0.0;
sphere5.rotation.order = 'ZXY';
scene.add(sphere5);
var sphere6 = createSphere(radius, segments);
sphere6.position.x = -9.184850993605149e-15;
sphere6.position.y = -50.0;
sphere6.position.z = -25.000000000000014;
sphere6.scale.set(10,10,20);
sphere6.rotation.z = 1.5707963267948963;
sphere6.rotation.x = 2.137707831735906;
sphere6.rotation.y = 0.0;
sphere6.rotation.order = 'ZXY';
scene.add(sphere6);
var sphere7 = createSphere(radius, segments);
sphere7.position.x = 35.35533905932737;
sphere7.position.y = -35.355339059327385;
sphere7.position.z = -49.999999999999986;
sphere7.scale.set(10,10,20);
sphere7.rotation.z = 2.356194490192345;
sphere7.rotation.x = 2.137707831735906;
sphere7.rotation.y = 0.0;
sphere7.rotation.order = 'ZXY';
scene.add(sphere7);
var sphere8 = createSphere(radius, segments);
sphere8.position.x = 50.0;
sphere8.position.y = -1.2246467991473532e-14;
sphere8.position.z = -75.00000000000001;
sphere8.scale.set(10,10,20);
sphere8.rotation.z = 3.141592653589793;
sphere8.rotation.x = 2.137707831735906;
sphere8.rotation.y = 0.0;
sphere8.rotation.order = 'ZXY';
scene.add(sphere8);
var sphere9 = createSphere(radius, segments);
sphere9.position.x = 35.355339059327385;
sphere9.position.y = 35.35533905932737;
sphere9.position.z = -100.00000000000001;
sphere9.scale.set(10,10,20);
sphere9.rotation.z = 3.9269908169872414;
sphere9.rotation.x = 2.137707831735906;
sphere9.rotation.y = 0.0;
sphere9.rotation.order = 'ZXY';
scene.add(sphere9);
var sphere10 = createSphere(radius, segments);
sphere10.position.x = 1.5308084989341916e-14;
sphere10.position.y = 50.0;
sphere10.position.z = -124.99999999999999;
sphere10.scale.set(10,10,20);
sphere10.rotation.z = 4.71238898038469;
sphere10.rotation.x = 2.137707831735906;
sphere10.rotation.y = 0.0;
sphere10.rotation.order = 'ZXY';
scene.add(sphere10);
// end spheres
document.body.appendChild(renderer.domElement);
//renderer.render(scene, camera);
var controls = new THREE.TrackballControls(camera);
function render() {
controls.update();
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
I've read and tried various suggestions to make the THREE namespace available or something, but haven't had any luck. If I manually insert
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://unpkg.com/three#0.85.0/examples/js/controls/TrackballControls.js"></script>
<script src="https://unpkg.com/three#0.85.0/examples/js/Detector.js"></script>
at the top of the page <head>, everything works fine, but I cannot change the order when it's generated by Documenter. Any thoughts on how to work around this?
Edit: The requirejs configuration generated by Documenter looks like this:
// Generated by Documenter.jl
requirejs.config({
paths: {
'highlight-julia': 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/languages/julia.min',
'headroom': 'https://cdnjs.cloudflare.com/ajax/libs/headroom/0.10.3/headroom.min',
'jqueryui': 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min',
'katex-auto-render': 'https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.11.1/contrib/auto-render.min',
'jquery': 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min',
'headroom-jquery': 'https://cdnjs.cloudflare.com/ajax/libs/headroom/0.10.3/jQuery.headroom.min',
'katex': 'https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.11.1/katex.min',
'highlight': 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min',
'highlight-julia-repl': 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/languages/julia-repl.min',
},
shim: {
"highlight-julia": {
"deps": [
"highlight"
]
},
"katex-auto-render": {
"deps": [
"katex"
]
},
"headroom-jquery": {
"deps": [
"jquery",
"headroom"
]
},
"highlight-julia-repl": {
"deps": [
"highlight"
]
}
}
});
////////////////////////////////////////////////////////////////////////////////
require(['jquery', 'katex', 'katex-auto-render'], function($, katex, renderMathInElement) {
$(document).ready(function() {
renderMathInElement(
document.body,
{
"delimiters": [
{
"left": "$",
"right": "$",
"display": false
},
{
"left": "$$",
"right": "$$",
"display": true
},
{
"left": "\\[",
"right": "\\]",
"display": true
}
]
}
);
})
})
////////////////////////////////////////////////////////////////////////////////
require(['jquery', 'highlight', 'highlight-julia', 'highlight-julia-repl'], function($, hljs) {
$(document).ready(function() {
hljs.initHighlighting();
})
})
////////////////////////////////////////////////////////////////////////////////
require(['jquery', 'headroom', 'headroom-jquery'], function($, Headroom) {
// Manages the top navigation bar (hides it when the user starts scrolling down on the
// mobile).
window.Headroom = Headroom; // work around buggy module loading?
$(document).ready(function() {
$('#documenter .docs-navbar').headroom({
"tolerance": {"up": 10, "down": 10},
});
})
})
////////////////////////////////////////////////////////////////////////////////
require(['jquery'], function($) {
// Modal settings dialog
$(document).ready(function() {
var settings = $('#documenter-settings');
$('#documenter-settings-button').click(function(){
settings.toggleClass('is-active');
});
// Close the dialog if X is clicked
$('#documenter-settings button.delete').click(function(){
settings.removeClass('is-active');
});
// Close dialog if ESC is pressed
$(document).keyup(function(e) {
if (e.keyCode == 27) settings.removeClass('is-active');
});
});
})
////////////////////////////////////////////////////////////////////////////////
require(['jquery'], function($) {
// Manages the showing and hiding of the sidebar.
$(document).ready(function() {
var sidebar = $("#documenter > .docs-sidebar");
var sidebar_button = $("#documenter-sidebar-button")
sidebar_button.click(function(ev) {
ev.preventDefault();
sidebar.toggleClass('visible');
if (sidebar.hasClass('visible')) {
// Makes sure that the current menu item is visible in the sidebar.
$("#documenter .docs-menu a.is-active").focus();
}
});
$("#documenter > .docs-main").bind('click', function(ev) {
if ($(ev.target).is(sidebar_button)) {
return;
}
if (sidebar.hasClass('visible')) {
sidebar.removeClass('visible');
}
});
})
// Resizes the package name / sitename in the sidebar if it is too wide.
// Inspired by: https://github.com/davatron5000/FitText.js
$(document).ready(function() {
e = $("#documenter .docs-autofit");
function resize() {
var L = parseInt(e.css('max-width'), 10);
var L0 = e.width();
if(L0 > L) {
var h0 = parseInt(e.css('font-size'), 10);
e.css('font-size', L * h0 / L0);
// TODO: make sure it survives resizes?
}
}
// call once and then register events
resize();
$(window).resize(resize);
$(window).on('orientationchange', resize);
});
// Scroll the navigation bar to the currently selected menu item
$(document).ready(function() {
var sidebar = $("#documenter .docs-menu").get(0);
var active = $("#documenter .docs-menu .is-active").get(0);
if(typeof active !== 'undefined') {
sidebar.scrollTop = active.offsetTop - sidebar.offsetTop - 15;
}
})
})
////////////////////////////////////////////////////////////////////////////////
require(['jquery'], function($) {
function set_theme(theme) {
var active = null;
var disabled = [];
for (var i = 0; i < document.styleSheets.length; i++) {
var ss = document.styleSheets[i];
var themename = ss.ownerNode.getAttribute("data-theme-name");
if(themename === null) continue; // ignore non-theme stylesheets
// Find the active theme
if(themename === theme) active = ss;
else disabled.push(ss);
}
if(active !== null) {
active.disabled = false;
if(active.ownerNode.getAttribute("data-theme-primary") === null) {
document.getElementsByTagName('html')[0].className = "theme--" + theme;
} else {
document.getElementsByTagName('html')[0].className = "";
}
disabled.forEach(function(ss){
ss.disabled = true;
});
}
// Store the theme in localStorage
if(typeof(window.localStorage) !== "undefined") {
window.localStorage.setItem("documenter-theme", theme);
} else {
console.error("Browser does not support window.localStorage");
}
}
// Theme picker setup
$(document).ready(function() {
// onchange callback
$('#documenter-themepicker').change(function themepick_callback(ev){
var themename = $('#documenter-themepicker option:selected').attr('value');
set_theme(themename);
});
// Make sure that the themepicker displays the correct theme when the theme is retrieved
// from localStorage
if(typeof(window.localStorage) !== "undefined") {
var theme = window.localStorage.getItem("documenter-theme");
if(theme !== null) {
$('#documenter-themepicker option').each(function(i,e) {
e.selected = (e.value === theme);
})
} else {
$('#documenter-themepicker option').each(function(i,e) {
e.selected = $("html").hasClass(`theme--${e.value}`);
})
}
}
})
})
////////////////////////////////////////////////////////////////////////////////
require(['jquery'], function($) {
// update the version selector with info from the siteinfo.js and ../versions.js files
$(document).ready(function() {
var version_selector = $("#documenter .docs-version-selector");
var version_selector_select = $("#documenter .docs-version-selector select");
version_selector_select.change(function(x) {
target_href = version_selector_select.children("option:selected").get(0).value;
window.location.href = target_href;
});
// add the current version to the selector based on siteinfo.js, but only if the selector is empty
if (typeof DOCUMENTER_CURRENT_VERSION !== 'undefined' && $('#version-selector > option').length == 0) {
var option = $("<option value='#' selected='selected'>" + DOCUMENTER_CURRENT_VERSION + "</option>");
version_selector_select.append(option);
}
if (typeof DOC_VERSIONS !== 'undefined') {
var existing_versions = version_selector_select.children("option");
var existing_versions_texts = existing_versions.map(function(i,x){return x.text});
DOC_VERSIONS.forEach(function(each) {
var version_url = documenterBaseURL + "/../" + each;
var existing_id = $.inArray(each, existing_versions_texts);
// if not already in the version selector, add it as a new option,
// otherwise update the old option with the URL and enable it
if (existing_id == -1) {
var option = $("<option value='" + version_url + "'>" + each + "</option>");
version_selector_select.append(option);
} else {
var option = existing_versions[existing_id];
option.value = version_url;
option.disabled = false;
}
});
}
// only show the version selector if the selector has been populated
if (version_selector_select.children("option").length > 0) {
version_selector.toggleClass("visible");
}
})
})