Problem with TRUNK on Vue.JS

[ga-devfront]

Hello, I allow myself to open a ticket because I cannot get the TRUNK effect to work under Vue.JS. Here is the code I am currently using.

<template>
   <div id="background"></div>
</template>

<script>
import TRUNK from 'vanta/dist/vanta.trunk.min';
import * as THREE from 'three';
import Header from './components/Header.vue';

export default {
  name: 'App',

  mounted() {
    this.vantaEffect = TRUNK({
      el: '#background',
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.00,
      minWidth: 200.00,
      scale: 1.00,
      scaleMobile: 1.00,
      color: 0xff0000,
      backgroundColor: 0x181818,
      spacing: 10.00,
      chaos: 10.00,
      THREE,
    });
  },
};
</script>

I installed the NPM packages: vanta and three; For effects like bird or waves I have no problem everything works perfectly.

However when I try to use the TRUNK animation. I end up with these two error messages in the console. vanta.trunk.min.js?0308:1 [VANTA] Init error TypeError: n is not a constructor and [VANTA] Falling back to backgroundColor

Does anyone have the solution to fix this problem?

[MaSchVam]

Hi @ga-devfront, comparing your initialization to mine, there are a couple of differences. I am not so familiar with Vue, but here is how I it works in React, at least.

this.vantaEffect = TRUNK({
      el: this.vantaRef.current,   //This is different
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.00,
      minWidth: 200.00,
      scale: 1.00,
      scaleMobile: 1.00,
      color: 0xff0000,
      backgroundColor: 0x181818,
      spacing: 10.00,
      chaos: 10.00,
      THREE: THREE,      //This is different
    });

And then,

ref={this.vantaRef}as an attribute on the element, in the the render method of your class.

Also, remember to remove it again when your component unmounts: if (this.vantaEffect) this.vantaEffect.destroy();

So a (React) example for your case, would look like this:

import React from "react";
import * as THREE from "three";
import TRUNK from 'vanta/dist/vanta.trunk.min';

class Banner extends React.Component {
  constructor() {
    super();
    this.vantaRef = React.createRef();
  }
  componentDidMount(){
    this.vantaEffect = TRUNK({
      el: this.vantaRef.current,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.00,
      minWidth: 200.00,
      scale: 1.00,
      scaleMobile: 1.00,
      color: 0xff0000,
      backgroundColor: 0x181818,
      spacing: 10.00,
      chaos: 10.00,
      THREE: THREE,
    });
  }
  componentWillUnmount() {
    if (this.vantaEffect) this.vantaEffect.destroy();
  }
  render() {
    return (
      <section id="banner" ref={this.vantaRef}>
      </section>
    );
  }
}
export default Banner;

[ga-devfront]

Hi @MaSchVam, thanks for taking time to respond to me. However this answer does not answer my problem. Indeed it is not the way in which I define Vantas and these options that breaks the problem but the TRUNKS file (as the others say works perfectly).

this.vantaEffect = TRUNK({
      el: this.vantaRef.current,   //This is different
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.00,
      minWidth: 200.00,
      scale: 1.00,
      scaleMobile: 1.00,
      color: 0xff0000,
      backgroundColor: 0x181818,
      spacing: 10.00,
      chaos: 10.00,
      THREE: THREE,      //This is different
    });

For the first part.

  `el: this.vantaRef.current,   //This is different`

React and Vue.js do not have the same way of defining things, it's normal that your declaration does not match mine.

For the second part.

 ` THREE: THREE,      //This is different`

in javascript it is possible to define the name of a variable by its value in an object. THREE:THREE === THREE

Anyone else have an idea?

[tengbao]

@ga-devfront Could you add a jsfiddle that shows it breaking?

[ga-devfront]

I can even provide better, here is my current repo or the TRUNK element does not want to pass (be careful currently it uses net). https://github.com/ga-devfront/lezoo-front-v2

[tengbao]

@ga-devfront Ah, trunk uses p5 instead of three. Try loading p5 from npm, and replacing THREE: THREE with p5: p5 in the initialization.

[Dubeayi]

YES, the above fixed my problem as well. Was getting the same issue using React.

[leleccccc]

@ga-devfront Ah, trunk uses p5 instead of three. Try loading p5 from npm, and replacing THREE: THREE with p5: p5 in the initialization.

I also encountered this problem in Vue. Can you provide the Github address for p5

[arthur-ruxton]

you could try grabbing the p5 script tag (min version) here: https://cdnjs.com/libraries/p5.js <-- add the script tag above title in your index.html file