three.js r73 　Google Chrome 46.0.2490.86 m

今回はスプライトです。画面いっぱいにテクスチャーを表示します。

例によってTypeScript使ってますので PlayGround サイトでJavaScriptにコンパイルしてください。

class myThree
{
   private renderer = null;
   private camera = null;
   private scene = null;
   
   private _width: number = 600;
   private _height: number = 400;
   
   public get width(){ return this._width }
   public set width( value:number )
   {
      this.dispose();
      this._width = value;
      this.changeScene();
   }
   
   public get height(){ return this._height }
   public set height( value:number )
   {
      this.dispose();
      this._height = value;
      this.changeScene();
   }

   // レンダラ―作成
   private createRenderer()
   {
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize( this.width, this.height );
      renderer.setClearColor(0xf0f0ff);
      
      return renderer;
   }

   // カメラ作成
   private createCamera()
   {
        var znear = 1.0;
        var zfar = 1000.0;
        var camera = new THREE.OrthographicCamera( this.width / - 2, this.width / 2, this.height / 2, this.height / - 2, znear, zfar );
        // カメラ視点
        camera.position.set(0.0, 0.0, 50.0);
        // カメラの注視点
        camera.lookAt(new THREE.Vector3(0, 0, 0));

        return camera;
   }

   // テクスチャー作成
   private createTexture( path: string )
   {
      var loader = new THREE.TextureLoader();
      var texture = loader.load( path );

      // テクスチャーフィルター
      texture.minFilter = THREE.LinearMipMapLinearFilter;
      texture.magFilter = THREE.LinearMipMapLinearFilter;

      // 異方性フィルタリング
      texture.anisotropy = 16;
      
      return texture;
   }
   
   // シーン作成
   private createScene()
   {
      var scene = new THREE.Scene();
      return scene;
   }
   
   // シーン変更
   public changeScene()
   {
      if( this.renderer == null )
      {
         this.renderer = this.createRenderer();
         document.body.appendChild( this.renderer.domElement );
      }

      if( this.camera == null )
      {
         this.camera = this.createCamera();
      }
      
      this.scene = this.createScene();

      var texture = this.createTexture( 'Contents/back.png' );
      var material = new THREE.SpriteMaterial({ color: 0xffffff, map: texture });
      var mesh = new THREE.Sprite(material);
      mesh.scale.set( this.width, this.height, 1);
      this.scene.add( mesh );
   }

   // レンダリング
   public render()
   {
      if( this.renderer != null )
      {
         this.renderer.render( this.scene, this.camera );      
      }
   }
   
   public dispose()
   {
      if( this.renderer != null )
      {
         var element = document.getElementsByTagName("canvas");
         if( element.length == 1 )
         {
            document.body.removeChild(element[0]);
         }
         this.renderer.dispose();
         this.renderer = null;
      }
      this.camera = null;
   }
}

class FPS
{
   private dispFrame: number = 0;
   private frame: number = 0;
   private timer: Date = new Date();
   
   public getFPS()
   {
      var now = new Date();
      
      // 1秒経過してない
      if( now.getTime() - this.timer.getTime() < 1000 )
      {
         this.frame++;
      }
      else
      {
         this.timer = now;
         this.dispFrame = this.frame;
         this.frame = 0;
      }
      
      return this.dispFrame;
   }
}

var mythree = new myThree();
var fps = new FPS();

// シーンの初期化
function initialize()
{
   if( mythree != null )
   {
      mythree.changeScene();
   }
}

// メインループ
function main()
{
   ( function renderLoop ()
      {
         requestAnimationFrame( renderLoop );
         
         mythree.render();

         // FPS表示
         var frame = fps.getFPS();
         $("div.fps").html( "FPS：" + frame );         
      }
   )();
}