"Importing External JavaScript": Chapbook (v1.0.0)

Note:This example uses code from Three.js, a library for creating 3D graphics in the browser. It is include only for demonstrational purposes and its own documentation should be consulted to understand its functionality.

Summary

To include external JavaScript, it must first be loaded. This example uses code from the Mozilla Developer Network to dynamically import scripts. The example library loaded is Three.js.

Once loaded, a callback function is used to create a simple Three.js example and, if the browser supports it, shows a rotating 3D cube within the passage.

Live Example

Download: Live Example

Twee Code


:: StoryTitle
Chapbook: Importing External JS

:: UserScript[script]
// The following code is used from MDN for
// dynamically importing scripts
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement#Dynamically_importing_scripts

window.setup = {};

setup.loadError = function(oError) {
  throw new URIError("The script " + oError.target.src + " didn't load correctly.");
};

setup.loadScript = function(url, onloadFunction) {
  var newScript = document.createElement("script");
  newScript.onerror = setup.loadError;
  if (onloadFunction) { newScript.onload = onloadFunction; }
  document.head.appendChild(newScript);
    newScript.async = true;
  newScript.src = url;
};


:: Start
<div id="drawArea"></div>
[JavaScript]
setup.loadScript("https://ajax.googleapis.com/ajax/libs/threejs/r84/three.min.js", function() {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 
        75, 
        1,
        0.1,
        1000 );

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( 250, 250 );
    document.getElementById("drawArea").appendChild( renderer.domElement );

    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    var cube = new THREE.Mesh( geometry, material );
    scene.add( cube );

    camera.position.z = 5;

    var animate = function () {
        requestAnimationFrame( animate );

        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;

        renderer.render( scene, camera );
    };

    animate();

});

[continued]

Download: Twee Code

results matching ""

    No results matching ""