0.0.22 • Published 3 years ago
js-dic-particle-bg v0.0.22
js-dic-particle-bg
使用方式
script引入
<script src="https://cdn.jsdelivr.net/npm/js-dic-particle-bg@版本号/dist/js-dic-particle-bg.bundle.js"></script>
<script>
new ThreeBd({
customId:'dic-banner-three', // 需要挂在的domID 必填
spiritUrl:"图片url", //更换的精灵图,可以使svg格式。
cameraX:624, // 摄像头X坐标
cameraY:-8, // 摄像头Y坐标
cameraZ:176 // 摄像头Z坐标
SEPARATION:10,//行间距 默认为50 越大点越疏松
AMOUNTX:100, //行数 默认为100
AMOUNTY:50 // 列数 默认为50
Color:0xffffff //贴图颜色 为16进制Number 默认为0xffffff
debug:false, //是否需要开启调试模式 调试模式可以移动个摄像头以调整角度,并在控制台获取位置坐标
})
</script>
npm 引入
// 以vue为例
import ThreeBd from 'js-dic-particle-bg'
import img from '@/assets/菜花.svg'
export default {
mounted() {
this.$nextTick(()=>{
new ThreeBd({
customId:'dic-banner-three',
spiritUrl:img
})
})
}
注意
class缺少析构函数,只能手动调用以取消帧动画。
new ThreeBd().desctructor()