ThreeJS编写3D闪电和激光特效源码

使用Three.JS开发网页在线3D展示打雷、激光、闪电特效，完全不需要安装任何插件，输入打开网址就可以查看网上闪电特效。

展示源码功能包括：

1.场景默认显示一条从天而降的闪电，带贴图质感，非模型，而是程序生成；

2.可以通过鼠标控制视点切换，鼠标按下旋转视点，滑轮缩放，整个场景的背景是全景黑色背景；

3.右上角具有一个控制菜单，可以滑动调整闪电的粗细、闪电的幅度、闪电的频率，闪电的分叉数量，非常直观，可以参数化了解闪电的特效和闪电的3D模拟原理。

4.闪电上下各有头一个漏斗，标志闪电的起始和终止位置；注：本地预览建议部署WEB服务器，配置localhost/127.0.0.1等网络访问地址运行，建议用火狐浏览器，谷歌浏览器等。

//核心代码：闪电生成代码 Lightning strike

scene.userData.lightningMaterial = new THREE.MeshBasicMaterial( { color: scene.userData.lightningColor } );

scene.userData.rayParams = {

sourceOffset: new THREE.Vector3(),
destOffset: new THREE.Vector3(),
radius0: 4,
radius1: 4,
minRadius: 2.5,
maxIterations: 7,
isEternal: true,

timeScale: 0.7,

propagationTimeFactor: 0.05,
vanishingTimeFactor: 0.95,
subrayPeriod: 3.5,
subrayDutyCycle: 0.6,
maxSubrayRecursion: 3,
ramification: 7,
recursionProbability: 0.6,

roughness: 0.85,
straightness: 0.6

};

var lightningStrike;
var lightningStrikeMesh;
var outlineMeshArray = [];

scene.userData.recreateRay = function () {

if ( lightningStrikeMesh ) {

scene.remove( lightningStrikeMesh );

}

lightningStrike = new LightningStrike( scene.userData.rayParams );
lightningStrikeMesh = new THREE.Mesh( lightningStrike, scene.userData.lightningMaterial );

outlineMeshArray.length = 0;
outlineMeshArray.push( lightningStrikeMesh );

scene.add( lightningStrikeMesh );

};

scene.userData.recreateRay();