Three.jsでオブジェクトをフェードイン／アウトする

Three.js（r79）でオブジェクトを消したり、途中から表示させたりするときに、フェードイン／アウトを使ってみる。ここでは2種類の方法を試す。

オブジェクトの準備

球体を作成する。後で透明度を変化させるので、マテリアルの作成でtransparent: trueとしておく。

// ジオメトリの作成
var geometry = new THREE.SphereGeometry( 2, 32, 16 );
// テクスチャ画像の読み込み
var texture = new THREE.TextureLoader().load( '../image/sunflower_er.jpg' );
// マテリアルの作成
var material = new THREE.MeshBasicMaterial( { map: texture, color: 0xffffff, transparent: true, opacity: 1.0 } );
// 球体作成
var mesh = new THREE.Mesh( geometry, material );
// 球体の向きを調整
mesh.rotation.z = -Math.PI/2;

以下のような球体が作成される。

方法１：マテリアルの色を変化させる

マテリアルの色（RGB）をsetIntervalを使って変化させていく。

var delta = -0.01;
setInterval( function(){
 if( material.color.r <= 0.0 ) {
  delta = 0.01;
 } else if( material.color.r >= 1.0 ) {
  delta = -0.01;
 }
 var color = material.color;
 material.color = new THREE.Color( color.r+delta, color.g+delta, color.b+delta );
}, 100);

方法２：透明度を変化させる

マテリアルの透明度をsetIntervalを使って変化させていく。

var delta = -0.01;
setInterval( function(){
 if( material.opacity < 0.0 ) {
  delta = 0.01;
 } else if( material.opacity > 1.0 ) {
  delta = -0.01;
 }
 material.opacity += delta;
}, 100);

2つの球体を交互にフェードイン／アウトさせるサンプル

• サンプルの表示