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()