A Pen by naoyashiga.

index.html

<script type="text/javascript" src="http://jsdo.it/lib/three.js-r60/js"></script>

script.js

/*-----------------------------------
    グローバル変数
-----------------------------------*/
var camera,geometry,scene,renderer;

var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;

var mouseX = 0,mouseY = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

var particles,particle,count = 0;

//パーティクルの個数
var AMOUNTX = 50;
var AMOUNTY = 50;
//パーティクル同士の間隔
var SEPARATION = 50;

var theta = 0;

init();
animate();

function init(){
     //レンダラーを生成
    renderer = new THREE.CanvasRenderer();
    //レンダラーのサイズを設定
    renderer.setSize(SCREEN_WIDTH,SCREEN_HEIGHT);
    //レンダラーをDOMに追加
    document.body.appendChild(renderer.domElement);

    //カメラの作成
    Perspective_Camera();
    //Orthographic_Camera();
    
    //シーンを生成
    scene = new THREE.Scene();

    particles = new Array();

    //パーティクル作成
    Particle();

    //レンダラーをレンダリングする
    renderer.render(scene,camera);

    document.addEventListener("mousemove",onDocumentMouseMove,false);
    document.addEventListener("touchstart",onDocumentTouchStart,false);
    document.addEventListener("touchmove",onDocumentTouchMove,false);

}

function onDocumentMouseMove(event){
    mouseX = event.clientX - windowHalfX;
    mouseY = event.clientY - windowHalfY;
}

/*-----------------------------------
    新しくスクリーンに指が触れた場合に発生するイベント
-----------------------------------*/
function onDocumentTouchStart(event){

    if(event.touches.length > 1){//触れている指の本数をチェック
        //スクロール停止
        event.preventDefault();

        mouseX = event.touches[0].pageX - windowHalfX;
        mouseY = event.touches[0].pageY - windowHalfY;
    }
}

/*-----------------------------------
    スクリーンに触れている指をスライドさせた場合に発生するイベント
-----------------------------------*/
function onDocumentTouchMove(event){
    if(event.touches.length == 1){//触れている指の本数をチェック
        //スクロール停止
        event.preventDefault();

        mouseX = event.touches[0].pageX - windowHalfX;
        mouseY = event.touches[0].pageY - windowHalfY;
    }
}

/*-----------------------------------
    平行投影カメラ
-----------------------------------*/
function Orthographic_Camera(){
    //平行投影カメラにおける視線の領域
    var left = - SCREEN_WIDTH;
    var right = SCREEN_WIDTH;
    var top = SCREEN_HEIGHT;
    var bottom = - SCREEN_HEIGHT;

    //クリッピング手前
    var near = -2000;
    //クリッピング奥
    var far = 1000;

    //平行投影カメラを生成
    camera = new THREE.OrthographicCamera( left , right , top , bottom , near , far );
    camera.position.x = 200;
    camera.position.y = 100;
    camera.position.z = 200;
}

/*-----------------------------------
    透視投影カメラ
-----------------------------------*/
function Perspective_Camera(){
    //画角
    var fov = 75;
    //縦横比
    var aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
    //クリッピング手前
    var near = 1;
    //クリッピング奥
    var far = 10000;
    
    //カメラを生成
    camera = new THREE.PerspectiveCamera(fov,aspect,near,far);

    camera.position.x = 1000;
    camera.position.z = 100;
}
/*-----------------------------------
    Particleを作成
-----------------------------------*/
function Particle(){
    //パーティクルの形
    var PI2 = Math.PI * 2;
    var arcX = 0;
    var arcY = 0;
    var radius = 1;
    var startAngle = 0;
    var endAngle = PI2;
    var anticlockwise = true;
    var particleColor = 0xffffff;
    

    var material = new THREE.ParticleCanvasMaterial({
        color:particleColor,
        program:function(context){
            context.beginPath();
            context.arc(arcX, arcY, radius, startAngle, endAngle, anticlockwise);
            context.closePath();
            context.fill();
        }
    });


    var i = 0;

    for(var ix = 0;ix < AMOUNTX;ix++){
        for(var iy = 0;iy < AMOUNTY;iy++){
            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);
        }
    }

}

/*-----------------------------------
    アニメーション繰り返し処理
-----------------------------------*/
function animate(){
    render();
    //繰り返し処理
    requestAnimationFrame(animate);
}

/*-----------------------------------
    カメラの視点アニメーション
-----------------------------------*/
function render(){
    //カメラの位置
    camera.position.x += (mouseX - camera.position.x) * .05;
    camera.position.y += (-mouseY + 200 - camera.position.y) * .05;
    camera.position.z = mouseX;
    //注視点を指定
    camera.lookAt(scene.position);

    var i = 0;

    for(var ix = 0;ix < AMOUNTX;ix++){
        for(var iy = 0;iy < AMOUNTY;iy++){
            particle = particles[i++];
            //円を描きながら回る
            particle.position.x = Math.cos((ix + theta)*0.3)*100;
            particle.position.y = Math.sin((ix + theta)*0.3)*100 + Math.sin((iy + theta)*0.3)*100;
            
            particle.scale.x = particle.scale.y = Math.sin((ix + theta)*0.3) + Math.sin((iy + theta)*0.3)*2;

        }
    }
    
    theta += 0.1;

    renderer.render(scene,camera);
}

style.css

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #000;
  font: 30px sans-serif;
}

WebGL-Wave&Rotate-particles.markdown

WebGL Wave&Rotate particles

I used sin and cos when I changed the position of particles.

A Pen by naoyashiga on CodePen.

License.