![見出し画像](https://assets.st-note.com/production/uploads/images/99891018/rectangle_large_type_2_7299d4842adf388cc05ba133376ed4a4.png?width=800)
Three.js r149 で Buffer Geometry つかってみるテストその1
このあたりのつづきでThree.js r149でBuffer Geometryを試してみたときの記録です。 少し時間が経ってしまってCodePenでまた自分のコードが埋もれそうになってきたのでコードの在り処を忘れないための自分用の参照リストでもあります。
ちなみに、なぜBuffer Geometryに手を出しはじめたのかは自分でもよく記憶していませんw。 なんでだったかな~???
CodePen Home Three.js r149 Buffer Geometry Test00 My First Buffer Geometry
CodePen Home Three.js r149 Buffer Geometry Test00 My First Buffer Geometry
![](https://assets.st-note.com/img/1678399824063-j9B7TkmSyn.png?width=800)
最初に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
![](https://assets.st-note.com/img/1678398555304-TCoQu75plO.png?width=800)
次はワイヤーフレームの立方体を表示してみました。
CodePen Home Three.js r149 Buffer Geometry Test02 Plane Display
CodePen Home Three.js r149 Buffer Geometry Test02 Plane Display
![](https://assets.st-note.com/img/1678398696196-v8ShME03rL.png)
Buffer GeometryによるPlaneです。
CodePen Home Three.js r149 Buffer Geometry Test03 Box Display
CodePen Home Three.js r149 Buffer Geometry Test03 Box Display
![](https://assets.st-note.com/img/1678398860043-NS8gy9YjgQ.png)
Buffer GeometryによるBoxです。
Three.js r149 Buffer Geometry Test04 Textured Plane Display
Three.js r149 Buffer Geometry Test04 Textured Plane Display
![](https://assets.st-note.com/img/1678398951213-6D8VwvRE2i.png)
Buffer GeometryによるBoxにテクスチャ貼り付けてみました。
Three.js r149 Buffer Geometry Test05 Textured Box Display
Three.js r149 Buffer Geometry Test05 Textured Box Display
![](https://assets.st-note.com/img/1678399033817-yfmLWg5wa5.png)
Buffer GeometryによるBoxにテクスチャ貼り付けてみました、その2です。
Three.js r149 Buffer Geometry Test06 Cutsom Triangular Prism
Three.js r149 Buffer Geometry Test06 Cutsom Triangular Prism
![](https://assets.st-note.com/img/1678399126351-FkmdNCubXz.png)
なんだっけ?
Three.js r149 Buffer Geometry Test07 Cutsom Hollowed Out Box
Three.js r149 Buffer Geometry Test07 Cutsom Hollowed Out Box
![](https://assets.st-note.com/img/1678399247967-1JZGSAyjPY.png)
中が抜けた立方体?を作成してみました。
Three.js r149 Buffer Geometry Test08 Cutsom Triangular Prism by computeVertexNormals()
Three.js r149 Buffer Geometry Test08 Cutsom Triangular Prism by computeVertexNormals()
![](https://assets.st-note.com/img/1678399331393-qYNJLT2Znz.png)
また違う形を作成です。 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()
![](https://assets.st-note.com/img/1678399546867-lh0SX5wTVQ.png)
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
![](https://assets.st-note.com/img/1678399739877-BiWaSIIq9q.png?width=800)
Buffer Geometryで作成した見た目に沿った物理演算が設定されるようにしてみました。 それで紫色っぽい地面のようなものを作成しています。
次回
この記事が気に入ったらサポートをしてみませんか?