おはようございます。
一ヶ月前THREE.JSを利用してFPSゲームを作ってみました。
前「THREE.JS を利用してFPSゲームを作ってみよう１」のソースをベースにして作ってみました。
いろんなスクリプトが追加されましたので全体的の流れを説明しつつファイルをアップロードします。
ご参考になるといいと思います。

「ゲームのアップデートは有ります。もっといい企画を立ってまたブログします。」

:: GAME INFO ::
TITLE : SHIFTBIRD
PROGRAM SUPPORT : kaminary
CHARACTER DESIGN : Mucho

:: HOW TO GAME ::
90秒以内にアイテムを使って鳥を撃って落とすゲームです。

:: 操作 ::
ITEM
ITEM1 = KEY [1] 連発銃
ITEM2 = KEY [2] ショットガン
ITEM3 = KEY [3] 砂時計

MOVE
上 = KEY [W]
下 = KEY [S]
左 = KEY [A]
右 = KEY [D]

ATTACK
SHOT = MOUSE [LEFT BUTTON]

//全体的な流れです。

init() 
     THREE.JS基本設定　
     Camera setting
     Render setting

     //ターゲット表示
     CrossHair setting 

contentLoad()
　　 //回りの風景
     skybox img load
　　 bullet modeling json&teture load
      
setup()
     controller setup
     skybox setup
     //キャラクター生成
     chr setup [BoxMan class (MD2CharacterComplex.js) ]
     chr camera setup

addEvent()
     mouse Event
     keyboard Event

gamestart()
     game time setup
     game option setup
     game item setup

     //鳥作り　ShiftBird.jsからclass　import
     bird make [shifrBird class (ShiftBird.js) ]


animation()
     gameStatus check
     camera position check
     controller update

     //character 移動とアニメーションアップデート
     chr update

　 　//たまと鳥のヒットテスト　
     bullets & birds hit check

source : ShiftBird.zip

SHIFTBIRD

///
このメモのブックマークレットはうごかなくなりました。
新しいバージョンのメモはこちら
「URLに対するフェイスブックのいいね数を調べるツール。その３」
///

どうも。kaminalyです。
以前、「URLに対するフェイスブックのいいね数を調べるツール。」
をメモったんですが、
それを改良したので、またメモっていますよ。

ブックマークレットの意味がよくわからず、
このツールを堪能できていない人も多いようですね。。。
このツールは「いいねどんだけ〜」のリンク部分を右クリックしてブックマークに保存したり、
ブックマークバーにリンクをドラックしてブックマークしたりしておいて、
いいね数を調べたいサイトをブラウザで開いた状態で、
保存しておいたブックマークを押す（開く）とアラートでお知らせするというものです。

ではどうぞ。

いいねどんだけ〜Ver2(超他力本願バージョン)

こちらは、@hidekiyさんのプロキシと
海外のシェアカウントサービスのsharedcount.comと
@dankogaiさんのxhrの実装をマッシュアップして作りました。
せっかくjQurey.ajaxからxhrにしたのに、IEでの挙動があやしいので、
ChromeやFirefoxなどで使うのをお勧めします。

アラートにerrorと出ることがありますが、
ページの取得に失敗したときに出るものです。
何度試してもerrorになる場合は・・・あきらめてください（汗

興味ある人は続きの開発メモもご覧下さい。
(続きを読む...)

おはようございます。
最近Three.jsの勉強をしています。
それでThree.jsを使ってFPSゲームを作ってみようかと思いまして基本的なSourceを作ってみました。

現在FPS_base.html と FPS_Control.htmlがあります。
FPS_baseは名前とおりThree.jsのrendering構成Baseで
FPS_Controlはmouseやkeyboardに反応できるeventを追加してcameraを一人称視点で変えてみました。

FPS_base

FPS_Control

Three_example.zip

sourceはこんな感じです。FPS_BASEの構成の基本にして書きました。

(function()
{
	var sw,sh,
		scene, 
		camera,fov,aspect,near,far, 
		renderer, 
		light,
		stats;
		
	var chScene, chCamera;			
	function init()
	{
		/* WINDOW SIZE */ 
		sw = WindowSize.width();
		sh = WindowSize.height();
		
		/* SCENE SETTING*/ 
		scene 	= new THREE.Scene();
		
		/* RENDERER SETTING */ 
		renderer = new THREE.WebGLRenderer({antialias : true});
		renderer.setSize(sw,sh);
		document.body.appendChild(renderer.domElement);
		
		/* CAMERA SETTING */ 
		fov 	= 45;
		aspect 	= sw/sh;
		near	= 0.1;
		far		= 10000;
		camera 	= new THREE.PerspectiveCamera(fov,aspect,near,far);
		camera.position.set(0,500,1000);
		scene.add(camera);
		
		/* LIGHT SETTING */ 
		light = new THREE.DirectionalLight( 0xffffff, 1.5 );
		light.position.set( 200, 450, 500 );
		light.shadowMapWidth = 1024;
		light.shadowMapHeight = 1024;
		light.shadowMapDarkness = 0.95;
		scene.add(light);
		
		/* STATS */
		stats = new Stats();
		stats.domElement.style.position = 'absolute';
		stats.domElement.style.top = '0px';
		stats.domElement.style.zIndex = 100;
		document.body.appendChild( stats.domElement );
		
		
		/* CROSSHAIR SECEN */
		renderer.autoClear = false;
		chScene 	= new THREE.Scene();
		chCamera 	= new THREE.PerspectiveCamera(fov,aspect,near,far);
		chCamera.position.set(0,0,0);
		chScene.add(chCamera);
		
		
		/* SETUP & RENDERING LOOP */
		setup();
		addEvent();
		requestAnimationFrame(rendering);
	}
	
	// ------------------------------------------------------------------
	// RENDERING
	// ------------------------------------------------------------------
	
	function rendering()
	{
		delta = clock.getDelta();
		
		animation();
		
		renderer.setDepthTest(true);
		renderer.clear();
		renderer.render(scene, camera);
		renderer.setDepthTest(false);
		renderer.render(chScene, chCamera);
		
		
		stats.update();
		requestAnimationFrame(rendering);
	}
	
	var lookTarget  = new THREE.Vector3(0,0,0);
	function animation()
	{
		camera.position = chr.camera.position;
		camera.rotation = chr.camera.rotation;
		//camera.lookAt(lookTarget);
		controler.update(delta);
		chr.update();
	}
	
	// ------------------------------------------------------------------
	// SETUP & ADD EVENT
	// ------------------------------------------------------------------
	var clock,delta,
		ground,chr,tower,
		controler,
		crossHair;
	function setup()
	{
		clock = new THREE.Clock();
		
		// object
		ground 		= new Ground("asset/img/grasslight-big.jpg")
		chr 		= new Cube(new THREE.Vector3(0,50,200),100,100,100,0xff0000);
		tower		= new Cube(new THREE.Vector3(0,500,0),100,1000,100,0x0000ff);
		chr.cameraOn();
		
		// controler
		controler						= new FPC_Controler(chr.camera, renderer.domElement);
		controler.movementSpeed 		= 400;
		controler.lookSpeed 			= .2;
		controler.lookVertical			= true;
		controler.constrainVertical 	= true;
		controler.verticalMin			= (30 * Math.PI) / 180;	
		controler.verticalMax 			= (100 * Math.PI) / 180;
		
		// CrossHair
		crossHair	= new CrossHair();
				
		scene.add(ground.root);
		scene.add(chr.root);
		scene.add(tower.root);
	}
	
	function addEvent()
	{
		document.addEventListener("keydown", onKeyDown, false);
		renderer.domElement.addEventListener("mousedown", onMouseDown, false);	
	}
	
	// ------------------------------------------------------------------
	// EVENT HANDLER
	// ------------------------------------------------------------------
	
	function onKeyDown(e){
		switch(e.keyCode){
			case 32: /*space*/ break;
			case 49: /*1*/ crossHair.change(0); break;
			case 50: /*2*/ crossHair.change(1); break;
			case 51: /*3*/ break;
			case 52: /*4*/ break;
			case 53: /*5*/ break;
		};
	}
	
	function onMouseDown(e){
		switch ( e.button ) {
			case 0: console.log("attack"); break;
		}
	}
	
	// ------------------------------------------------------------------
	// OBJECT CLASS
	// ------------------------------------------------------------------
	
	//GROUND CLASS
	function Ground(imgURL)
	{
		this.root = new THREE.Object3D();
		this.gt = THREE.ImageUtils.loadTexture( imgURL );
		this.gg = new THREE.PlaneGeometry( 3000, 3000 );
		this.gm = new THREE.MeshPhongMaterial( { color: 0xffffff, map: this.gt, perPixel: true } );
		
		this.mesh						= new THREE.Mesh( this.gg, this.gm );
		this.mesh.material.map.wrapS 	= this.mesh.material.map.wrapT = THREE.RepeatWrapping;
		this.mesh.rotationAutoUpdate 	= true;
		this.mesh.castShadow 			= false;
		this.mesh.material.map.repeat.set( 100, 100 );
		
		this.root.add(this.mesh);
	}
	Ground.prototype.constructor 	= Ground;
	
	//CUBE CLASS			
	function Cube(position,width,height,depth,color,imgURL)
	{
		this.geo 	= new THREE.CubeGeometry(width,height,depth);
		this.mat 	= new THREE.MeshLambertMaterial({color:color});//new THREE.MeshBasicMaterial();//
		this.mesh 	= new THREE.Mesh(this.geo, this.mat);
		this.mesh.position.set(0,0,0);
		
		this.root	= new THREE.Object3D();
		this.root.add(this.mesh);
		this.root.position.set(position.x, position.y, position.z);
	}
	Cube.prototype.update = function(){
		if(this.camera){
			if(this.camera.position.y < 50 || this.camera.position.y > 50) this.camera.position.y = 50;
			
			this.root.position = this.camera.position;
			this.root.rotation = this.camera.rotation;
		}
	}
	Cube.prototype.cameraOn = function(){
		if(!this.camera){
			this.camera = new THREE.PerspectiveCamera(45,sw/sh,.1,10000);
			this.camera.position = this.root.position;
			this.root.add(this.camera);
			console.log(this.camera)
		}	
	}
	Cube.prototype.cameraOff = function(){
		if(this.camera){
			this.root.remove(this.camera);
			this.camera = null;
		}
	}
	Cube.prototype.constructor 	= Cube;
	
	//CROSSHAIR CLASS
	function CrossHair()
	{
		this.CrossHairID 		= 0;
		this.CrossHairMaps 		= ["asset/img/crosshair1.png","asset/img/crosshair2.png"];
		this.CrossHairMap 		= THREE.ImageUtils.loadTexture( this.CrossHairMaps[this.CrossHairID]);
		
		this.CrossHair 						= new THREE.Sprite({ useScreenCoordinates: false});
		this.CrossHair.alignment 			= THREE.SpriteAlignment.center;
		this.CrossHair.useScreenCoordinates = false;
		this.CrossHair.position.z = -1000;
		
		// console.log(chScene);
		this.CrossHair.map = this.CrossHairMap;
		chScene.add(this.CrossHair);
	}
	
	CrossHair.prototype.change = function(id){
		if(this.CrossHairID == id || this.CrossHairID > this.CrossHairMaps.length - 1) return;
		this.CrossHairID 	= id;
		this.CrossHairMap 	= THREE.ImageUtils.loadTexture( this.CrossHairMaps[this.CrossHairID]);
		this.CrossHair.map = this.CrossHairMap;
		
	}
	CrossHair.prototype.constructor = CrossHair;
	
	
	
	window.addEventListener("load",init)
}).call(this);

ここで問題点がいくつかありましたけどその中で
下のsourceを見ると FPC_Controler(...)のClassは元々Three.jsのFirstPersonControlsというclassでした。
FirstPersonControlsClassはkeyboardやmouseのeventが定義されて上書きができなかったところで別のClassにして修正をしました。

controler = new FPC_Controler(chr.camera, renderer.domElement);

次の公開は来週になる予定です。
次は鳥が飛んでいて鳥を落とすまでと思います。

よろしくお願いします。

ども。kaminalyです。

先日Unibaさんと合同でWebGL(Three.js)/GLSLな勉強会をしました。
会社以外で前にでて話すってのは、なかなか機会がないので良い刺激になった。
あと、勉強会に参加してくれた方々の反応が良かったので、
ほっこりした感じで終わる事が出来た。
バンドマンだった時の寒いMCを思い出す。
もし、みんなが無反応だったら、やけ酒だったろうね。酒飲めないけど。

と、話がそれましたが、
その勉強会の時、Unibaの今野さん（@nulltask）が
Three.jsのDomRendererというニッチなネタでせめていて、
その時ふと、Three.jsを使ってサイトをぶっ壊すネタを思いつきました。
くだらないです。ええ、くだらないし、役にも立たないです。

↓をブックマークして使うとブックマークレットとして使えます。
explosion

ただ押すと、このサイトが吹っ飛びます。

まだ実装途中ですが、爆発音を付けたいと思ってます。
爆発音鳴るようにしました。

ソースはgithubに置いてあります。てけとーに遊んでみてください。
https://github.com/kaminaly/explosion.js

夏の暑さに負けるのは困るけど、勝てる見込みもなく。
こんにちは、muchoです。
以前、若きホープのきょんたろ君がアップしたHtml5 Canvas Templete ver.1を
クラスっぽく作り直してみました。
ついでにcoffee scriptで書いてみました。

Processing.jsを試してみたんですが、IE8でエラーが出て動かなかったため、
簡易Processing風なテンプレートを自作することにした次第です。
そんな背景があるので、記述の仕方はProcessingになるべくあわせています。

基本となるCanvasクラスを拡張して書くことを前提にしています。
coffee scriptだとこんな感じ

class Canvas1 extends Canvas
	#---------------------------------------------------
	setup: ->
		@fillColor = "#202020"
		@strokeColor = 'rgba(0, 0, 0, 0.1)'
		@backgroundColor = 'rgb(240, 240, 240)'

		@pi = Math.PI * 2
		@pointMin = 5
		@pointMax = 60
		@Num = 0

		@play()

	update: ->
		pointNum = (@mouseX / @width * @pointMax + @pointMin)
		@Num += (pointNum - @Num) * 0.1

	draw: ->
		@background()
		points = @getPoints()

		l = points.length
		i = 0
		while i < l
			j = i + 1
			while j < l
				@line points[i][0], points[i][1], points[j][0], points[j][1]
				j++
			i++

吐き出されたJSはこんな感じ

(function() {
  var Canvas1,
    __hasProp = {}.hasOwnProperty,
    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };

  Canvas1 = (function(_super) {

    __extends(Canvas1, _super);

    function Canvas1() {
      return Canvas1.__super__.constructor.apply(this, arguments);
    }

    Canvas1.prototype.setup = function() {
      this.fillColor = "#202020";
      this.strokeColor = 'rgba(0, 0, 0, 0.1)';
      this.backgroundColor = 'rgb(240, 240, 240)';
      this.pi = Math.PI * 2;
      this.pointMin = 5;
      this.pointMax = 60;
      this.Num = 0;
      return this.play();
    };

    Canvas1.prototype.update = function() {
      var pointNum;
      pointNum = this.mouseX / this.width * this.pointMax + this.pointMin;
      return this.Num += (pointNum - this.Num) * 0.1;
    };

    Canvas1.prototype.draw = function() {
      var i, j, l, points, _results;
      this.background();
      points = this.getPoints();
      l = points.length;
      i = 0;
      _results = [];
      while (i < l) {
        j = i + 1;
        while (j < l) {
          this.line(points[i][0], points[i][1], points[j][0], points[j][1]);
          j++;
        }
        _results.push(i++);
      }
      return _results;
    };
  this.Canvas1 = Canvas1;

}).call(this);

ソースをGithubにアップしてみました。まだ慣れてないのでgitドキドキ
https://github.com/devjam/canvas.js