WebglのThree.js学習day 6粒子と粒子システム
3939 ワード
一、粒子、粒子システムとParticleBasicMaterial
1.パーティクル(Particle)
THREEを使ってもいいです.Particle(material)コンストラクション関数は、手動でパーティクルを作成します.入力する必要がある唯一のパラメータはマテリアルです.このマテリアルは、Patricleであってもよいし、ParticleProgramMaterialであってもよい.
THREE.Meshの大部分の属性はTHREEに用いることができる.Particle.Positionプロパティで位置決めし、scaleプロパティでスケールし、translateプロパティで相対変位を行うことができます.
このパーティクルを作成する方法では、以前に使用したWebGLRendererではなく、CanvasRendererを使用します.なぜなら、パーティクルを作成してシーンに直接追加することは、CanvasRendererにのみ有効です.
2.パーティクルシステム(ParticleSystem)
CanvasRendererクラスを使用しない限り、パーティクルシステムクラスでパーティクルを表示する必要があります.ParticleSystemクラスのコンストラクション関数には、2つのパラメータがあります.1つのジオメトリと1つのマテリアルです.マテリアルはパーティクルに色を付けたりテクスチャを追加したりしますが、ジオメトリはパーティクルをどこに配置するかを指定します.各頂点、すなわちジオメトリを定義する各点は、粒子の形態で表示されます.
3.ParticleBasicMaterial
次の表は、ParticleBasicMaterialオブジェクトのすべてのレッスンのプロパティ設定の説明です.
名前
説明
color
ParticleSystemオブジェクト内のすべてのパーティクルの色.vertexColorsプロパティがtrueに設定され、ジオメトリのcorsプロパティも指定されている場合、このプロパティは無視されます.デフォルトは0 xffffffです
map
このアトリビュートを使用すると、パーティクルにマテリアルを適用できます.
size
パーティクルのサイズを指定します.既定は1です.
sizeAnnutation
falseに設定すると、すべてのパーティクルが同じ色になります.trueに設定し、ジオメトリのcors配列にも値がある場合は、カラー配列の値を使用します.デフォルトはfalseです.
vertexColors
通常、ParticleSystemのすべての粒子は同じ色を持っています.このアトリビュートをtrueに設定し、ジオメトリのcors配列にも値がある場合は、カラー配列の値を使用します.デフォルトはfalseです.
opacity
transparentアトリビュートとともに使用して、パーティクルの透明度を設定します.デフォルトは1(不透明)
transparent
trueに設定すると、パーティクルはレンダリング時にopacityアトリビュートの値に基づいて透明度を決定します.デフォルトはfalse
blending
パーティクルをレンダリングするときの融合モード
fog
パーティクルがシーンフォグ効果の影響を受けるかどうか.デフォルトはtrue
二、HTML 5キャンバスでパーティクルをフォーマットする
1.CanvasRendererクラスでHTML 5キャンバスを使う
ParticleCanvasMaterialでは、HTML 5キャンバスの出力結果をパーティクルのテクスチャとして使用できます.このマテリアルは、特にCanvasRenderer用に作成され、このレンダラーでのみ使用できます.まず、このマテリアルで設定できるプロパティを見てみましょう.
名前
説明
color
パーティクルの色.特定の融合モードによって、キャンバスの色に影響を与えることができます.
program
これはキャンバスコンテキストをパラメータとする関数です.に表示されます.この関数を呼び出すと、キャンバスコンテキストに出力が生成され、その出力はパーティクルとして表示されます.
opacity
パーティクルの透明度.デフォルトは1、不透明
transparent
パーティクルが透明かどうか.opacityプロパティとともに使用
blending
融合モード.
2.WebGLRendererでHTML 5キャンバスを使う
WebGLRendererクラスを使用するには、ParticleBasicMaterialを使用して同じ目的を達成するしかありません.ParticleBasicMaterialにはmap(マップ)アトリビュートがあります.mapアトリビュートを使用すると、パーティクルにテクスチャをロードできます.このテクスチャはThree.jsではHTML 5キャンバスの出力でも構いません.
三、テクスチャを使用してパーティクルをフォーマットする
ここでは、ピクチャを使用してパーティクルをより直接フォーマットする方法を紹介します.Three.jsではTHREEを用いることができる.ImageUtils.loadTexture()メソッドは、外部のピクチャをロードします.
四、精霊を使う(THREE.Sprite)
THREE.Spriteクラスは、次の2つの目的で使用できます.は、画面座標に基づいて移動、位置決め、およびスケーリング可能なオブジェクトを作成する.3 Dシーンで覆われているように、フラットディスプレイ(Head-Up display、略称HUD)を作成することができます. CanvasRendererのTHREEと同様に、3 D空間で移動可能な粒子のようなオブジェクトを作成する.Particle.3 Dシーンの精霊は、看板とも呼ばれることがあります.看板とは精霊がいつもレンズに向かっていることを指し、高速道路の看板がいつも運転手に向かっているようだ.
次のように、spriteオブジェクトを作成するには、マテリアルを読み込む必要があります.
SpriteMaterialのプロパティを見てみましょう.
名前
説明
Color
パーティクルのカラー(Particle Color)
Map
精霊が使用するテクスチャ
sizeAnnutation
falseに設定すると、レンズからの遠近は精霊の大きさに影響しません.デフォルトはtrue
opacity
スプライトの透明度を設定します.デフォルトは1(不透明)
blending
スプライトをレンダリングするときに使用される融合モード
fog
スプライトがシーンフォグ効果の影響を受けるかどうか.デフォルトはtrue
useScreenCoordinates
trueに設定すると、精霊の位置は絶対位置です.原点は画面左上
scaleByViewport
スプライトのサイズは、ビューウィンドウのサイズによって異なります.trueに設定すると、スプライトのサイズ=ピクチャ幅/ビューウィンドウの高さになります.falseに設定すると、スプライトのサイズ=ピクチャ幅/1.0
alignment
スプライトがスケールされると(scaleプロパティを使用)、スプライトがスケールを開始する場所を指定します.この属性をTHREEとすると.SpriteAlignment.精霊のスケーリングを増やしたり減らしたりすると、精霊の左上隅が動かなくなります.
uvOffset
uvOffsetアトリビュートと組み合わせて、スプライトで使用するテクスチャを選択します.
uvScale
uvScaleアトリビュートと組み合わせて、スプライトで使用するテクスチャを選択
このマテリアルでdepthTestプロパティとdepthWriteプロパティを設定することもできます.参考day 3
1.パーティクル(Particle)
THREEを使ってもいいです.Particle(material)コンストラクション関数は、手動でパーティクルを作成します.入力する必要がある唯一のパラメータはマテリアルです.このマテリアルは、Patricleであってもよいし、ParticleProgramMaterialであってもよい.
THREE.Meshの大部分の属性はTHREEに用いることができる.Particle.Positionプロパティで位置決めし、scaleプロパティでスケールし、translateプロパティで相対変位を行うことができます.
このパーティクルを作成する方法では、以前に使用したWebGLRendererではなく、CanvasRendererを使用します.なぜなら、パーティクルを作成してシーンに直接追加することは、CanvasRendererにのみ有効です.
2.パーティクルシステム(ParticleSystem)
CanvasRendererクラスを使用しない限り、パーティクルシステムクラスでパーティクルを表示する必要があります.ParticleSystemクラスのコンストラクション関数には、2つのパラメータがあります.1つのジオメトリと1つのマテリアルです.マテリアルはパーティクルに色を付けたりテクスチャを追加したりしますが、ジオメトリはパーティクルをどこに配置するかを指定します.各頂点、すなわちジオメトリを定義する各点は、粒子の形態で表示されます.
3.ParticleBasicMaterial
次の表は、ParticleBasicMaterialオブジェクトのすべてのレッスンのプロパティ設定の説明です.
名前
説明
color
ParticleSystemオブジェクト内のすべてのパーティクルの色.vertexColorsプロパティがtrueに設定され、ジオメトリのcorsプロパティも指定されている場合、このプロパティは無視されます.デフォルトは0 xffffffです
map
このアトリビュートを使用すると、パーティクルにマテリアルを適用できます.
size
パーティクルのサイズを指定します.既定は1です.
sizeAnnutation
falseに設定すると、すべてのパーティクルが同じ色になります.trueに設定し、ジオメトリのcors配列にも値がある場合は、カラー配列の値を使用します.デフォルトはfalseです.
vertexColors
通常、ParticleSystemのすべての粒子は同じ色を持っています.このアトリビュートをtrueに設定し、ジオメトリのcors配列にも値がある場合は、カラー配列の値を使用します.デフォルトはfalseです.
opacity
transparentアトリビュートとともに使用して、パーティクルの透明度を設定します.デフォルトは1(不透明)
transparent
trueに設定すると、パーティクルはレンダリング時にopacityアトリビュートの値に基づいて透明度を決定します.デフォルトはfalse
blending
パーティクルをレンダリングするときの融合モード
fog
パーティクルがシーンフォグ効果の影響を受けるかどうか.デフォルトはtrue
二、HTML 5キャンバスでパーティクルをフォーマットする
1.CanvasRendererクラスでHTML 5キャンバスを使う
ParticleCanvasMaterialでは、HTML 5キャンバスの出力結果をパーティクルのテクスチャとして使用できます.このマテリアルは、特にCanvasRenderer用に作成され、このレンダラーでのみ使用できます.まず、このマテリアルで設定できるプロパティを見てみましょう.
名前
説明
color
パーティクルの色.特定の融合モードによって、キャンバスの色に影響を与えることができます.
program
これはキャンバスコンテキストをパラメータとする関数です.に表示されます.この関数を呼び出すと、キャンバスコンテキストに出力が生成され、その出力はパーティクルとして表示されます.
opacity
パーティクルの透明度.デフォルトは1、不透明
transparent
パーティクルが透明かどうか.opacityプロパティとともに使用
blending
融合モード.
2.WebGLRendererでHTML 5キャンバスを使う
WebGLRendererクラスを使用するには、ParticleBasicMaterialを使用して同じ目的を達成するしかありません.ParticleBasicMaterialにはmap(マップ)アトリビュートがあります.mapアトリビュートを使用すると、パーティクルにテクスチャをロードできます.このテクスチャはThree.jsではHTML 5キャンバスの出力でも構いません.
三、テクスチャを使用してパーティクルをフォーマットする
ここでは、ピクチャを使用してパーティクルをより直接フォーマットする方法を紹介します.Three.jsではTHREEを用いることができる.ImageUtils.loadTexture()メソッドは、外部のピクチャをロードします.
四、精霊を使う(THREE.Sprite)
THREE.Spriteクラスは、次の2つの目的で使用できます.
次のように、spriteオブジェクトを作成するには、マテリアルを読み込む必要があります.
var spriteMaterial = new THREE.SpriteMaterial({
opacity:opacity,
color:color,
transparent:transparent,
useScreenCoordinates:true,
map:getTexture()
});
var sprite = new THREE.Sprite(spriteMaterial);SpriteMaterialのプロパティを見てみましょう.
名前
説明
Color
パーティクルのカラー(Particle Color)
Map
精霊が使用するテクスチャ
sizeAnnutation
falseに設定すると、レンズからの遠近は精霊の大きさに影響しません.デフォルトはtrue
opacity
スプライトの透明度を設定します.デフォルトは1(不透明)
blending
スプライトをレンダリングするときに使用される融合モード
fog
スプライトがシーンフォグ効果の影響を受けるかどうか.デフォルトはtrue
useScreenCoordinates
trueに設定すると、精霊の位置は絶対位置です.原点は画面左上
scaleByViewport
スプライトのサイズは、ビューウィンドウのサイズによって異なります.trueに設定すると、スプライトのサイズ=ピクチャ幅/ビューウィンドウの高さになります.falseに設定すると、スプライトのサイズ=ピクチャ幅/1.0
alignment
スプライトがスケールされると(scaleプロパティを使用)、スプライトがスケールを開始する場所を指定します.この属性をTHREEとすると.SpriteAlignment.精霊のスケーリングを増やしたり減らしたりすると、精霊の左上隅が動かなくなります.
uvOffset
uvOffsetアトリビュートと組み合わせて、スプライトで使用するテクスチャを選択します.
uvScale
uvScaleアトリビュートと組み合わせて、スプライトで使用するテクスチャを選択
このマテリアルでdepthTestプロパティとdepthWriteプロパティを設定することもできます.参考day 3