"Importing External JavaScript": Chapbook (v1.0.0)#
Information
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.
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]