世界を変態で埋め尽くせ!!

変態アドベントカレンダー5日目担当のはがねのつるぎです。
昨日は@kuchitamaさんのでした「Vimを変態にしてみた」でした。

three.jsを使って3D空間に変態を敷き詰めていこうと思います。

3Dプログラミングは色々と手順があります。まずは、レンダラーとシーンを設定して変態空間を作ります。レンダラーとは世界の描き方のこと。変態空間がどのようにみえるか?を決定します。たとえるなら生物でいう眼の構造みたいなものでしょうか。せっかくなのでWebGLを使ってみます。

// レンダラー
var renderer = new THREE.WebGLRenderer({ antialias:true });
// 画像サイズ
renderer.setSize(500 , 500);
renderer.setClearColorHex(0x000000, 1);
// DOMに追加
document.body.appendChild(renderer.domElement);

シーンは世界そのものです。このシーンにオブジェクトを追加して変態化を進めていきます。

// シーン
var scene = new THREE.Scene();

まだ変態空間があっても見るすべがありません。
変態と言えば覗きですね。カメラを作ります。

// カメラ
var camera = new THREE.PerspectiveCamera(70, 500 / 500);
// カメラの座標
camera.position = new THREE.Vector3(0, 0, 1);
// カメラターゲット
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);

まだ変態空間は暗闇に包まれています。変態に光あれ。

// ライト
var light = new THREE.DirectionalLight(0xcccccc);
// ライト座標
light.position = new THREE.Vector3(0.577, 0.577, 0.577);
scene.add(light);
// 環境光
var ambient = new THREE.AmbientLight(0x333333);
scene.add(ambient);

ここからが本編です。
変態を敷き詰めるためにパーティクルシステムを使います。
パーティクルシステムはCGでよくある爆発や煙なんかを表現するのに便利な技術です。

まずは、コアとなるオブジェクトと変態を出現させる座標をランダムで作っていきます。


// 形状データを作成
var geometry = new THREE.Geometry();
var numParticles = 500;
for(var i = 0 ; i < numParticles ; i++) { // 座標をセット geometry.vertices.push(new THREE.Vector3( Math.random() * 2000 - 1000, Math.random() * 2000 - 1000, Math.random() * 2000 - 1000)); } [/javascript] 座標に割り当てる変態を作成します。 [javascript] // マテリアルを作成 var texture =THREE.ImageUtils.loadTexture('hentai.png'); var material = new THREE.ParticleBasicMaterial({ size: 200, color: 0xffffff, blending: THREE.AdditiveBlending, transparent: false, depthTest: false, map: texture }); [/javascript] パーティクルを使って変態を出現させます。 [javascript] // 物体を作成 var mesh = new THREE.ParticleSystem(geometry, material); mesh.position = new THREE.Vector3(0, 0, -1200); mesh.sortParticles = true; scene.add(mesh); [/javascript] 実行すると変態空間の完成です。 変態空間

ここまでで、変態空間は完成ですがせっかくなので動かしてみました。
初期化が大変みたいでChromeでも、あんまりまともに動きません。

デモ ※Chrome推奨

最先端すぎてブラウザでさえついてこれないのがはがねクオリティーです。

明日は@ponkoreさんです。よろしくお願いします。

コメントをどうぞ。

TrackBack URI :