Three.jsで作る、雷が光る3Dストームエフェクト

let scene, camera, renderer, cloudParticles = [],
	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;
	scene.add(new THREE.AmbientLight(0x555555));
	let directionalLight = new THREE.DirectionalLight(0xffeedd);
	directionalLight.position.set(0, 1, 0);
	scene.add(directionalLight);
	flash = new THREE.PointLight(0x062d89, 30, 500, 1.7);
	flash.position.set(200, 300, 100);
	scene.add(flash);
	// JS内での取得IDも kumonosu-canvas に変更
	const kumonosuCanvasElement = document.getElementById('kumonosu-canvas');
	renderer = new THREE.WebGLRenderer({
		canvas: kumonosuCanvasElement,
		antialias: true
	});
	scene.fog = new THREE.FogExp2(0x11111f, 0.002);
	renderer.setClearColor(scene.fog.color);
	renderer.setSize(window.innerWidth, window.innerHeight);
	// 雨の生成
	rainGeo = new THREE.Geometry();
	for (let j = 0; j < rainCount; j++) {
		let rainDrop = new THREE.Vector3(Math.random() * 400 - 200, Math.random() * 500 - 250, Math.random() * 400 - 200);
		rainDrop.velocity = 0;
		rainGeo.vertices.push(rainDrop);
	}
	let rainMaterial = new THREE.PointsMaterial({
		color: 0xaaaaaa,
		size: 0.1,
		transparent: true
	});
	rain = new THREE.Points(rainGeo, rainMaterial);
	scene.add(rain);
	// 雲の生成
	let loader = new THREE.TextureLoader();
	loader.load("https://assets.codepen.io/682745/cloud2.png", function(texture) {
		let cloudGeo = new THREE.PlaneBufferGeometry(500, 500);
		let cloudMaterial = new THREE.MeshLambertMaterial({
			map: texture,
			transparent: true
		});
		for (let i = 0; i < 25; i++) {
			let cloud = new THREE.Mesh(cloudGeo, cloudMaterial);
			cloud.position.set(Math.random() * 800 - 400, 500, Math.random() * 500 - 450);
			cloud.rotation.x = 1.16;
			cloud.rotation.y = -0.12;
			cloud.rotation.z = Math.random() * 360;
			cloud.material.opacity = 0.6;
			cloudParticles.push(cloud);
			scene.add(cloud);
		}
		animate();
	});
	window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
	cloudParticles.forEach(i => {
		i.rotation.z -= 0.002;
	});
	rainGeo.vertices.forEach(p => {
		p.velocity -= 0.1 + Math.random() * 0.1;
		p.y += p.velocity;
		if (p.y < -200) {
			p.y = 200;
			p.velocity = 0;
		}
	});
	rainGeo.verticesNeedUpdate = true;
	rain.rotation.y += 0.002;
	if (Math.random() > 0.93 || flash.power > 100) {
		if (flash.power < 100) {
			flash.position.set(Math.random() * 400, 300 + Math.random() * 200, 100);
		}
		flash.power = 50 + Math.random() * 500;
	}
	renderer.render(scene, camera);
	requestAnimationFrame(animate);
}
init();