canvas实现粒子三维空间旋转动画效果代码

代码语言:html

所属分类:粒子

代码描述:canvas实现粒子三维空间旋转动画效果代码

代码标签: canvas 粒子 三维 空间 旋转

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

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

<head>

</head>

<body>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Stats-16.js"></script>
    <script>
        console.clear();
document.addEventListener('DOMContentLoaded', function(){
	
	let stats = new Stats();
	stats.showPanel( 0 );
	stats.domElement.style.position = 'absolute';
	//let panel = stats.addPanel( new Stats.Panel( 'caption', '#ff8', '#221' ) );
	// panel.update(value, maxValue);
	document.body.appendChild( stats.domElement );
	
	/* i love DOM */
	var canvas = document.createElement('canvas');
	document.body.appendChild(canvas);
	document.body.style.padding = '0px';
	document.body.style.margin = '0px';
	document.body.style.overflow = 'hidden';
	/* i love full screen */
	var w = canvas.width = window.innerWidth;
	var h = canvas.height = window.innerHeight;
	var ctx = canvas.getContext('2d');
	
	/* i love bad short opts ^__^ like q or qwe */
	var opts = {
	};
	var gui = new dat.GUI();
	function opt(name, value, min, max){
		opts[name] = value;
		return gui.add(opts, name, min, max);
	}
	/*
		if code.before > ugly -> just.dont.read(below) // below worse...
		==== let's begin. ====
	*/
	
	class Snow{
		constructor(ctx, count){
			this.w = ctx.canvas.width;
			this.h = ctx.canvas.height;
			this.count = count;
			this.r = this.w * 1;
			this.particles = [];
			this.vel = [0.5,2,0];
			this.a .........完整代码请登录后点击上方下载按钮下载查看

网友评论0