粒子特效是为模拟现实中的水,火,雾,气等效果由各种三维软件开发的制作模块,原理是将无数的单个粒子组合使其呈现出固定形态,借由控制器,脚本来控制其整体或单个的运动,模拟出现真实的效果.three.js是用JavaScript编写的WebGL的第三方库,three.js提供了丰富的API帮助我们去实现3 d动效,本文主要介绍如何使用three.js实现粒子过渡效果,以及基本的鼠标交互操作。
(注:本文使用的关于three.js的API都是基于版本r98的。)
<强> 1。创建渲染场景场景
现场实际上相当于一个三维空间,用于承载和显示我们所定义的一切,包括相机,物体,灯光等。在实际开发时为了方便观察可添加一些辅助工具,比如网格,坐标轴等。
现?new THREE.Scene ();
现场。雾=new三人。雾(0 x05050c 10 60);
现场。添加(新三人。GridHelper (2000 1));//添加网格
三个里面实现了几种相机:PerspectiveCamera(透视相机),OrthographicCamera(正交投影相机),CubeCamera(立方体相机或全景相机)和立体摄影机(3 d相机)。本文介绍我们主要用到的PerspectiveCamera(透视相机):
视觉效果是近大远小。
配置参数PerspectiveCamera (fov,方面,近,远)。
视场:相机的可视角度。
方面:相机可视范围的长宽比。
:附近相对于深度剪切面的远的距离。
:相对于深度剪切面的远的距离。
相机=new三人。PerspectiveCamera(45岁的窗口。innerWidth/窗口。innerHeight 5 100);
camera.position。集(-10、-40);
scene.add(相机);
<强> 3。添加场景渲染需要的灯光
three.js里面实现的光源:AmbientLight(环境光),方向性光源(平行光),HemisphereLight(半球光),PointLight(点光源),RectAreaLight(平面光源),焦点(聚光灯)等。配置光源参数时需要注意颜色的叠加效果,如环境光的颜色会直接作用于物体的当前颜色。各种光源的配置参数有些区别、下面是本文案例中会用到的二种光源。
让ambientLight=new三人。AmbientLight (0 x000000, 0.4);
scene.add (ambientLight);
让pointLight=new THREE.PointLight (0 xe42107);
pointLight。castShadow=true;
pointLight.position。组(-10,-10);
pointLight。距离=20;
scene.add (pointLight);
<强> 4。创建,导出并加载模型文件装载机
创建模型,可以使用三个。js编辑进行创建或者用three.js的基础模型生成类进行生成,相对复杂的或者比较特殊的模型需要使用建模工具进行创建(c4d 3距离等)。
三使用。js编辑进行创建,可添加基本几何体,调整几何体的各种参数(位置,颜色,材质等)。
使用模型类生成。
让geometryCube=new三人。BoxBufferGeometry (1 1 1);
让materialCube=new三人。MeshBasicMaterial({颜色:0 x00ff00});
让cubeMesh=new三人。网格(geometryCube materialCube);
现场。添加(cubeMesh);
导出需要的模型文件(此处使用的是obj格式的模型文件)。
加载并解析模型文件数据。
让>
让颜色=new THREE.Color (“# ffffff”);
让材料=new THREE.PointsMaterial ({
大小:0.2,
地图:纹理,
depthTest:假的,
透明:真
});
particleSystem=new THREE.Group ();
让allCount=0
(让我=0;我& lt;object.children.length;我+ +){
让name=object.children[我]. name
让_attributes=object.children[我].geometry.attributes
允许数=_attributes.position.count
_attributes。positionEnd=_attributes.position.clone ()
_attributes。position1=_attributes.position.clone ()
(让我=0;我& lt;数* 3;我+ +){
_attributes.position1。array[我]=math . random () * 100 - 50
}
让粒子=new THREE.Points (object.children[我]。几何、材料)
particleSystem.add(颗粒)
allCount +=计数
}
particleSystem。applyMatrix(新THREE.Matrix4 ()。makeTranslation (5 5 -10));
<强> 6。通过渐变动画库实现粒子坐标从位置到position1点转换
