3D碎片

当前版本:V1 最近更新:2015-12-9 组件作者:signhuang

 

组件说明

1、组件依赖于three.js,所以需要做好降级处理
2、demo处理工具处理仅针对AI中导出的指定SVG

更新日志

  • 2015/12/9 beta测试

html结构

    

引入组件,注意写好降级处理



var webgl = chip(num, cfg);

初始化

	// num: 1000 碎片数量
	/*
	画布大小,默认为屏幕大小
	cfg:
		{
			width: 1000,
			height: 1000
		}
	*/

webgl.svg2three(svg, offsetX, offsetY, offsetZ);

SVG转为3D碎片属性

	/*
	SVG和WEBGL的画布(0,0)的不同
	svg: svg代码
	offsetX: X轴偏移量
	offsetY: Y轴偏移量
	offsetZ: Z轴偏移量
	*/

webgl.arr2three(positions, colors);

手动生成3D碎片

	/*
	positions: [x1,y1,z1, x2,y2,z2, x3,y3,z3] 	//数组,最少3个顶点(9个值) 且数组长度需要是9的倍数
	colors: [r1,g1,b1, r2,g2,b2, r3,g3,b3] 	//数组,最少3个颜色(9个值) 且数组长度需要是9的倍数
	*/

webgl.transform(targets, cfg);

碎片属性动画函数

	转换后碎片数组(通过getNormals及getColors函数活动)
	targets: {
		position: Float32Array,
		color: Float32Array,
		normal: Float32Array,
	}
	碎片属性动画参数
	cfg : {
		duration: 1000,		//动画持续时间,默认为1000
		delay: 0,			//动画延迟时间,默认为0
		easing: "InOut",	//动画easing "In"|"Out"|"InOut",默认为InOut
		attr: ["position", "color", "normal"]	//进行动画的属性,默认为全属性
	}

webgl.getCube(range, size);

碎片属性动画函数

	/*
		range: 1000 //碎片分布范围,默认为初始化宽度
		size: 30 	//碎片尺寸范围,默认为30
	*/

webgl.setRotation(cfg);

设置场景旋转值

	旋转值,单位rad,初始值为0
	cfg : {
		x: 0.01,
		y: 0.01,
		z: 0.01  
	}

webgl.setPosition(cfg);

设置场景位移值

	位移值,初始值为0
	cfg : {
		x: 100,
		y: -100,
		z: 10
	}

DEMO演示

demo