做有态度的前端团队

网易FEG前端团队

ThreeJS学习笔记(四)——粒子系统

作者: ubee 日期: 2016-10-09

152625

粒子和粒子系统

Threejs中制作粒子效果有两种方法：

THREE.Particle和THREE.ParticleSytem
如果项目使用的渲染器是CanvasRenderer,直接使用THREE.Particle创建完粒子即可直接添加到scene中，但是如果使用的是WebGlRenderer渲染器，那就要先创建THREE.ParticleSytem对象，然后通过这个对象来创建粒子。PatricleSystem具有形体和材质两个属性，因此使用PatitlceSystem可以借助几何体生成粒子，也可以先创建一个由多个点构成的形体后去创建粒子。

THREE.Sprite
使用Sprite来制作粒子可以实现以下两种需求：
1.使用useScreenCoordinates:true属性建立一个独立于camera摄像范围之外的元素，即它在屏幕上的位置不受camera的位置和焦点变化而变化，它的移动、定位、缩放是基于屏幕坐标的。
2.与在CanvasRenderer渲染器中使用THREE.Particle创建粒子一样，不需要使用THREE.ParticleSytem，在WebGlRenderer渲染器中使用THREE.Sprite创建的粒子可以直接添加到scene中。三维场景中创建出来的精灵总是面向镜头的。即不会有倾斜变形之类透视变化，只有近大远小的变化

THREE.Sprite

Sprite默认大小是1*1,设置Sprite大小需要使用scale进行缩放
Sprite的样式通过参数meterial定义，参数meterial是使用THREE.SpriteMaterial类创建的材质对象
THREE.SpriteMaterial可以定义精灵的颜色和纹理，纹理对象可以调用new THREE.ImgesUtils.loadTexture(url)来引用一张图片作为纹理，也可以调用new THREE.CanvasTexture( canvas)，使用动态绘制的canvas图作为纹理。

创建粒子

以下创建了300个粒子，并添加到场景中，

function createCanvas(width,height,colors){//创建画布并绘制精灵纹理
    var canvas = document.createElement( 'canvas' );
    canvas.width = width;
    canvas.height = height;
    var context = canvas.getContext( '2d' );
    var gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
    colors.forEach(function(color){
        gradient.addColorStop( color.start, color.rgba );
    })
    context.fillStyle = gradient;
    context.fillRect( 0, 0, canvas.width, canvas.height );
    return canvas;
}
function createMaterial(width,height,colors){//使用画布创建材质
    var sprite=createCanvas(width,height,colors);
    return new THREE.SpriteMaterial( {
        map: new THREE.CanvasTexture( sprite ),
        blending: THREE.AdditiveBlending,//使用饱和度叠加的混和模式渲染粒子
        overdraw:false,
        depthWrite:false
    } )
}
function initParticle( particle,coord,size) {//初始化粒子
    var particle = this instanceof THREE.Sprite ? this : particle;
    if(!size&&size!=0){
        size=Math.random() * 32 + 16;
    }
    particle.scale.x = particle.scale.y = size;
    particle.position.set( coord.x,coord.y,coord.z);    
}
function addParticles(){//在场景中创建300个粒子，粒子颜色在一个范围内随机取色
    for ( var i = 0; i < 300; i++ ) {
        var deepColor=Math.round(Math.random()*255);
        var lightColor=Math.round(deepColor*32/255);
        var material= createMaterial(32,32,[
            {start:0,rgba:'rgba(255,255,255,1)'},
            {start:0.2,rgba:'rgba(0,'+deepColor+','+Math.round(Math.random()*80+175)+',1)'},
            {start:0.4,rgba:'rgba(0,'+lightColor+',64,1)'},
            {start:1,rgba:'rgba(0,0,0,1)'}
        ])
        var particle = new THREE.Sprite(material);
        initParticle(particle, new THREE.Vector3(Math.random()*500-250,Math.random()*500-250,Math.random()*500-250),10);
        scene.add( particle );
    }
}
 
            

执行addParticles()后如图所示

粒子的运动

粒子的缓运动画也都是用上一节说到的Tween.js实现的。循环动画示例如下：

function addParticles(){//在场景中创建300个粒子，粒子颜色在一个范围内随机取色
            for ( var i = 0; i < 300; i++ ) {
                var deepColor=Math.round(Math.random()*255);
                var lightColor=Math.round(deepColor*32/255);
                var material= createMaterial(32,32,[
                    {start:0,rgba:'rgba(255,255,255,1)'},
                    {start:0.2,rgba:'rgba(0,'+deepColor+','+Math.round(Math.random()*80+175)+',1)'},
                    {start:0.4,rgba:'rgba(0,'+lightColor+',64,1)'},
                    {start:1,rgba:'rgba(0,0,0,1)'}
                ])
                var particle = new THREE.Sprite(material);
                _particles.push(particle);
                //initParticle(particle, new THREE.Vector3(Math.random()*500-250,Math.random()*500-250,Math.random()*500-250),10)
                var delay=i*5;
                particleLoop(particle,delay)
                scene.add( particle );
            }
        }
        function initParticle( particle,coord,size) {
            var particle = this instanceof THREE.Sprite ? this : particle;
            if(!size&&size!=0){
                size=Math.random() * 32 + 16;
            }
            particle.scale.x = particle.scale.y = size;
            particle.position.set( coord.x,coord.y,coord.z);    
        }
         
        function particleLoop(particle,delay){
            particle=particle?particle:this;
            initParticle(particle,new THREE.Vector3(Math.random()*500-250,Math.random()*500-250,Math.random()*500-250),Math.random() * 12 + 8);
            delay=delay?delay:0;
            new TWEEN.Tween( particle )
                .delay( delay )
                .to( {}, 1500 )
                .onComplete(particleLoop )
                .start();
            new TWEEN.Tween( particle.position )
                .delay( delay )
                .to( { x:0, y: 0, z: 0}, 1500 )
                .start();
            new TWEEN.Tween( particle.scale )
                .delay( delay )
                .to( { x: 8, y: 8 }, 1500 )
                .start();
        }

本章示例

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <div id="space"></div>  
    <script   src="https://code.jquery.com/jquery-1.12.4.min.js"   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="   crossorigin="anonymous"></script>
    <script src="../js/lib/threejs/three.js"></script>
     
    <script src="../js/lib/threejs/OrbitControls.js"></script>
    <script src="../js/lib/Tween.js"></script>
    <script>
         
 
            var container, stats; 
 
            var camera, scene, renderer,_particles=[];
 
            var mouseX = 0, mouseY = 0;
 
            var windowHalfX = window.innerWidth / 2;
            var windowHalfY = window.innerHeight / 2;
 
 
            init();
            animate();
            var mesh;
 
            function init() {
 
                container = document.getElementById("space")
                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 5000 );
                camera.position.set(0, 0, 1500);
                 
                scene = new THREE.Scene();
 
                var ambient = new THREE.AmbientLight( 0xffffff );
                scene.add( ambient );
                 
                 
                var directionalLight = new THREE.DirectionalLight( 0xffffff );
                directionalLight.position.set( -5, 5, 5).normalize();
                scene.add( directionalLight );
 
                var pointlight = new THREE.PointLight(0x63d5ff, 1, 200); 
                pointlight.position.set(0, 0, 200);
                scene.add( pointlight );                
                var pointlight2 = new THREE.PointLight(0xffffff, 1, 200); 
                pointlight2.position.set(-200, 200, 200);
                scene.add( pointlight2 );
                var pointlight3 = new THREE.PointLight(0xffffff, 1.5, 200); 
                pointlight3.position.set(-200, 200, 0);
                scene.add( pointlight3 );
 
                var controls = new THREE.OrbitControls(camera,container);
            //controls.maxPolarAngle=1.5;
            //controls.minPolarAngle=1;
            controls.enableDamping=true;
            controls.enableKeys=false;
            controls.enablePan=false;
            controls.dampingFactor = 0.1;
            controls.rotateSpeed=0.1;
    //      controls.enabled = false;
            //controls.minDistance=1000;
            //controls.maxDistance=3000;
                 
                 
                 
                var path = "../resource/sky/";
                var format = '.jpg';
                var urls = [
                        path + 'px' + format, path + 'nx' + format,
                        path + 'py' + format, path + 'ny' + format,
                        path + 'pz' + format, path + 'nz' + format
                    ];
                var skyMaterials = []; 
                for (var i = 0; i < urls.length; ++i) {
                    var loader = new THREE.TextureLoader();
                    loader.setCrossOrigin( this.crossOrigin );
                    var texture = loader.load( urls[i], function(){}, undefined, function(){} );
                     
                    skyMaterials.push(new THREE.MeshBasicMaterial({
                        //map: THREE.ImageUtils.loadTexture(urls[i], {},function() { }), 
                        map: texture, 
                        overdraw: true,
                        side: THREE.BackSide,
                        //transparent: true,
                        //needsUpdate:true,
                        premultipliedAlpha: true
                        //depthWrite:true,
                         
        //              wireframe:false,
                    })
                    ); 
                     
                } 
                 
                var cube = new THREE.Mesh(new THREE.CubeGeometry(500, 500,500), new THREE.MeshFaceMaterial(skyMaterials)); 
                cube.name="sky";
                //scene.add(cube);
                addParticles();
                 
                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                container.appendChild( renderer.domElement );
 
                document.addEventListener( 'mousemove', onDocumentMouseMove, false );
                window.addEventListener( 'resize', onWindowResize, false );
 
            }
            function createCanvas(width,height,colors){//创建画布并绘制精灵纹理
                var canvas = document.createElement( 'canvas' );
                canvas.width = width;
                canvas.height = height;
                var context = canvas.getContext( '2d' );
                var gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
                colors.forEach(function(color){
                    gradient.addColorStop( color.start, color.rgba );
                })
                context.fillStyle = gradient;
                context.fillRect( 0, 0, canvas.width, canvas.height );
                return canvas;
            }
            function createMaterial(width,height,colors){//使用画布创建材质
                var sprite=createCanvas(width,height,colors);
                return new THREE.SpriteMaterial( {
                    map: new THREE.CanvasTexture( sprite ),
                    blending: THREE.AdditiveBlending,
                    overdraw:false,
                    depthWrite:false
                } )
             }
            function addParticles(){//在场景中创建300个粒子，粒子颜色在一个范围内随机取色
                for ( var i = 0; i < 300; i++ ) {
                    var deepColor=Math.round(Math.random()*255);
                    var lightColor=Math.round(deepColor*32/255);
                    var material= createMaterial(32,32,[
                        {start:0,rgba:'rgba(255,255,255,1)'},
                        {start:0.2,rgba:'rgba(0,'+deepColor+','+Math.round(Math.random()*80+175)+',1)'},
                        {start:0.4,rgba:'rgba(0,'+lightColor+',64,1)'},
                        {start:1,rgba:'rgba(0,0,0,1)'}
                    ])
                    var particle = new THREE.Sprite(material);
                    _particles.push(particle);
                    //initParticle(particle, new THREE.Vector3(Math.random()*500-250,Math.random()*500-250,Math.random()*500-250),10)
                    var delay=i*5;
                    particleLoop(particle,delay)
                    scene.add( particle );
                }
            }
            function initParticle( particle,coord,size) {
                var particle = this instanceof THREE.Sprite ? this : particle;
                if(!size&&size!=0){
                    size=Math.random() * 32 + 16;
                }
                particle.scale.x = particle.scale.y = size;
                particle.position.set( coord.x,coord.y,coord.z);    
            }
             
            function particleLoop(particle,delay){
                particle=particle?particle:this;
                initParticle(particle,new THREE.Vector3(Math.random()*500-250,Math.random()*500-250,Math.random()*500-250),Math.random() * 12 + 8);
                delay=delay?delay:0;
                new TWEEN.Tween( particle )
                    .delay( delay )
                    .to( {}, 1500 )
                    .onComplete(particleLoop).onStart(function(){
                         
                    })
                    .start();
                new TWEEN.Tween( particle.position )
                    .delay( delay )
                    .to( { x:0, y: 0, z: 0}, 1500 )
                    .start();
                     
                new TWEEN.Tween( particle.scale )
                    .delay( delay )
                    .to( { x: 8, y: 8 }, 1500 )
                    .start();
 
            }
            function onWindowResize() {
 
                windowHalfX = window.innerWidth / 2;
                windowHalfY = window.innerHeight / 2;
 
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize( window.innerWidth, window.innerHeight );
 
            }
 
            function onDocumentMouseMove( event ) {
 
                mouseX = ( event.clientX - windowHalfX ) / 2;
                mouseY = ( event.clientY - windowHalfY ) / 2;
 
            }
 
            //
 
            function animate() {
 
                requestAnimationFrame( animate );
                render();
                TWEEN.update();
            }
 
            function render() {
                 
//              camera.position.x += ( mouseX - camera.position.x ) ;
//              camera.position.y += ( mouseY - camera.position.y ) ;
 
//              for(var i=0,len=_particles.length; i<len; i++){
//                  var posx=(Math.random()-0.5)*1;
//                  var posy=(Math.random()-0.5)*1;
//                  var posz=(Math.random()-0.5)*1;
//                  _particles[i].position.set(_particles[i].position.x+posx,_particles[i].position.y+posy,_particles[i].position.z+posz)
//              }
                camera.lookAt( scene.position );
 
                renderer.render( scene, camera );
 
            }
 
    </script>
    </body>
</html>