ThreeCanvas实现逼真的三维雪花下雪动画效果代码

代码语言:html

所属分类:粒子

代码描述:ThreeCanvas实现逼真的三维雪花下雪动画效果代码

代码标签: 真的 三维 雪花 下雪 动画 效果

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />




    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            position: relative;
            background: url('//repo.bfw.wiki/bfwrepo/image/5ef941175a99f.png') no-repeat;
            background-position: center;
            height: 100%;
            background-size: cover;
        }

    </style>



</head>

<body id="body" onLoad="init()">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ThreeCanvas.min.js"></script>
    <script type="text/javascript" >
     Particle3D=function(material){
	THREE.Particle.call(this,material);
	this.velocity=new THREE.Vector3(0,-8,0);//速度;
	//this.velocity.rotateX(2);//旋转;
	this.gravity=new THREE.Vector3(0,0,0);//加速度;
	this.drag=1;//速度相乘系数;
};
//Particle:粒子;
//prototype:原形;
Particle3D.prototype=new THREE.Particle();
Particle3D.prototype.constructor=Particle3D;//构造函数
Particle3D.prototype.updatePhysics=function(){
	this.velocity.multiplyScalar(this.drag);//矢量相乘函数
	this.velocity.addSelf(this.gravity);//矢量相加函数
	this.position.addSelf(this.velocity);//矢量相加函数
}
var TO_RADIANS=Math.PI/180;//角度向弧度转换系数*
THREE.Vector3.prototype.rotateY=function(angle){
	//绕Y轴顺时针旋转angle;
	cosRY=Math.cos(angle*TO_RADIANS);
	sinRY=Math.sin(angle*TO_RADIANS);
	var tempz=this.z;
	var tempx=this.x;
	this.x=(tempx*cosRY)+(tempz*sinRY);
	this.z=(tempx*-sinRY)+(tempz*cosRY);
}
THREE.Vector3.prototype.rotateX=function(angle){
	//绕X轴顺时针旋转angle;
	cosRY=Math.cos(angle*TO_RADIANS);
	sinRY=Math.sin(angle*TO_RADIANS);
	var tempz=this.z;;
	var tempy=this.y;
	this.y=(tempy*cosRY)+(tempz*sinRY);
	this.z=(tempy*-sinRY)+(tempz*cosRY);
}
THREE.Vector3.prototype.rotateZ=function(angle){
	//绕Z轴顺时针旋转angle;
	cosRY=Math.cos(angle*TO_RADIANS);
	sinRY=Math.sin(angle*TO_RADIANS);
	var tempx=this.x;;
	var tempy=this.y;
	this.y=(tempy*cosRY)+(tempx*sinRY);
	this.x=(tempy*-sinRY)+(tempx*cosRY);
}
function randomRange(min,max){
	return((Math.random()*(max-min))+ min);
}
    </script>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script>

    <script type="text/javascript">

        var SCREEN_WIDTH = window.innerWidth; //

        var SCREEN_HEIGHT = window.innerHeight;

        var container;

        var particle; //粒子



        var camera;

        var scene;

        var renderer;



        var starSnow = 1;



        var particles = [];



        var particleImage = new Image();

        //THREE.ImageUtils.loadTexture( "img/ParticleSmoke.png" );

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

网友评论0