How to use VantaJS in SvelteKit-CodePudding

How to use

On CodePen,

In the browser console, I got this message:
THREE.Material: 'vertexColors' parameter is undefined.

I installed Vanta JS and Three.js like this,

npm install -D vanta
npm install -D three

CodePudding user response：

In SvelteKit you need to make sure the code only runs on the client. Either use onMount or better yet, an action which gives you the node.

You also have to supply the Three.js module to Vanta as a property and should import the desired effect directly from vanta/dist:

<script>
    import * as THREE from 'three';
    import NET from 'vanta/dist/vanta.net.min';

    function vanta(node) {
        NET({
            el: node,
            THREE: THREE,
            color: 0x000000,
        })
    }
</script>

<div use:vanta/>

CodePudding user response：

The rendering issue was caused by version mis-matching between Vanta JS and Three.js.

THREE.Material: 'vertexColors' parameter is undefined.

At this moment of writing,

the Vanta JS version is 0.5.24
This error is coming from Three.js version greater than 0.140.2 (read this thread).

Thus I had to hard-point the Three.js version like this.

npm install -D [email protected]

As the result, rendering on SvelteKit webapp became exactly same as CodePen examples.