Project Name | Stars | Downloads | Repos Using This | Packages Using This | Most Recent Commit | Total Releases | Latest Release | Open Issues | License | Language |
---|---|---|---|---|---|---|---|---|---|---|
Vanta | 4,592 | 4 | 3 months ago | 19 | September 16, 2022 | 45 | mit | JavaScript | ||
Animated 3D backgrounds for your website | ||||||||||
Jeelizweboji | 1,039 | 2 | 20 days ago | 2 | April 30, 2021 | apache-2.0 | JavaScript | |||
JavaScript/WebGL real-time face tracking and expression detection library. Build your own emoticons animated in real time in the browser! SVG and THREE.js integration demos are provided. | ||||||||||
Vis Graph3d | 277 | 4 | 2 | a day ago | 38 | August 22, 2021 | 11 | apache-2.0 | JavaScript | |
📊 Create interactive, animated 3d graphs. Surfaces, lines, dots and block styling out of the box. | ||||||||||
Threejs Animation Workflow | 139 | 7 years ago | 2 | mit | JavaScript | |||||
A basic example of how to import from Blender multiple animated 3D models with three.js | ||||||||||
Turbulence Library | 60 | 7 years ago | 2 | other | C# | |||||
Procedural noise on the GPU for Unity. | ||||||||||
Cube.less | 50 | 4 years ago | March 01, 2016 | 1 | mit | CSS | ||||
3D (animated) cube using only CSS (Less), originally used by LeanCloud (aka. AVOS Cloud) | ||||||||||
Pogo 3d Assets | 45 | 7 years ago | 10 | |||||||
3D-Pokemon Models for PoGo-UWP | ||||||||||
Flutter Fbx 3d Viewer | 29 | a year ago | 2 | January 28, 2020 | 1 | other | Dart | |||
Flutter package for viewing Fbx 3d animated files. | ||||||||||
Camera Proxy | 17 | 3 months ago | 12 | mit | JavaScript | |||||
Cross-platform 3D Camera Controller. | ||||||||||
Cube5 | 15 | 13 years ago | ||||||||
A CSS3 animated 3D Cube layout |
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta/dist/vanta.waves.min.js"></script>
<script>
VANTA.WAVES('#my-background')
</script>
VANTA.WAVES({
el: '#my-background', // element selector string or DOM object reference
color: 0x000000,
waveHeight: 20,
shininess: 50,
waveSpeed: 1.5,
zoom: 0.75
})
el: The container element.
mouseControls: (defaults to true) Set to false to disable mouse controls. Only applies to certain effects.
touchControls: (defaults to true) Set to false to disable touch controls. Only applies to certain effects.
gyroControls: (defaults to false) Set to true to allow gyroscope to imitate mouse. Only applies to certain effects.
NOTE: Each effect has its own specific parameters. Explore them all at www.vantajs.com!
const effect = VANTA.WAVES({
el: '#my-background',
color: 0x000000
})
// Later, when you want to update an animation in progress with new options
effect.setOptions({
color: 0xff88cc
})
// Later, if the container changes size and you want to force Vanta to redraw at the new canvas size
effect.resize()
const effect = VANTA.WAVES('#my-background')
effect.destroy() // e.g. call this in React's componentWillUnmount
npm i vanta
, then import a specific effect as follows. Make sure three.js
or p5.js
has already been included via <script> tag.
import React, { useState, useEffect, useRef } from 'react'
import BIRDS from 'vanta/dist/vanta.birds.min'
// Make sure window.THREE is defined, e.g. by including three.min.js in the document head using a <script> tag
const MyComponent = (props) => {
const [vantaEffect, setVantaEffect] = useState(null)
const myRef = useRef(null)
useEffect(() => {
if (!vantaEffect) {
setVantaEffect(BIRDS({
el: myRef.current
}))
}
return () => {
if (vantaEffect) vantaEffect.destroy()
}
}, [vantaEffect])
return <div ref={myRef}>
Foreground content goes here
</div>
}
npm i vanta
, then import a specific effect as follows. Make sure three.js
or p5.js
has already been included via <script> tag.
import React from 'react'
import BIRDS from 'vanta/dist/vanta.birds.min'
// Make sure window.THREE is defined, e.g. by including three.min.js in the document head using a <script> tag
class MyComponent extends React.Component {
constructor() {
super()
this.vantaRef = React.createRef()
}
componentDidMount() {
this.vantaEffect = BIRDS({
el: this.vantaRef.current
})
}
componentWillUnmount() {
if (this.vantaEffect) this.vantaEffect.destroy()
}
render() {
return <div ref={this.vantaRef}>
Foreground content goes here
</div>
}
}
<template>
<div ref='vantaRef'>
Foreground content here
</div>
</template>
<script>
import BIRDS from 'vanta/dist/vanta.birds.min'
// Make sure window.THREE is defined, e.g. by including three.min.js in the document head using a <script> tag
export default {
mounted() {
this.vantaEffect = BIRDS({
el: this.$refs.vantaRef
})
},
beforeDestroy() {
if (this.vantaEffect) {
this.vantaEffect.destroy()
}
}
}
</script>
For effects that use three.js, you can import three
from npm, and pass it into the effect function.
import React from 'react'
import * as THREE from 'three'
import BIRDS from 'vanta/dist/vanta.birds.min'
...
componentDidMount() {
this.vantaEffect = BIRDS({
el: this.vantaRef.current,
THREE: THREE // use a custom THREE when initializing
})
}
...
For effects that use p5.js, you can import p5
from npm, and pass it into the effect function.
import React from 'react'
import p5 from 'p5'
import TRUNK from 'vanta/dist/vanta.trunk.min'
...
componentDidMount() {
this.vantaEffect = TRUNK({
el: this.vantaRef.current,
p5: p5 // use a custom p5 when initializing
})
}
...
Clone the repo, switch to the gallery
branch, run npm install
and npm run dev
, and go to localhost:8080.
General inspiration from shadertoy.com, #generative, /r/generative, /r/creativecoding, etc
Birds effect from https://threejs.org/examples/?q=birds#webgl_gpgpu_birds by @zz85
Fog effect from https://thebookofshaders.com/13/ by @patriciogonzalezvivo
Clouds effect from https://www.shadertoy.com/view/XslGRr by Inigo Quilez
Clouds2 effect from https://www.shadertoy.com/view/lsBfDz by Rune Stubbe
Trunk, Topology effects from http://generated.space/ by Kjetil Midtgarden Golid @kgolid