vue-threejs-birds
v0.6.9
Published
Threejs birds flocking animation refactored and converted to vue module.
Downloads
11
Maintainers
Readme
vue-threejs-birds
vue-threejs-birds is vue module for "flocking birds animation" from threejs. Props have been extracted to customize options.
Usage
Install
npm install --save vue-threejs-birds
Then import it into YourComponent.vue and use it like a normal vue component.
<template>
<vue-threejs-birds :quantity="quantity" :canvasBgColor="canvasBgColor" />
</template>
<script>
import VueThreejsBirds from 'vue-threejs-birds'
export default {
components: {
VueThreejsBirds
},
data() {
return {
quantity: 2,
canvasBgColor: 0x000000
}
}
}
</script>
Emitting event to handle window resize
Emit a custom event so the canvas can rerender on resize. Emitting a 'resized' event like this registers a single 'resize' event listener. Other components can then subscribe to this event instead of attaching multiple event listeners to the window. More info on event delegation.
Todo: Extract other event handlers
<template>
<vue-threejs-birds />
</template>
<script>
import VueThreejsBirds from './Birds'
export default {
components: {
VueThreejsBirds
},
methods: {
handleResize() {
const windowSize = {
width: window.innerWidth,
height: window.innerHeight
}
this.$root.$emit('resized', windowSize)
}
},
mounted() {
window.addEventListener('resize', this.handleResize)
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize)
}
}
</script>
Options
Here are all the props that can be customized:
canvasBgAlpha
: Background color transparency. Default is 1 or opaque. Range is 0-1 Eg.{ canvasBgAlpha: 0.5 }
canvasBgColor
: All colors can be Hexadecimal numbers or a string ("rgb(255, 0, 0)", "#ff0000", "rgb(100%, 0%, 0%)", "hsl(0, 100%, 50%)"
). The background color for the canvas. Eg.{ canvasBgColor: 0xffffff }
Note: Passing alpha with the color like "rgb(255, 0, 0, 0.5)" will ignore the alpha component.
color1
andcolor2
: You can choose two colors for the birds which will rendered based on the colorEffect.{ color1: 0xfff, color2: 0x000000 }
colorEffect
: colorEffect should be a number between 0-4 which map to the following. Eg usage{ colorEffect: 1 }
colorEffectMap = {
0: 'lerp',
1: 'lerpGradient',
2: 'variance',
3: 'varianceGradient',
4: 'mix'
}
effectController
: Bird movement options.
effectController: {
separation: 20.0,
alignment: 20.0,
cohesion: 20.0,
freedom: 0.75
}
quantity
: Number between 1-5. Total birds will be 2quantity x 2quantity.wingsSpan
: Wingspan of the birds. Eg{ wingsSpan: 20 }
Dimensions
Canvas will default to 100% viewport width and 100% viewport height on mount and window resize.
fixedHeight
: Height will not change.fixedWidth
: Width will not change.
Here are all the props that can be passed with their respective prop types.
<script>
props: {
canvasBgColor: {
default: 0xffffff,
type: [String, Number],
required: false,
validator: function(val) {
return validateColor(new Color(val))
}
},
canvasBgAlpha: {
default: 1,
type: Number,
required: false,
// range 0-1
validator: function(val) {
return inRange(val, 0, 1)
}
},
color1: {
default: 0x8bf329,
type: [String, Number],
required: false,
validator: function(val) {
return validateColor(new Color(val))
}
},
color2: {
default: 0x298bf3,
type: [String, Number],
required: false,
validator: function(val) {
return validateColor(new Color(val))
}
},
colorEffect: {
default: 0,
type: Number,
required: false,
//range 0-4 integers only
validator: function(val) {
return [0, 1, 2, 3, 4].includes(val)
}
},
effectController: {
default: () => ({
separation: 20.0,
alignment: 20.0,
cohesion: 20.0,
freedom: 0.75
}),
type: Object,
required: false
},
fixedHeight: {
type: Number,
default: null,
required: false
},
fixedWidth: {
type: Number,
default: null,
required: false
},
quantity: {
default: 3,
type: Number,
required: false,
// range 1-5
validator: function(val) {
return val >= 1 && val <= 5
}
},
wingsSpan: {
type: Number,
default: 20,
required: false
}
}
</script>