Nightmarish Pawnshop Mystic

    @tntv/layers

    1.1.7 • Public • Published

    TNTV-Layers

    基于THREE.js实现的一套特效图层库,目前提供各种类型的flyline和points的图层,后续计划实现更多常用效果图层

    使用方法

    npm i @tntv/layers
    

    引用

    import {FlyLine} from '@tntv/layers';
    

    demo

    api

    flyline

    	//constructor() 构造函数 
    	new FlyLine({
    		addLineTimeout:100,// 线动画间隔
    		materialConfig:{
    			startColor:new THREE.Vector4(0,0,1,0), // 材质颜色
    			endColor:new THREE.Vector4(0,1,1,1), // 材质结束颜色
    		}
    	})
    
    	setData([{start:{x,y,z},end:{x,y,z}}]) //配置数据 
        start() //开始动画

    flytube,flymesh

    	new FlyTube({
    		addLineTimeout:100,// 线动画间隔
    		materialConfig:{
    			lineWidth:5,
    			useMap:true,
    			map:texture,//材质
    			//color:0xff00aa,
    			repeat:new THREE.Vector2(20/5,1),//重复
    			resolution:new THREE.Vector2(window.innerWidth,window.innerHeight)// 画布比例
    		}
    	})
    
    	setData( [{start:{x,y,z},end:{x,y,z}}]) //配置数据
        start() //开始动画

    MoveingLine

    	new MoveingLine({
    		speed:1,// 线动画间隔
    		smoothNumber:1,//线顺滑度密度,最高为1
    		materialConfig:{
    			 flowSpeed:0.01 //流动速度
    		}
    	})
    
    	setData([
    		{
    			color:"#0f9",
    			points:[{x,y,z},{x,y,z}]
    		}
    	]) //配置数据

    Points

    	new Points({
    		materialConfig:{
    			size:2,
    			map:textrue,//材质
    			scale:100,//缩放比例,和相机和物体常用距离相关
    		}
    	})
    
    	setData([
    		{
    			position:{x,y,z},// 坐标
    			color:new THREE.Color(1,1,0) //颜色
    		}
    	]) //配置数据

    Install

    npm i @tntv/layers

    DownloadsWeekly Downloads

    14

    Version

    1.1.7

    License

    ISC

    Unpacked Size

    42.9 MB

    Total Files

    41

    Last publish

    Collaborators

    • xiaocuicui
    • mizy
    • xiaofei.wang
    • zhouzefei
    • bruceliu68
    • td-tnt