three实现云层中逼真闪电动画效果代码-html代码-BFW代码库

three实现云层中逼真闪电动画效果代码

代码语言：html

所属分类：动画

代码描述：three实现云层中逼真闪电动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
body {
	width: 100vw;
	height: 100vh;
	margin: 0;
	background: black;
	overflow: hidden;
}
</style>


</head>

<body >
  


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.146.js"></script>
      <script >
let scene,
camera,
renderer,
cloudParticles = [],
rainParticles = [],
flash,
rain,
rainGeo,
rainCount = 15000;
function init() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(
  60,
  window.innerWidth / window.innerHeight,
  1,
  1000);

  camera.position.z = 1;
  camera.rotation.x = 1.16;
  camera.rotation.y = -0.12;
  camera.rotation.z = 0.27;

  ambient = new THREE.AmbientLight(0x555555);
  scene.add(ambient);

  directionalLight = new THREE.DirectionalLight(0xffeedd);
  directionalLight.position.set(0, 0, 1);
  scene.add(directionalLight);

  flash = new THREE.PointLight(0x062d89, 30, 500, 1.7);
  flash.position.set(200, 300, 100);
  scene.add(flash);

  renderer = new THREE.WebGLRenderer();

  scene.fog = new THREE.FogExp2(0x11111f, 0.002);
  renderer.setClearColor(scene.fog.color);

  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  let positions = [];
  let sizes = [];
  rainGeo = new THREE.BufferGeometry();
  for (let i = 0; i < rainCount; i++) {
    rainDrop = new THREE.Vector3(
    Math.random() * 400 - 200,
    Math.random() * 500 - 250,
    Math.random() * 400 - 200);

    positions.push(Math.random() * 400 - 200);
    positions.push(Math.random() * 500 - 250);
    positions.push(Math.random() * 400 - 200);
    sizes.push(30);
  }
  rainGeo.setAttribute(
  "position",
  new THREE.BufferAttribute(new Float32Array(positions), 3));

  rainGeo.setAttribu.........完整代码请登录后点击上方下载按钮下载查看