Colors not working properly

[ptdatta]

Here the dots are colored but the lines are not.
Code :

import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";
import NET from "vanta/src/vanta.net";

function App() {
  useEffect(() => {
    NET({
      el: "#vanta",
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.0,
      minWidth: 200.0,
      scale: 1.0,
      scaleMobile: 1.0,
      backgroundColor: 0x0,
    });
  }, []);

  return <div className="bg" id="vanta"></div>;
}

export default App;

Did I miss something???

[yagiziskirik]

I have the same issue, as far as I can see, widths of the lines are not working as intended as well. This is how it should be working (plain HTML/CSS/JS):

But this is the Next.js (React) version which is currently the issue that we are having:

Code I'm using is (shortened):

import { useEffect, useRef, useState } from 'react';
import NET from 'vanta/dist/vanta.net.min';
import * as THREE from 'three';

export default function Sidebar() {
  const [vantaEffect, setVantaEffect] = useState<typeof NET>(null);
  const vantaRef = useRef(null);
  useEffect(() => {
    if (!vantaEffect) {
      setVantaEffect(
        NET({
          el: vantaRef.current,
          THREE,
          mouseControls: false,
          touchControls: false,
          gyroControls: false,
          minHeight: 200.0,
          minWidth: 200.0,
          backgroundColor: 0x26282c,
          color: 0xd5a245,
          scale: 1.0,
          scaleMobile: 1.0,
          points: 10.0,
          maxDistance: 20.0,
          spacing: 15.0,
        })
      );
    }

    return () => {
      if (vantaEffect) vantaEffect.destroy();
    };
  }, [vantaEffect]);

  return <div ref={vantaRef}></div>;
}

I will try to use CDN's and report if it solves the issue.

Edit: After checking the console, I saw this error: THREE.Material: parameter 'vertexColors' has value of undefined.. Also CDN was no luck.

[yagiziskirik]

I solved the issue! Only thing you need to do is to downgrade the threejs version on package.json file.

// package.json
{
  // Other things
  "dependencies": {
    // Other dependencies
    "three": "^0.134.0",
  },
  // If you are using Typescript:
  "devDependencies": {
    // Other dependencies
    "@types/three": "^0.137.0"
  }
}

Then run npm i again to fix the issue.

[ptdatta]

Thank u so much it worked perfectly.