Breaks in `[email protected]`
Author: ajmeese7Created Oct 26, 2023Updated Oct 15, 2025
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.
Source: tengbao/vanta