THREE is not defined in .js file

Questions
1

Hi, I’ve made a few threejs prototypes before. But currently I’m handling my code in an .js file instead of straight into my html.

I included threejs in my code. But for some reason it still won’t let me use it’s functions.
What am I doing wrong?

//Make div for canvas
function AdDiv(divname)
{
    //make a div that will be used for the canvas
    var iDiv = document.createElement('div');
    iDiv.id = 'placedCanvas';
    iDiv.className = 'placedCanvas';

    //document.getElementsByTagName('body')[0].appendChild(iDiv);
    document.getElementById(divname).appendChild(iDiv);
    console.log("canvas created");
}

//Include js files  
function include(file)
{
  var script  = document.createElement('script');
  script.src  = file;
  script.type = 'text/javascript';
  script.defer = true;

  document.getElementsByTagName('head').item(0).appendChild(script);
}

/* include any js files here */
include('https://pixelvaria.com/wp-content/themes/pixelvaria/js/three.js');
include('https://pixelvaria.com/wp-content/themes/pixelvaria/js/three.min.js');
include('https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js');

var scene = new THREE.Scene();
2

You have to wait until the script is actually loaded. You can use the onload event of the script tag for this:

https://jsfiddle.net/f2Lommf5/12306/

The solution is based on the following thread:

3

I fixed it like this

//Make div for canvas
function AdDiv(divname)
{
    //make a div that will be used for the canvas
    var iDiv = document.createElement('div');
    iDiv.id = 'placedCanvas';
    iDiv.className = 'placedCanvas';
    document.getElementById(divname).appendChild(iDiv);
    console.log("canvas created");
}


function loadScript(url, callback)
{
    // Adding the script tag to the head as suggested before
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = callback;
    script.onload = callback;

    // Fire the loading
    head.appendChild(script);
}

var myPrettyCode = function()
{
    var scene = new THREE.Scene();
};

loadScript("https://pixelvaria.com/wp-content/themes/pixelvaria/js/three.js",myPrettyCode);