three.js r73 　Google Chrome 46.0.2490.86 m

今回はカリングです。マテリアルで設定します。setFaceCulling()というメソッドもありますが、結局マテリアルの設定値で上書きされるようです。

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

class myThree
{
   private renderer = null;
   private camera = null;
   private mesh = [];
   private scene = null;
   private rotation = new THREE.Vector3( 0, 0, 0 );
   private _width: number = 600;
   private _height: number = 400;
   
   public get width(){ return this._width }
   public set width( value:number )
   {
      this.dispose();
      this._width = value;
      mythree.changeScene( document.getElementById( "CullFace" ).selectedIndex );
   }
   
   public get height(){ return this._height }
   public set height( value:number )
   {
      this.dispose();
      this._height = value;
      mythree.changeScene( document.getElementById( "CullFace" ).selectedIndex );
   }

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

   // カメラ作成
   private createCamera()
   {
      const fov:number = 60;
      const aspect:number = this.width / this.height;
      const znear:number = 1.0;
      const zfar:number = 1000.0;
      var camera = new THREE.PerspectiveCamera( fov, aspect, 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;
   }

   // メッシュ作成
   private createMesh( tex: string, cullFace: number )
   {
      var texture = this.createTexture( tex );      
      var geometry = new THREE.PlaneGeometry(30, 30, 0);

      var material = new THREE.MeshBasicMaterial({ color: 0xffffff,
                                                   map: texture,
                                                   side: cullFace
                                                 });
      return new THREE.Mesh(geometry, material);
   }
   
   // シーン変更
   public changeScene( cullFace: number )
   {
      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();

      this.scene.add( ( this.mesh[0] = this.createMesh('Contents/Texture.png', cullFace) ) );
      
      this.rotation = new THREE.Vector3( 0, 0, 0 );      
   }

   // メッシュのアニメーション
   public animationMesh()
   {
      if( this.mesh[0] != null )
      {   
         this.mesh[0].position.set( 0, 0, -5 );
         
         this.rotation.y += 0.01;
         this.mesh[0].rotation.set( this.rotation.x, this.rotation.y, this.rotation.z );
      }
   }

   // レンダリング
   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( document.getElementById( "CullFace" ).selectedIndex );
   }
}

// メインループ
function main()
{
   ( function renderLoop ()
      {
         requestAnimationFrame( renderLoop );
         mythree.animationMesh();
         mythree.render();
         
         // FPS表示
         var frame = fps.getFPS();
         $("div.fps").html( "FPS：" + frame );         
      }
   )();
}