demo.html

﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Three.js实现3D空间粒子效果</title>
    <style type="text/css">
        body {
            background-color: #000000;
            margin: 0px;
            overflow: hidden;
        }
    </style>
    <script src="scripts/three.js"></script>
    <script>
            //定义应用所需的组件:相机,场景,渲染器
            var camera, scene, renderer;
            //跟踪鼠标的位置
            var mouseX = 0, mouseY = 0;
            //定义存储粒子的数组
            var particles = [];

            //数据初始化
            function init(){
                //相机参数：
                //四个参数值分别代表:视野角：fov  纵横比：aspect 相机离视体最近的距离：near 相机离视体最远的距离：far
                camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 1, 4000 );
                //设置相机位置,默认位置为:0,0,0.
                camera.position.z = 1000;

                //声明场景
                scene = new THREE.Scene();
                //将相机装加载到场景
                scene.add(camera);

                //生成渲染器的对象
                renderer = new THREE.CanvasRenderer();
                //设置渲染器的大小
                renderer.setSize( window.innerWidth, window.innerHeight );
                //追加元素
                document.body.appendChild(renderer.domElement);
                //调用自定义的生成粒子的方法
                makeParticles();
                //添加鼠标移动监听
                document.addEventListener('mousemove',onMouseMove,false);
                //设置间隔调用update函数,间隔次数为每秒30次
                setInterval(update,1000/30);
            }

            function update() {
                //调用移动粒子的函数
                updateParticles();
                //重新渲染
                renderer.render( scene, camera );
            }

            //定义粒子生成的方法
            function makeParticles(){

                var particle,material;
                //粒子从Z轴产生区间在-1000到1000
                for(var zpos=-1000;zpos<1000;zpos+=20){
                    //we make a particle material and pass through the colour and custom particle render function we defined.
                    material = new THREE.ParticleCanvasMaterial( { color: 0xffffff, program: particleRender } );
                    //生成粒子
                    particle = new THREE.Particle(material);
                    //随即产生x轴,y轴,区间值为-500-500
                    particle.position.x = Math.random()*1000-500; //math . random()返回一个浮点数在0和1之间
                    particle.position.y = Math.random()*1000-500;
                    //设置z轴
                    particle.position.z = zpos;
                    //scale it up a bit
                    particle.scale.x = particle.scale.y = 10;
                    //将产生的粒子添加到场景
                    scene.add(particle);
                    //将粒子位置的值保存到数组
                    particles.push(particle);
                }
            }

            //定义粒子渲染器
            function particleRender( context ) {
                //获取canvas上下文的引用
                context.beginPath();
                // and we just have to draw our shape at 0,0 - in this
                // case an arc from 0 to 2Pi radians or 360º - a full circle!
                context.arc( 0, 0, 1, 0,  Math.PI * 2, true );
                //设置原型填充
                context.fill();
            }


            //移动粒子的函数
            function updateParticles(){

                //遍历每个粒子
                for(var i=0; i<particles.length; i++){
                    particle = particles[i];
                    //设置粒子向前移动的速度依赖于鼠标在平面Y轴上的距离
                    particle.position.z +=  mouseY * 0.1;
                    //如果粒子Z轴位置到1000,将z轴位置设置到-1000
                    if(particle.position.z>1000){
                         particle.position.z-=2000;
                    }
                }
            }

            //鼠标移动时调用
            function onMouseMove(event){
                mouseX = event.clientX;
                mouseY = event.clientY;
            }
    </script>
</head>
<body onload="init()">
</body>
</html>