Can someone guide me on incorporating Vanta JS from a SvelteKit project?
I've attempted to add it in +page.svelte,
<script lang="ts">
import VANTA from "vanta";
import * as THREE from 'three';
VANTA.NET({
el: "#home-page",
mouseControls: true,
...
})
</script>
<div id="home-page">
...
</div>
However, I encountered issues while trying to import VANTA that way.
I also experimented with using CDN from app.html without success.
Updated
Thanks to the response from H.B., I managed to apply the Vanta JS background to my SvelteKit page.
Although, the visual output differed from the one on CodePen.
<script>
import * as THREE from 'three';
import NET from 'vanta/dist/vanta.net.min';
function vanta(node) {
NET({
el: node,
THREE: THREE,
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x7accfe,
backgroundColor: 0x010f18
})
}
</script>
<div use:vanta/>
On the SvelteKit web app, https://i.sstatic.net/gvdf1.png
On CodePen, https://i.sstatic.net/DxjBR.png
Upon checking the browser console, I came across this message:
THREE.Material: 'vertexColors' parameter is undefined.I installed Vanta JS and Three.js by running the following commands,
npm install -D vanta
npm install -D three