tengbao / vanta Goto Github PK
View Code? Open in Web Editor NEWAnimated 3D backgrounds for your website
Home Page: http://vantajs.com/
License: MIT License
Animated 3D backgrounds for your website
Home Page: http://vantajs.com/
License: MIT License
Is the current release of vantaJS (particularly the bird effect) supposed to be compatible with any web browser on mobile?
I used for my website but it is not visible on most mobile browsers that I tried in on.
Hi @tengbao,
Is there a way to move the dots when mouse hover? If so how can I do that?
Leaving Chrome, Firefox or Edge open with vanta.js while starting a game or 3Dmark causes rtx 2070 to fail and deliver white screen with error Message out of Ram.
After a while I figured it out and testet it, and yeap it crashes my pc. I dont have a solution to it but you should know that this consumes tons of RAM on my graphic card. Thanks for this awesome work. Bugs happens
Hi
I have completely written the code as same as the example, but the 3D animation is stopped once I scroll down the page. You can check the demo here: https://lovage.io/3d and my codes below:
<title>3D</title> <script type="text/javascript" src="./js/three.r92.min.js"></script> <script type="text/javascript" src="./js/vanta.wave.min.js"></script><script>
VANTA.WAVES({
el: "#layer",
});
</script>
However, the official demos works fine on my browser. Could you give me any tips?
Thanks
I'm hitting an error when I load three.r95.min.js and vanta.net.min.js asynchronously (which is necessary to avoid slow page loads) Admittedly only hitting it in Firefox, which is weird. But . . .
[VANTA] No THREE defined on window
It looks like vanta.net.js does the following without checking if win.THREE is defined/loaded:
let THREE = win && window.THREE
My solution would be the following, but I am not a JS dev and there may well be a more elegant way, hence submitting an issue rather than a PR:
var THREE;
let timer = setInterval(function(){
if(window.THREE) {
clearInterval(timer);
THREE = win && window.THREE;
}
},500);
I'm very new to javascript and would like to use Topology as a background on a Wordpress website. I'm using Divi and tried to add the code with the cdn, but it didn't work. I have no idea what I'm doing.
Where do I start?
I'm using Vanta js as a background full-sized image, but few days ago it's changed.
You can look, what I mean here: http://52.14.177.85/
I didn't change html or css code, so I belive it's because of vanta update. I don't understand, why it's no longer works as usual
The steps were followed precisely but the animation just doesn't appear
Hi @tengbao ! thanks for the awesome job!
I was trying to implement this in react but it wasn't working for some reason.
Steps to reproduce the problem...
vanta.birds.min.js
class BirdsAnimation extends React.Component {
constructor(props) {
super(props);
this.yourElement = React.createRef();
}
componentDidMount() {
const yourElement = this.yourElement.current;
if (typeof window !== undefined) {
this.effect = window.VANTA.BIRDS({
el: yourElement,
color1: 0xff,
color2: 0xffffff,
colorMode: 'variance',
wingSpan: 40.0,
speedLimit: 8.0,
alignment: 1.0,
cohesion: 48.0,
quantity: 4.0,
backgroundAlpha: 0.0,
});
}
}
componentWillUnmount() {
if (this.effect) this.effect.destroy();
}
render() {
return <div className="BirdsAnimation" ref={this.yourElement} />;
}
}
export default BirdsAnimation;
Uncaught TypeError: Cannot read property 'BIRDS' of undefined
CDN
url in this issue #3, but I want to read the file locally.Hi! I'm using the NET animation for my website background and have a small problem - any advice/fix greatly appreciated.
On a page with a long list of content, I initially had the problem of the animation being fixed height, so when I scrolled down the animation scrolled off and I just had my page background color. I fixed this by doing:
.vanta-canvas {
position: fixed !important;
}
(Not best practice? I'd welcome advice on an alternative)
This looks ok, but when I scroll down the animation stops animating/freezes in place. There are no error messages. It occurs in Chrome and Firefox latest, and in Edge (all on desktop)
Is this an issue with Vanta, with three.js, or with my solution to the fixed height on .vanta-canvas?
I tried every variation in your docs but cannot get this to work with this theme: https://github.com/narative/gatsby-theme-novela
Any help would be appreciated.
Love the birds animation, but high CPU usage is making my computer hot and its hard to justify using vanta for a simple webpage. Does anyone know any fixes?
Hi,
before I start, I already saw #18 .
It would be very nice if you cold post an example for vueJS, because there is no nuxt.config.js like in VueJS with Nuxt and I'm getting errors with every try.
Best regards and a nice day
I am using Hugo with this theme. The theme has a dark mode switch and I want to change the colors of the animation when the button is toggled.
The theme toggle js looks like this:
const getTheme = window.localStorage && window.localStorage.getItem("theme");
const themeToggle = document.querySelector(".theme-toggle");
const isDark = getTheme === "dark";
var metaThemeColor = document.querySelector("meta[name=theme-color]");
if (getTheme !== null) {
document.body.classList.toggle("dark-theme", isDark);
isDark ? metaThemeColor.setAttribute("content", "#252627") : metaThemeColor.setAttribute("content", "#fafafa");
}
themeToggle.addEventListener("click", () => {
document.body.classList.toggle("dark-theme");
window.localStorage && window.localStorage.setItem("theme", document.body.classList.contains("dark-theme") ? "dark" : "light", );
document.body.classList.contains("dark-theme") ? metaThemeColor.setAttribute("content", "#252627") : metaThemeColor.setAttribute("content", "#fafafa");
;
});
I was thinking I could add something like this
<script>
var effect = VANTA.FOG({
el: "body",
midtoneColor: 0x808C99,
})
if (getTheme !== null) {
document.body.classList.toggle("dark-theme", isDark);
effect.setOptions({midtoneColor: 0x00ff00});
}
</script>
But it does not seem to work. Any ideas how to achieve this?
In the console log I see: Can't find variable: getTheme
Hello,
We are using vanta.net.min.js on a website and it seems that there is a huge CPU usage. Also, the website becomes a bit slow.
We included only the following files:
three.r95.min.js
vanta.net.min.js
Do we have to upload some other files/folders? Is there something to make it faster and reduce the CPU usage?
Thanks in advance.
three.r92.min.js:35 THREE.WebGLRenderer: OES_texture_float_linear extension not supported.
when scrolling animation stops and console has this error message. even when using demo https://www.vantajs.com/?effect=birds
<script src="https://cdn.jsdelivr.net/gh/tengbao/vanta/vendor/three.r92.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/tengbao/vanta/dist/vanta.fog.min.js"></script>
in index.html
Replace the ending of the filename with your desired effect.
2. Add a componentWillMount() listener and put in it
window.VANTA.FOG({
el: "#dummy",
});
https://codepen.io/abdullah-k/pen/NWqeomv
I am trying to update the zoom option in a setTimeout
function using effect.setOptions()
. The expected behavior is that the waves animation zooms out by itself after the specified time but, it only zooms out after there is some mouse movement over the canvas. Is there anything I can do to make it zoom out automatically?
Issue occurs on Chrome, Firefox, and Safari
Not a issue, is more a idea. It could be great if you could remove all the unused parts from Three.js and keep only the required parts so it will result a mix of Three.js and Vanta.js that will be very compact.
Very good plugin, BTW. Great job.
Thank you.
When importing vanta.net.min.js
TypeError: Cannot read property 'oy' of undefined
at r.onMouseMove (vanta.net.min.js?1841:1)
at r.triggerMouseMove (vanta.net.min.js?1841:1)
at r.setSize (vanta.net.min.js?1841:1)
at new r.VantaBase (vanta.net.min.js?1841:1)
at new r (vanta.net.min.js?1841:1)
at r. (vanta.net.min.js?1841:1)
at VueComponent.mounted (LayoutHeroLight.vue?675a:31)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
at callHook (vue.runtime.esm.js?2b0e:4219)
at Object.insert (vue.runtime.esm.js?2b0e:3139)
When importing vanta.rings.min.js
TypeError: Cannot read property 'oy' of undefined
at r.onMouseMove (vanta.rings.min.js?5c97:1)
at r.triggerMouseMove (vanta.rings.min.js?5c97:1)
at r.setSize (vanta.rings.min.js?5c97:1)
at new r.VantaBase (vanta.rings.min.js?5c97:1)
at new r (vanta.rings.min.js?5c97:1)
at r. (vanta.rings.min.js?5c97:1)
at VueComponent.mounted (LayoutHeroLight.vue?675a:31)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
at callHook (vue.runtime.esm.js?2b0e:4219)
at Object.insert (vue.runtime.esm.js?2b0e:3139)
When trying to implement the DOTS version of Vanta, I keep running into the error below. I have created a possible fix for this.
vanta.dots.min.js?e6ba:1 [VANTA] Init error ReferenceError: THREE is not defined
at n.onInit (vanta.dots.min.js?e6ba:1)
at n.init (vanta.dots.min.js?e6ba:1)
at new r.VantaBase (vanta.dots.min.js?e6ba:1)
at new n (vanta.dots.min.js?e6ba:1)
at r.<computed> (vanta.dots.min.js?e6ba:1)
at VueComponent.mounted (Introduction.vue?5257:51)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
at callHook (vue.runtime.esm.js?2b0e:4219)
at Object.insert (vue.runtime.esm.js?2b0e:3139)
at invokeInsertHook (vue.runtime.esm.js?2b0e:6346)
Environment: Vue.js
I can't get this to work on my server or my local host. I can preview it with Brackets, but only when I copy and paste in...
<script>
VANTA.FOG('#fog')
</script>
Then the live view updates.
This does not happen when live viewing other WebGL projects.
Is there a way to force re-draw? When I resize the window the effect breaks and it says:
vanta.topology.min.js:1 Uncaught TypeError: Cannot read property '7' of undefined
at vanta.topology.min.js:1
at t.draw (vanta.topology.min.js:1)
at e.redraw (p5.min.js:8)
at e.<anonymous> (p5.min.js:7)
The best that I can do is to draw the whole thing again once the window size is less than x px. That creates a new canvas object. Wonder if there is a better solution.
Currently using the dots
effect and wondering if there's any documentation for other options, or are the ones showcased on the website all that's available?
I am using Vata JS Dots style and I want to remove/hide the big bubble spinning in the middle. How Can I do that?
After your most recent push this morning, my birds canvas element was no longer sizing correctly. Instead of filling the screen as it usually does, it was only a thin strip at the top of the screen. The width is still correct but the height is only about 100 pixels. I added the new snippet of code that was posted on the demo example of the birds but this still did not remedy the issue.
Please let me know if there is something else that I need to change. This is affecting my production build so I would like to remedy it as quickly as possible.
Hi. This isn't working with React currently. Here is the stack trace:
./src/Components/vanta.globe.min.js
Line 1: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1: 'define' is not defined no-undef
Hi @tengbao,
First, I want to thank you for making Vanta, and all the creators that contribute to it!
I'm having this weird issue with the Trunk animation. I'm following your exact setup guidelines:
<script src="js/p5.min.js"></script>
<script src="js/vanta.trunk.min.js"></script>
<script>
VANTA.TRUNK({
el: "#home",
color: 0xe83e8c,
backgroundColor: 0x2c3e50
});
</script>
And it's producing a weird result. Most of the time, it's performing as expected, but after some time, three quarters of the circle start bleeding (each time the lines move, those pixels become permanently colored).
I have the same code running in two browsers, but Chromium is experiencing this issue, while Firefox is not.
Clearing the cache had no effect.
I tried it on Windows in Chrome and got the same bleeding result.
Originally, I had developed on this project for about 10 hours on Ubuntu (Chromium) before running into this issue, whereas it happened instantly on Windows (Chrome).
The error only ever happens in this configuration. The top-left quarter of the circle doesn't bleed, but the other three quarters do.
The following is the console error in the Chromium inspect window.
I have included a video file in this zip to better show the effect.
vanta-trunk-bug.zip
Hello and thanks for the great scripts! Unfortunately I have a problem with them: When I scroll, the scripts stop working. They also don't stay anchored in the background like a fixed background image. Does anyone have an idea how I can solve this? Thank you and many greetings, Patrick
It concerns the website: https://kinkibit.de
I am using Vanta dots style and then I want to make my background to something like gradient with the three colors or more. How to make it guys?
Vanta does not render on my page when I use the object property color and background color. I get a syntax error on the console - Uncaught SyntaxError: Invalid or unexpected token
<script> VANTA.NET({ el: "#banner", color: 0x#00f7e4, backgroundColor: 0x#2b2390, points: 12.00, maxDistance: 17.00, spacing: 19.00 }) </script>
If I enclose the color value in quotes, three js output errors too -
THREE.Color: Unknown color 0x#00f7e4
I have initialized the effect by following code and it works. But how ist it possible to update some options later - for example the hightlightColor - without restarting the complete animation?
VANTA.FOG({
el: "#example",
highlightColor: 0x57230e,
midtoneColor: 0x461a08,
lowlightColor: 0x2f140b,
baseColor: 0x0,
blurFactor: 0.77,
speed: 3.60,
zoom: 2.50
})
Hi there,
I tried to use BIRDS in an Angular for hours, but I just can't make it work. Is it even possible? If so, what are the steps?
Regards Marco
I downloaded and added the p5.min.js and the vanta.topology.min.js from Github, it does work but I am getting a console error when i drag the mouse over the topology background, I attached a image with the console errors and a warning that a get. I was wondering if anyone has a similar problem or know the solution. Thanks in advance.
![Screenshot from 2019-11-08 15-10-03](https://user-images.githubusercontent.com/500
88928/68510770-fc72e100-0239-11ea-9b14-ef252e098353.png)
Also if for some reason the image is not visible
Im getting the warning in console:
-vanta.topology.min.js:1 [VANTA] No THREE defined on window
And the error is:
-vanta.topology.min.js:1 Uncaught TypeError: Cannot read property 'domElement' of undefined
at n.windowMouseMoveWrapper (vanta.topology.min.js:1)
Any cdns files for vanta assets? (cdnjs, jsdelivr and so forth). Thanks.
For now i use the files under dist
https://www.vantajs.com/dist/vanta.birds.min.js
Hey there,
i am using vanta in a new web-project with an already planned design. The design intends a gradient as the background. I want vanta to draw above that background (transparent) or to pass the gradient as backgroundGradient option. After a quick look to the code it seems like that will not be that easy.
Do you have an easy solution in mind or has anyone accomplished this before?
Just going for a simple background animation and running into issues that seem to be located in the Vanta source code.
Here is my code:
import React from 'react';
import { createStyles, withStyles } from '@material-ui/core/styles';
import * as THREE from '../lib/vanta-js/vendor/three.r92.min.js';
import WAVES from '../lib/vanta-js/dist/vanta.waves.min.js';
const styles = () => createStyles({
backRoot: {
zIndex: '-1',
width: '100%',
height: '100%'
}
})
class Background extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
const { classes } = this.props;
return (<div className={classes.backRoot}
ref={this.myRef}/>)
}
componentDidMount() {
this.effect = WAVES({
el: this.myRef.current
});
}
componentWillUnmount() {
if (this.effect) this.effect.destroy();
}
}
export default withStyles(styles)(Background);
And here is the stack trace:
./src/lib/vanta-js/dist/vanta.waves.min.js
Line 1: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1: 'define' is not defined no-undef
Line 1: 'define' is not defined no-undef
Line 1: Unexpected use of 'self' no-restricted-globals
Line 1: Unexpected use of 'self' no-restricted-globals
Line 1: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1: 'VANTA' is not defined no-undef
when using the net bg, in the desktop view is perfect, yet in the mobile view there is a million lines, I dont seem able to find a workaround, is like if the script understand that there is less distance between dots and then the same minimal distance value is applied.
does someone know how to deal with this?
funtion not woking and no more option.
also need my clouds direction change. now clouds are comming move. but i need clouds are going movment
I love the concept of Vanta.js offering great customizability to three.js. Unfortunately, I was not able to get this working and implement in my create-react-app. I followed README for implementation in react (both hooks and classes didn't work) . I keep getting 'define' is not defined and other compilation errors. I also tried using script tags but nothing worked. It would be great if you can add a complete working example of react + vanta in the repo.
Hello,
could you please provide an example with VueJS or NuxtJS in the readme.md as well?
Thank you!
Hello,
i am using barba.js v1 on my website and i would like to use vanta.waves as a header background on my subpages.
unfortunately the script wont initialize after a page transition,
only if I refresh the page (ctrl + r) then the canvas is rendered
how can i solve this?
I want to change the zoom smoothly like in the Vanta.waves example. Sadly, once I change the property, the shader restarts. Is it possible to do it ?
Hi
How can I add Vanta birds to my wordpress website?Do I need any plugins?
I have a React website that works with Vanta as intended in dev mode but when I build a production version, it fails to compile the Vanta file because it has no default export, is there any way around that, how can I use Vanta in production version?
This is the file:
import React, { useState, useEffect, useRef } from 'react';
import classes from './HomePage.module.css';
import Waves from './vanta.waves.min';
import * as THREE from 'three';
const HomePage = () => {
const [vantaEffect, setVantaEffect] = useState(0)
const myRef = useRef(null)
useEffect(() => {
if (!vantaEffect) {
setVantaEffect(Waves({
el: myRef.current,
color: 0x161616,
shininess: 60.00,
THREE: THREE
}))
}
return () => {
if (vantaEffect) vantaEffect.destroy()
}
}, [vantaEffect]);
return (
<div className={classes.waves} ref={myRef}>
//Components
</div>
)
};
export default HomePage;
And here is the error I got
$ npm run build
[email protected] build C:\Users\ahdmo\Desktop\Coding\Projects\fullPortfolio\new_portfolio> react-scripts build
Creating an optimized production build...
Failed to compile.
./src/Pages/HomePage/HomePage.js
Attempted import error: './vanta.waves.min' does not contain a default export
(imported as 'Waves').
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: react-scripts build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ahdmo\AppData\Roaming\npm-cache_logs\2020-01-12T10_17_54_376Z-debug.log
I recently added this library to my personal site to use the birds animation in my welcome section. Looks awesome on desktop but on mobile soon as i touch the page the animation of birds goes away.
Hi,
Great library and I really like the birds animation.
Although I get the following:
TypeError: Cannot read property 'time' of undefined
b.onUpdate
node_modules/vanta/dist/vanta.birds.min.js:1
Code:
import React, { Component } from 'react';
import * as THREE from 'three';
import BIRDS from 'vanta/dist/vanta.birds.min';
class Birds extends Component {
constructor() {
super()
this.vantaRef = React.createRef()
}
componentDidMount() {
this.vantaEffect = BIRDS({
el: this.vantaRef.current,
mouseControls: true,
touchControls: true,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
THREE: THREE
})
}
componentWillUnmount() {
if (this.vantaEffect) this.vantaEffect.destroy()
}
render() {
return <div ref={this.vantaRef}>
Foreground content goes here
</div>
}
}
export default Birds;
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.