three.jsで宇宙空間に浮かぶモノリスをつくる

javascriptは出来ませんが、three.jsには興味があったので少しやってみました。

script.js

var main = function () {
//カメラを作る
  var scene , camera,
  width  = window.innerWidth,
  height = window.innerHeight,
  mouseX = 0, mouseY = 0,
  windowHalfX = window.innerWidth / 2,
  windowHalfY = window.innerHeight / 2,
  renderer,mesh,
  particles, particle, particleCount;

  //初期設定
  init();
  //アニメーション
  animate();

  function init() {
    scene = new THREE.Scene();
    // fog設定 カラーとフォグの濃さ
    scene.fog = new THREE.FogExp2( 0x000000, 0.002);
    camera = new THREE.PerspectiveCamera( 75, width / height, 1, 10000 );
    camera.position.z = 100;

      //レンダラーをDOM上に設置する
      //WebGLRendererだとリッチな処理になります。CanvasRendererは雑な処理になります。
      renderer = new THREE.WebGLRenderer({antialias: true});
      //renderer = new THREE.CanvasRenderer();

      renderer.setSize( width, height );
      document.body.appendChild( renderer.domElement );

      //光源を追加する
      var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.2 );
      directionalLight.position.set( 100, 300, 100 );
      scene.add( directionalLight );

      //物体を追加する
      var geometry = new THREE.CubeGeometry( 20, 30, 5 );
      var material = new THREE.MeshPhongMaterial( { color: 0xffffff } );
      mesh = new THREE.Mesh( geometry, material );
      scene.add( mesh );

      //表示する
      renderer.render( scene, camera );

      //パーティクル
      makeParticles();

      document.addEventListener( 'mousemove', onDocumentMouseMove, false );
  }
  
  //アニメーション
  function animate() {
    requestAnimationFrame( animate );
    camera.position.x += ( mouseX - camera.position.x ) * .05;
    camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
    camera.lookAt( scene.position );
    renderer.render( scene, camera );
  }
  
  //マウスの動き
  function onDocumentMouseMove(event) {
    mouseX = event.clientX - windowHalfX;
    mouseY = event.clientY - windowHalfY;
  }


  function makeParticles(){       
    // パーティクルの数
    particleCount = 10000;
    particles = new THREE.Geometry();
    // マテリアルの設定
    var material = new THREE.PointCloudMaterial({
        color: 0xFFFFFF,
        size: 0.1,
        //map: texture,
        transparent: true
    });

    // パーティクルの位置の設定
    for (var i = 0; i < particleCount; i++) {
      var px = Math.random() * 1000 - 500,
          py = Math.random() * 1000 - 500,
          pz = Math.random() * 1000 - 500;
      particle = new THREE.Vector3( px, py, pz);

      // パーティクルのべロシティの設定
      particle.velocity = new THREE.Vector3( 0, -Math.random(), 0 );
      particles.vertices.push( particle );
    }
    pointCloud = new THREE.PointCloud( particles, material );
    // パーティクルの深さを毎フレームソート
    pointCloud.sortParticles = true;
    scene.add( pointCloud );
    }
};

基本的な部分は割愛しますが、ざっくりいうとmain関数にsceneやcamera、particleやmouseの変数を宣言し、初期設定の関数としてinit()関数を記述し定義します。ここでカメラ、光源、モノリスを配置します。また、その中に星を散りばめる関数makeParticles()も定義します。
animate()関数はマウスに合わせてカメラの位置がグリグリかわる関数です。

three.jsはレンダラーが2種類ありますが、WebGLRendererのほうにしました。
（これくらいだとどっちでも処理速度はかわらないと思いますが、、、）

WebGLRenderer
リッチな処理ができて、綺麗なレンダリングが出来ますが、重くなります。
また対応ブラウザも多くはなってますが、IEのことを考えると実務で使用するにはまだ先かもしれません。
コードは以下。
renderer = new THREE.WebGLRenderer({antialias: true});

CanvasRenderer
GPUが使えないスペックの低い環境でも動作します。
コードは以下。
renderer = new THREE.CanvasRenderer();

で、仕上がりがこれです。
http://codepen.io/uchu-jin/pen/yNZvEa?editors=001