Three.js r149 で Buffer Geometry つかってみるテストその１

このあたりのつづきでThree.js r149でBuffer Geometryを試してみたときの記録です。　少し時間が経ってしまってCodePenでまた自分のコードが埋もれそうになってきたのでコードの在り処を忘れないための自分用の参照リストでもあります。　

ちなみに、なぜBuffer Geometryに手を出しはじめたのかは自分でもよく記憶していませんｗ。　なんでだったかな～？？？

CodePen Home Three.js r149 Buffer Geometry Test00 My First Buffer Geometry

CodePen Home Three.js r149 Buffer Geometry Test00 My First Buffer Geometry

最初にBuffer Geometryで星っぽい？ものを作成するコードを作成しました。　ほぼこちら「Three.jsで大量のパーティクルを表示する方法」のコードをそのまま使用させていただきました。　

CodePen Home Three.js r149 Buffer Geometry Test01 Wireframe Box Display

CodePen Home Three.js r149 Buffer Geometry Test01 Wireframe Box Display

次はワイヤーフレームの立方体を表示してみました。

CodePen Home Three.js r149 Buffer Geometry Test02 Plane Display

CodePen Home Three.js r149 Buffer Geometry Test02 Plane Display

Buffer GeometryによるPlaneです。

CodePen Home Three.js r149 Buffer Geometry Test03 Box Display

CodePen Home Three.js r149 Buffer Geometry Test03 Box Display

Buffer GeometryによるBoxです。

Three.js r149 Buffer Geometry Test04 Textured Plane Display

Three.js r149 Buffer Geometry Test04 Textured Plane Display

Buffer GeometryによるBoxにテクスチャ貼り付けてみました。

Three.js r149 Buffer Geometry Test05 Textured Box Display

Three.js r149 Buffer Geometry Test05 Textured Box Display

Buffer GeometryによるBoxにテクスチャ貼り付けてみました、その２です。

Three.js r149 Buffer Geometry Test06 Cutsom Triangular Prism

Three.js r149 Buffer Geometry Test06 Cutsom Triangular Prism

なんだっけ？

Three.js r149 Buffer Geometry Test07 Cutsom Hollowed Out Box

Three.js r149 Buffer Geometry Test07 Cutsom Hollowed Out Box

中が抜けた立方体？を作成してみました。

Three.js r149 Buffer Geometry Test08 Cutsom Triangular Prism by computeVertexNormals()

Three.js r149 Buffer Geometry Test08 Cutsom Triangular Prism by computeVertexNormals()

また違う形を作成です。　computeVertexNormals()を使えば自分でチマチマ計算・設定していたものを自動で計算・設定してくれた記憶。

Three.js r149 Buffer Geometry Test09 Cutsom Hollowed Out Box by computeVertexNormals()

Three.js r149 Buffer Geometry Test09 Cutsom Hollowed Out Box by computeVertexNormals()

computeVertexNormals()を使用しつつまた中の抜けた立方体？を作成しています。

CodePen Home Three.js r149 Buffer Geometry Test10 Cannon-es v0.20.0 Heightfield Test

CodePen Home Three.js r149 Buffer Geometry Test10 Cannon-es v0.20.0 Heightfield Test

Buffer Geometryで作成した見た目に沿った物理演算が設定されるようにしてみました。　それで紫色っぽい地面のようなものを作成しています。

次回