There are a number of methods you can use to make those JavaScript libraries work with a Twine/TWEE based project, the following are two of them.
1: You can copy the contents of the referenced three.r119.min.js and vanta.fog.min.js files into your project’s Story JavaScript area and then add the following JavaScript code to the same area, making sure to change the "#your-element-selector" element reference to be one of the identifier of one of the HTML elements that make up the SugarCube User Interface.
VANTA.FOG({
el: "#story",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
highlightColor: 0x2fff,
midtoneColor: 0xa4ff,
lowlightColor: 0x3c00ff,
baseColor: 0xebf9ff,
blurFactor: 0.52,
speed: 3.00,
zoom: 0.10
})
2: You could download a copy of the referenced three.r119.min.js and vanta.fog.min.js files to the same folder that you are saving your generated Story HTML file in, the HTML file you are using the Twine 2.x application’s Publish to File option to generate.
And then add the following to your project’s Story JavaScript area, which uses the importScript() function to load and use the contents of those two JavaScript files.
/* Import all scripts sequentially, while saving the returned Promise so it may be used later. */
var scripts = importScripts([
"three.r119.min.js",
"vanta.fog.min.js"
]);
/* Use the returned Promise to ensure that the scripts have been fully loaded before executing dependent code to initiate the required effect. */
scripts
.then(function () {
VANTA.FOG({
el: "#story",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
highlightColor: 0x2fff,
midtoneColor: 0xa4ff,
lowlightColor: 0x3c00ff,
baseColor: 0xebf9ff,
blurFactor: 0.52,
speed: 3.00,
zoom: 0.10
})
})
.catch(function (err) {
// There was an error loading the script, log it to the console.
console.log(err);
});
I didn’t see a link to the Vanta.js library’s documentation, so I’m unsure how you would dynamically change the effect based on which Passage is being shown.
