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

代码语言：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.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAMAAADzapwJAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAACTUExURQAAAP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9E7JV4AAAAxdFJOUwC8CBgDBgoEAQINJBQ5Mh0PTQkTJRY+CxkrLmtIXk5sgXORmbPN5g4nUomhot7W1e31bZdYAAAA3ElEQVQY03WRRRbDMAxE7cS2pDAzUxnuf7qmr+2unuXXE4yGsbeQSMAuQYTsJ0QBMlJ5riIJAr8FJJAqiNOiSONASfg07NSwHD8pq6pMfMcyPhzBOJi2lzVd12SebR4M2DEKaZlHN2z7cezb0D2alhTICJRju6d6mOZ5GuqTazsKiJEMfC+sz9eF8+V6rkPPDyQxEcVJ1g4Xvt7vK78MbZbEkWCg0rLpp2W9bdttXaa+KVMFDPKi6saZP7bnc3vweeyqItfj/0M0KzUHauxozGtepXusJgZdaP8ifgEGriBlYTv5YAAAAABJRU5ErkJggg==';





        function init() {

            //alert("message3");

            container = document.createElement('div'); //container：画布实例;

            document.body.appendChild(container);



            camera = new THREE.PerspectiveCamera(60, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000);

            camera.position.z = 1000;

            //camera.position.y = 50;



            scene = new THREE.Scene();

            scene.add(camera);



            renderer = new THREE.CanvasRenderer();

            renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

            var material = new THREE.ParticleBasicMaterial( {
                map: new THREE.Texture(particleImage)
            });

            //alert("message2");
.........完整代码请登录后点击上方下载按钮下载查看