var SEPARATION = 100, AMOUNTX = 60, AMOUNTY = 40; var container; var camera, scene, renderer; var particles, particle, count = 0; var mouseX = 0, mouseY = 0; var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2; $(function () { init(); //初始化 animate(); //动画效果 change(); //验证码 }); //初始化 function init() { // container = document.createElement( 'div' ); //创建容器 // document.body.appendChild( container ); //将容器添加到页面上 container = document.createElement( 'div' ); container.classList.add("linne") document.getElementsByClassName("food-choose")[0].appendChild( container ); camera = new THREE.PerspectiveCamera( 120, window.innerWidth / window.innerHeight, 1, 1500 ); //创建透视相机设置相机角度大小等 camera.position.set(0,450,2000); //设置相机位置 scene = new THREE.Scene(); //创建场景 particles = new Array(); var PI2 = Math.PI * 2; //设置粒子的大小,颜色位置等 var material = new THREE.ParticleCanvasMaterial( { color: 0xf3bc04, vertexColors:true, size: 4, program: function ( context ) { context.beginPath(); context.arc( 0, 0, 0.01, 0, PI2, true ); //画一个圆形。此处可修改大小。 context.fill(); } } ); //设置长条粒子的大小颜色长度等 var materialY = new THREE.ParticleCanvasMaterial( { color: 0xffffff, vertexColors:true, size: 1, program: function ( context ) { context.beginPath(); //绘制渐变色的矩形 var lGrd = context.createLinearGradient(-0.008,0.25,0.016,-0.25); lGrd.addColorStop(0, 'transparent'); lGrd.addColorStop(1, 'transparent'); context.fillStyle = lGrd; context.fillRect(-0.008,0.25,0.016,-0.25); //注意此处的坐标大小 //绘制底部和顶部圆圈 context.fillStyle = "transparent"; context.arc(0, 0, 0.008, 0, PI2, true); //绘制底部圆圈 context.fillStyle = "transparent"; context.arc(0, 0.25, 0.008, 0, PI2, true); //绘制顶部圆圈 context.fill(); context.closePath(); //绘制顶部渐变色光圈 var rGrd = context.createRadialGradient(0, 0.25, 0, 0, 0.25, 0.025); rGrd.addColorStop(0, 'transparent'); rGrd.addColorStop(1, 'transparent'); context.fillStyle = rGrd; context.arc(0, 0.25, 0.025, 0, PI2, true); //绘制一个圆圈 context.fill(); } } ); //循环判断创建随机数选择创建粒子或者粒子条 var i = 0; for ( var ix = 0; ix < AMOUNTX; ix ++ ) { for ( var iy = 0; iy < AMOUNTY; iy ++ ) { var num = Math.random()-0.1; if (num >0 ) { particle = particles[ i ++ ] = new THREE.Particle( material ); console.log("material") } else { particle = particles[ i ++ ] = new THREE.Particle( materialY ); console.log("materialY") } //particle = particles[ i ++ ] = new THREE.Particle( material ); particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 ); particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 ); scene.add( particle ); } } renderer = new THREE.CanvasRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); container.appendChild( renderer.domElement ); //document.addEventListener( 'mousemove', onDocumentMouseMove, false ); //document.addEventListener( 'touchstart', onDocumentTouchStart, false ); //document.addEventListener( 'touchmove', onDocumentTouchMove, false ); window.addEventListener( 'resize', onWindowResize, false ); } //浏览器大小改变时重新渲染 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 animate() { requestAnimationFrame( animate ); render(); } //将相机和场景渲染到页面上 function render() { var i = 0; //更新粒子的位置和大小 for (var ix = 0; ix < AMOUNTX; ix++) { for (var iy = 0; iy < AMOUNTY; iy++) { particle = particles[i++]; //更新粒子位置 particle.position.y = (Math.sin((ix + count) * 0.3) * 50) + (Math.sin((iy + count) * 0.5) * 50); //更新粒子大小 particle.scale.x = particle.scale.y = particle.scale.z = ( (Math.sin((ix + count) * 0.3) + 1) * 4 + (Math.sin((iy + count) * 0.5) + 1) * 4 )*50; //正常情况下再放大100倍*1200 } } renderer.render( scene, camera ); count += 0.1; }