Breaks in [email protected]

[ajmeese7]

Whenever I use 0.152.2 of three.js, my project works exactly as expected. But if I try upgrading my project to the latest version of three, Vanta just renders a blank screen. This is my code segment, unchanged between when I used each version of three:

/**
 * Allows us to defer the loading of Three.js until it's needed,
 * preventing page blocking upon initial load.
 * @link https://dev.to/marcinwosinek/lazy-load-library-in-application-build-with-webpack-5757
 */
import(/* webpackChunkName: "three-js" */ "three").then(THREE => {
	import(/* webpackChunkName: "vanta-waves" */ "vanta/dist/vanta.waves.min").then(library => {
		const WAVES = library.default;
		effect = WAVES({
			el: background,
			THREE: THREE,
			minHeight: 200.00,
			minWidth: 200.00,
			scale: 1.0,
			scaleMobile: 1.0,
			gyroControls: false,
			mouseControls: false,
			mouseEase: false,
			touchControls: false,
			camera: {
				far: 400,
				fov: 30,
				near: 0.1,
			},
			color: "hsl(225, 40%, 20%)",
			colorCycleSpeed: 10,
			forceAnimate: true,
			hh: 50,
			hue: 225,
			lightness: 20,
			material: {
				options: {
					fog: false,
					wireframe: false,
				},
			},
			saturation: 40,
			shininess: 35,
			waveHeight: 20,
			waveSpeed: 0.25,
			ww: 50,
			...settings,
		});

	...

Do you have any idea why this might be, or how I can resolve it? I would like to update to the latest version of three, but I'm stuck at the previous version until this issue is resolved.

[RaunoT]

Running into the same issue. For me the animation seems to render properly, but is very dark. Pretty sure it has something to do with the color logic changes in r151 -> r152 of three.js.

https://github.com/mrdoob/three.js/wiki/Migration-Guide#151--152
https://github.com/mrdoob/three.js/releases/tag/r152

This is my implementation FWIW

import * as THREE from 'three'
import FOG from 'vanta/dist/vanta.fog.min'

export default function AppProvider() {
  const [background, setBackground] = useState<VantaEffect>(null)
  const backgroundRef = useRef(null)

  useEffect(() => {
    if (!background) {
      setBackground(
        FOG({
          el: backgroundRef.current,
          THREE: THREE, // seems to not work properly > 0.151.3
          highlightColor: 0xb5336,
          midtoneColor: 0x211e1d,
          lowlightColor: 0x16166f,
          baseColor: 0x0,
          speed: 1,
        }),
      )
    }

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

  return (
    <main ref={backgroundRef}>
       {children}
    </main>
  )
}

[meowthing]

Thank you for this thread - I thought I was doing something wrong when trying to implement Waves into my React project!

I have nothing more to contribute other than to confirm that using the latest version of Three JS (0.164.0) continues to break some VantaJS effects.

Out of the effects I've tried, Waves renders a blank screen, Rings has some sort of muted grey layer on top, and only Globe seems to render properly. Had to downgrade to 0.151.0 of Three to get Waves working.

[jetboh]

Can confirm this is still an issue. 0.152.2 works with Waves for me but not latest.