Vanta.js script

Using JavaScript with Hype
1

Very interesting script that I think can be used in conjunction with Hype.

3 Likes
2

Hi

Was wondering how to implement this into a hype file?

Is there a step-by-step guide or an example of how this Vanta.Js can be dropped into a hype doc

cheers

3
  1. Add these two lines to your head html:
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vanta@0.5.21/dist/vanta.waves.min.js"></script>
  2. Create Rectangle element to serve as your background, and remove any styling on it
  3. Give this Rectangle a Unique Element ID in the Identity Inspector; I'm using "my-background" to match vanta's examples
  4. In the Scene Inspector, create an On Scene Load handler to Run JavaScript… with this code:
    VANTA.WAVES({
	el: '#my-background', // element selector string or DOM object reference
	color: 0x000000,
	waveHeight: 20,
	shininess: 50,
	waveSpeed: 1.5,
	zoom: 0.75
})
  5. In the Scene Inspector, create an On Scene Unload handler to Run JavaScript… with this code:
    VANTA.WAVES('#my-background').destroy();

Here's my example project:

Vanta.hype.zip (26.7 KB)

One thing I noticed is that despite destroy() being called on unload and no errors being generated, this still seemed to consume a lot of CPU on the next scene that did not contain the background. I'm not sure why that would be the case if their destroy is working correctly.

4 Likes
4

Hi Jonathan

Many thanks for your response. Cant wait to create my own now!!

1 Like