博客

利用Threejs进行三维可视化的应用项目开发，我们经常回遇到需要加入一些动画效果，粒子效果等。所以本片利用此详细的例子进行介绍在Threejs中如何使用。

1，首先需要对三维场景进行初始化

function init() {
				// 创建clock
				clock = new THREE.Clock();
				// 创建场景
				scene=new THREE.Scene();
				// 创建渲染器
				renderer=new THREE.WebGLRenderer({
					antialias:true,
					alpha:true
				});
				renderer.setClearColor(0x000000, 0.0);
				renderer.setSize(window.innerWidth,window.innerHeight);
				renderer.setPixelRatio(window.devicePixelRatio);
				document.body.appendChild(renderer.domElement);
				// 创建透视相机
				camera=new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,1,1000);
				camera.position.set(0,0,30);
				
				// 辅助移动视角
				// controls=new THREE.OrbitControls(camera,renderer.domElement);
				// controls.enableDamping=true;
				// controls.minDistance=1;
				// controls.maxDistance=500;
				
				scene.add(new THREE.AmbientLight(0XCCCCCC, 0.5));
				
				var pointLight=new THREE.PointLight(0xffffff, 0.8);
				pointLight.position.set(0, 10, 40);
				scene.add(pointLight);
			}

2，对场景中用到的模型进行初始化

function initModel(){
				// var helper = new THREE.GridHelper(1000, 50);
				// scene.add(helper);
				
				// 尾焰
				var plane=new THREE.PlaneBufferGeometry(15,30,1);
				fire = new THREE.Fire(plane,{
					textureWidth:1024,
					textureHeight:1024,
					debug:false,
					color1: new THREE.Color(0xffffff),
					color2: new THREE.Color(0xffc159),
					color3: new THREE.Color(0xe69bb1),
					windVector: new THREE.Vector2(0, -1.2),
					colorBias: 0.92,
					burnRate: 1.19,
					diffuse: 5,
					viscosity: 0.2,
					expansion: -3,
					swirl: 8,
					drag: 0.17,
					airSpeed: 23,
					speed: 390,
					massConservation: false
				});

				fire.addSource(0.5, 0.6, 0.1, 1.0, 0.0, -2.0);
				fire.addSource(0.62, 0.6, 0.1, 1.0, 0.0, -2.0);
				fire.addSource(0.38, 0.6, 0.1, 1.0, 0.0, -2.0);
				fire.position.y = firePosition;
				fire.position.z = -10;
				// fire.rotateX(Math.PI);//绕x轴旋转π/4
				scene.add(fire);
			
				// 烟雾
				var smokeTexture = THREE.ImageUtils.loadTexture(smokePath);
				var smokeMaterial = new THREE.MeshLambertMaterial({
					map: smokeTexture,
					transparent: true
				});
				var smokeGeo = new THREE.PlaneGeometry(30, 30);
				for (p = 0; p < smokeCount; p++) {
					var particle = new THREE.Mesh(smokeGeo, smokeMaterial);
					// particle.position.set((p-10)*5, -28+Math.abs(p-10)*2, -5);
					particle.position.set(0, firePosition-8, -5);
					// particle.position.set((p-10)*5, -28+Math.abs(p-10)*3, -5);
					particle.rotation.z = Math.random() * 360;
					// particle.rotateX(Math.PI);//绕x轴旋转π/4
					scene.add(particle);
					smokeParticles.push(particle);
				}
				
				// 箭体
				var arrowPlane=new THREE.PlaneBufferGeometry(10,25,1);
				// var geometry = new THREE.CubeGeometry( 10, 10, 10);
				var material = new THREE.MeshPhongMaterial({
					map: THREE.ImageUtils.loadTexture(arrowPath),
					transparent: true
					});
				arrowBodyMesh = new THREE.Mesh(arrowPlane, material);
				arrowBodyMesh.position.y = (firePosition + 18.7);
				arrowBodyMesh.position.z = -10;
				scene.add(arrowBodyMesh);
			}

3，动画创建

             /**
			 * three.js动画准备
			 */
			function threeReady(){
				init();
				initModel();
			}
			
			/**
			 * three.js动画开始
			 */
			function threeStart() {
				// 允许动画循环
				isStop = false;
				initTween();
				animate();
			}

            /**
			 * 元素归位，动画循环停止
			 */
			var isStop = false; // 是否停止动画nd
			function threeEnd() {
				// 尾焰归位
				fire.position.set(0, firePosition, -10);
				// 烟雾归位
				for (var p = 0; p < smokeCount; p++) {
					smokeParticles[p].position.set(0, firePosition-8, -5);
				}
				// 箭体归位
				arrowBodyMesh.position.set(0, firePosition + 18.7, -10);
				// 动画循环停止
				isStop = true;
			}

完整源码下载地址：

基于Threejs的火焰烟雾动画效果代码-互联网文档类资源-CSDN下载