I created a three.js background with Vanta.js
If you use it as intended by the website, you only get minified scripts, which make it hard to implement post processing like DoF and such.
Therefore I want to host the non minified files from Github.
I got _base.js, helpers.js, three.module.js and vanta.net.js, changed the import paths and implemented it into a blank html. The tutorials I found only cover the basic implementation, none that describes how to host the original source files. I hacked something together which does not spit out error codes, but does not show the Vanta effect either...
<!DOCTYPE html>
<html>
<head>
<style> body {overflow: hidden; margin: 0px; } </style>
<script type="module" src="./js/three/three.module.js"></script>
<script type="module" src="./js/vanta.net.js"></script>
</head>
<body style="width:100%; height: 100%;">
<div id="vanta-bg"></div>
<script type="text/javascript">
VANTA.NET({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0xff8900,
backgroundColor: 0x001b140b,
points: 8.00,
maxDistance: 27.00,
spacing: 20.00
})
</script>
</body>
</html>
EDIT
As stated below, my importing was off. ES6 changes a lot of stuff, so I wasnt properly implementing the examples I found. This is the correct body part:
<body style="overflow: hidden; margin: 0px;">
<div id="vanta-bg" style="height:100vh"></div>
<script type="module">
import VANTA from './jsm/vanta.net.js';
VANTA({
//the options are the same
})
</script>
</body>
Note that I now import Vanta inside of the script tags, in a Javascript way.
Also, due to modularization, I do not need to import the three.module.js in the index.html, but rather inside (every) module that gets imported separately.
question from:
https://stackoverflow.com/questions/65854649/implement-vanta-js-module-into-index-html 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
