vanta Geometry is no longer a constructor in three.js r125

Geometry is no longer a constructor in three.js r125

Open DustinBrett opened this issue 3 years ago • 8 comments

As mentioned in this article, three.js has removed THREE.Geometry in r125. I recently tried to use WAVES with r125 and got the error n.Geometry is not a constructor.

It looks like this constructor is used quite a bit in vanta.

I attempted to convert Geometry to BufferGeometry but I don't know enough about vertices or faces or any of that stuff so it quickly got out of hand for me.

My current "fix" is locking my three.js version at 0.124.0.

Feb 01 '21 05:02 DustinBrett

Thanks for catching this! Yea, simple solution is just to rollback to an older version of threejs. I'll update the code later!

Feb 09 '21 02:02 tengbao

Dependabot is now acknowledging vulnerabilities issues with threejs < r125 btw.

Mar 02 '21 12:03 rafaberaldo

When I upgraded to [email protected], there was an error at destroy

Mar 23 '21 23:03 naveennazimudeen

The issue still exists for topology even if you rollback to 119 like the demo on the site shows.

vanta.topology.min.js:1 [VANTA] Init error TypeError: n is not a constructor

import Head from 'next/head' import { useEffect, useRef, useState } from "react"; import TOPOLOGY from 'vanta/dist/vanta.topology.min'; import * as THREE from "three"; import { css } from '@emotion/css';

/page

const style = css`
    min-height: 100vh;
    height: 100%;
    width: 100%;

    & .main {
        height: 100%;
        width: 100%;
        min-height: 100vh;

        & canvas {
            height: 100%;
        }
    }
`;

export default () => {
    const [vantaEffect, setVantaEffect] = useState(0);
    const vantaRef = useRef(null);

    useEffect(() => {
        if (!vantaEffect) {

            setVantaEffect(TOPOLOGY({
                el: vantaRef.current,
                THREE
            }))
        }

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

    return (
        <div className={style}>
            <main className="main" ref={vantaRef}>

            </main>
        </div>
    )
};

/_app

import '../data/globals.css'
import { useEffect } from "react";

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    const threeScript = document.createElement("script");
    threeScript.setAttribute("id", "threeScript");
    threeScript.setAttribute(
      "src",
      "https://cdnjs.cloudflare.com/ajax/libs/three.js/r119/three.min.js"
    );
    document.getElementsByTagName("head")[0].appendChild(threeScript);
    return () => {
      if (threeScript) {
        threeScript.remove();
      }
    };
  }, []);
  return <Component {...pageProps} />;
}

export default MyApp;