three.js r73 　Google Chrome 46.0.2490.86 m

今回はアルファブレンドです。マテリアルで設定します。

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

class myThree
{
   private renderer = null;
   private camera = null;
   private mesh = [];
   private rotation = new THREE.Vector3( 0, 0, 0 );
   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;
      mythree.changeScene( document.getElementById( "blend" ).selectedIndex );
   }
   
   public get height(){ return this._height }
   public set height( value:number )
   {
      this.dispose();
      this._height = value;
      mythree.changeScene( document.getElementById( "blend" ).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, blend: number = THREE.NoBlending )
   {
      var texture = this.createTexture( tex );      
      var geometry = new THREE.BoxGeometry(20, 20, 0);

      // material.blending
      // THREE.NoBlending = 0;           // アルファブレンドなし
      // THREE.NormalBlending = 1;       // 線形合成
      // THREE.AdditiveBlending = 2;     // 加算合成
      // THREE.SubtractiveBlending = 3;  // 減算合成
      // THREE.MultiplyBlending = 4;     // 積算合成
      // THREE.CustomBlending = 5;       // カスタム合成

      if( blend == THREE.CustomBlending )
      {
         alert( "未実装です" );
      }
      
      var material = new THREE.MeshBasicMaterial({ color: 0xffffff,
                                                   map: texture,
                                                   blending: blend,
                                                   transparent: blend == THREE.NoBlending ? false : true,
                                                 });
      return new THREE.Mesh(geometry, material);
   }
   
   // シーン変更
   public changeScene( blend: 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/Texture1.png') ) );
      this.scene.add( ( this.mesh[1] = this.createMesh('Contents/Texture2.png', blend ) ) );
   }

   // メッシュのアニメーション
   public animationMesh( x:number, y:number, z:number )
   {
      if( this.mesh[0] != null )
      {   
         this.mesh[0].position.set( 5, 5, -5 );
      }
      
      this.rotation.z += 0.01;
      if( this.mesh[1] != null )
      {   
         this.mesh[1].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;
   }
}

var mythree = new myThree();

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

// メインループ
function main()
{
   ( function renderLoop ()
      {
         requestAnimationFrame( renderLoop );
         mythree.animationMesh( 0, 0.005, 0.005 );
         mythree.render();
      }
   )();
}