three.js粒子特效

一、three.js显示3D物体

// 创建一个场景
var scene = new THREE.Scene();
// 创建相机
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
// 创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
// 添加渲染器到dom
document.body.appendChild( renderer.domElement );

// 生成3D物体
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
// 生成材质
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
// 把材质添加到物体上
var cube = new THREE.Mesh( geometry, material );
// 把网格添加到场景中
scene.add( cube );

camera.position.z = 5;

var animate = function () {
	requestAnimationFrame( animate );

	cube.rotation.x += 0.01;
	cube.rotation.y += 0.01;

	renderer.render( scene, camera );
};

animate();

二、TweenMax动画库

TweenMax.to( target:Object, duration:Number, vars:Object )
此方法用于创建一个从当前属性到指定目标属性的TweenMax动画对象。

参数名	类型	是否必填	描述
target	object	是	需要动画的对象
duration	number	是	动画持续时间，一般是秒
vars	object	是	动画参数（CSS属性、延迟、重复次数等）

TweenMax还有一些其他方法，这里不再介绍。

三、顶点

3D物体都是由一定数量的三角形的面组成，各个平面相交的地方就存在一定数量的顶点，我们重要的就是使用物体的顶点。不过这里有些要注意的地方。
1.不同物体的顶点不同，我们要使用顶点最少的物体
2.由于3D物体顶点计算量很大，对性能有较高要求，因此我们尽量减少面的数量、减少顶点的数量
3.我们也可以使用3D max制作的模型，这样有很大的自由度

四、一个粒子动画

var container;
var camera, scene, renderer, group, particle;

init();
animate();

function init() {
	// dom节点
	container = document.createElement('div');
	document.body.appendChild(container);

	// 场景
	scene = new THREE.Scene();

	// 透视相机
	camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 3000);
	camera.position.z = 1000;
	camera.position.y = 0;

	// 组
	group = new THREE.Group();
	scene.add(group);

	//创建一个球型
	var geometry = new THREE.SphereGeometry(500, 32, 32);
	var vl = geometry.vertices.length; // 球形顶点数量

	for ( var i = 0; i < vl; i++ ) {
		// 为每个点附上材质
		var material = new THREE.SpriteCanvasMaterial({
			color: Math.random() * 0x808008 + 0x808080,
			program: function (context) {
				// 画点
				context.beginPath();
				context.arc(0, 0, 0.5, 0, Math.PI * 2, true);
				context.fill();
			}
		});

		// 精灵
		particle = new THREE.Sprite(material);
		particle.position.x = 0;
		particle.position.y = -500;
		particle.position.z = 0;
		particle.scale.x = particle.scale.y = Math.random() * 6 + 3;
		var timerandom = 1 * Math.random();

		//为每个点加动画
		TweenMax.to(
			particle.position,
			timerandom,
			{
				x: geometry.vertices[i].x + (0.5-Math.random()) * 100,
				y: geometry.vertices[i].y + (0.5-Math.random()) * 100,
				z: geometry.vertices[i].z + Math.random() * 100,
				delay: 1.8,
			} 
		);
		group.add(particle);
	}
	
	// 渲染器
	renderer = new THREE.CanvasRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );
	// 添加渲染器到dom
	container.appendChild( renderer.domElement );
}

function animate() {
	requestAnimationFrame(animate);
	renderer.render(scene, camera);
}

五、加载obj模型

我们可以使用3D max制作模型，导出为obj文件，下面为一个加载obj模型例子：
不过在里有几点要注意以下：
1.模型一定是要可访问的，因为模型本身是静态文件，不能直接被浏览器访问，使用serve这样的库才能让这些本地文件能直接浏览器使用，如果使用react等框架不存在这样的问题。
2.模型加载完得到的mesh、child都不存在顶点，一定要使用fromBufferGeometry这样得到模型顶点。
3.模型可能存在比例不对加载到浏览器太大看不到，可以设置缩放等
4.未设置灯光也可能引起模型加载完看不到
5.相机设置有问题也可能引起模型加载完看不到

var loader = new window.THREE.OBJLoader();
loader.load("obj/text.obj",function (loadedMesh) {
	loadedMesh.scale.set(10, 10, 10);

	// 加载完obj文件是一个场景组，遍历它的子元素，赋值纹理并且更新面和点
	loadedMesh.children.forEach(function (child) {
		var material = new window.THREE.MeshLambertMaterial({color: 0x0000ff});        
		child.material = material;
		
		// 得到obj模型顶点
		var geometry = new window.THREE.Geometry().fromBufferGeometry( child.geometry );
		var vl = geometry.vertices.length;
		console.log(geometry);
	});

	scene.add(loadedMesh);
	camera.lookAt(loadedMesh.position);
});

六、obj模型粒子动画

加载完obj模型，得到顶点之后，即可开始粒子动画。

如果对你有帮助，可以请我喝杯咖啡