InstancedCylinderMeshDesc
InstancedCylinderMeshDesc クラスは、GPU インスタンシングを使用して複数の円柱インスタンスをレンダリングするメッシュです。すべての円柱が 1 つのジオメトリとマテリアルを共有し、1 回の描画コールで高パフォーマンスにレンダリングされます。InstancedMeshDesc を継承しています。
以下のプロパティに加えて、基底クラスの共通プロパティ（position、rotation、scale、matrix、matrixWorld、geodetic、pickable、visible）が利用できます。詳細は MeshDesc を参照してください。
テーパー比（radiusTop / radiusBottom）、セグメント、キャップ、弧（arc）はすべてのインスタンス間で共有され、共有ジオメトリに焼き込まれます。インスタンスごとの radius は XZ 方向の均等乗数、height は Y 方向の乗数として、共有された単位高さジオメトリに適用されます。
共有マテリアルプロパティ
Section titled “共有マテリアルプロパティ”すべてのインスタンスに適用される共有プロパティです。cylinders 設定オブジェクト内で指定します。
radiusTop
Section titled “radiusTop”Type: number
Description: 共有円柱ジオメトリの上端の半径を指定します。
Default: 1
radiusBottom
Section titled “radiusBottom”Type: number
Description: 共有円柱ジオメトリの下端の半径を指定します。
Default: 1
radialSegments
Section titled “radialSegments”Type: number
Description: 円周方向のセグメント数を指定します。
Default: 16
heightSegments
Section titled “heightSegments”Type: number
Description: 高さ方向のセグメント数を指定します。
Default: 1
openEnded
Section titled “openEnded”Type: boolean
Description: 端面（キャップ）を開いた状態にするかどうかを指定します。
Default: false
thetaStart
Section titled “thetaStart”Type: number
Description: 円形断面の開始角（ラジアン）を指定します。
Default: 0
thetaLength
Section titled “thetaLength”Type: number
Description: 円形断面の角度範囲（ラジアン）を指定します。
Default: Math.PI * 2
Type: Color
Description: すべてのインスタンスの基本色を Color インスタンスで指定します。
Default: new Color().setStyle("#ffffff")
emissiveColor
Section titled “emissiveColor”Type: Color
Description: エミッシブ（自己発光）色を指定します。
Default: new Color().setHex(0x000000)
emissiveIntensity
Section titled “emissiveIntensity”Type: number
Description: エミッシブの強度を指定します。
Default: 0
opacity
Section titled “opacity”Type: number
Description: 不透明度を指定します。0.0（完全透明）から 1.0（完全不透明）の範囲です。
Default: 1
transparent
Section titled “transparent”Type: boolean
Description: 透明度を有効にするかどうかを指定します。
Default: false
castShadow
Section titled “castShadow”Type: boolean
Description: インスタンスが影を落とすかどうかを指定します。
Default: false
receiveShadow
Section titled “receiveShadow”Type: boolean
Description: インスタンスが影を受けるかどうかを指定します。
Default: false
インスタンスごとのプロパティ (CylinderChildConfig)
Section titled “インスタンスごとのプロパティ (CylinderChildConfig)”各円柱インスタンスのプロパティを children 配列内で指定します。
radius
Section titled “radius”Type: number
Description: 均等な半径乗数（radiusTop と radiusBottom の両方をスケールします）。インスタンス行列の XZ スケールとしてエンコードされます。scale.x と scale.z が指定された場合は乗算されます。
Default: 1
height
Section titled “height”Type: number
Description: 高さの乗数。インスタンス行列の Y スケールとしてエンコードされます。scale.y が指定された場合は乗算されます。
Default: 1
Type: Color | undefined
Description: このインスタンス固有の色を指定します。共有マテリアルの color を上書きします。
Default: undefined
position
Section titled “position”Type: { x: number, y: number, z: number } | undefined
Description: 親グループに対するローカル位置を指定します。
Default: { x: 0, y: 0, z: 0 }
rotation
Section titled “rotation”Type: { x: number, y: number, z: number } | undefined
Description: ローカル回転（オイラー角、ラジアン）を指定します。
Default: undefined
Type: { x: number, y: number, z: number } | undefined
Description: ローカルスケールを指定します。radius および height と乗算されます。
Default: { x: 1, y: 1, z: 1 }
matrix
Section titled “matrix”Type: Matrix4 | undefined
Description: 事前計算された変換行列を指定します。設定時は position、rotation、scale は無視されます。
Default: undefined
Config
Section titled “Config”effectIds
Section titled “effectIds”Type: string[] (optional)
Description: このメッシュに適用する selective effect descriptor の ID 配列を指定します。
pickable
Section titled “pickable”Type: boolean (optional)
Description: 個々のインスタンスのピッキングを有効にします。
Default: false
インスタンス管理
Section titled “インスタンス管理”InstancedMeshDesc から継承される、動的なインスタンス管理メソッド:
handle.ref.add(config)
Section titled “handle.ref.add(config)”新しいインスタンスを追加し、そのインデックスを返します。
const index = handle.ref.add({ position: { x: 100, y: 0, z: 0 }, radius: 20, height: 30, color: new Color().setHex(0xffff00),});handle.ref.removeAt(index)
Section titled “handle.ref.removeAt(index)”指定インデックスのインスタンスを削除します。swap-with-last による O(1) 削除のため、順序は保持されません。
handle.ref.updateAt(index, config)
Section titled “handle.ref.updateAt(index, config)”指定インデックスのインスタンスを部分更新します。
handle.ref.clear()
Section titled “handle.ref.clear()”すべてのインスタンスを削除します。
handle.ref.replaceAll(configs)
Section titled “handle.ref.replaceAll(configs)”全インスタンスをバッチ置換します。
handle.ref.count
Section titled “handle.ref.count”アクティブなインスタンス数を取得します。
基本的な使い方
Section titled “基本的な使い方”import ThreeView, { Color } from "@navaramap/three";import { InstancedCylinderMeshDesc } from "@navaramap/three-default-descs";
const view = new ThreeView();view.registerMesh("cylinders", InstancedCylinderMeshDesc);await view.init();
const handle = view.addMesh<InstancedCylinderMeshDesc>({ cylinders: { color: new Color().setHex(0xffffff), castShadow: true, children: [ { position: { x: 0, y: 0, z: 0 }, radius: 10, height: 20, color: new Color().setHex(0xff0000) }, { position: { x: 30, y: 0, z: 0 }, radius: 15, height: 10, color: new Color().setHex(0x00ff00) }, { position: { x: 60, y: 0, z: 0 }, radius: 5, height: 40, color: new Color().setHex(0x0000ff) }, ], }, position: { x: 0, y: 0, z: 6378137 },});radiusTop または radiusBottom のいずれかを 0 にするとコーン形状になります:
view.addMesh<InstancedCylinderMeshDesc>({ cylinders: { radiusTop: 0, radiusBottom: 1, children: [ { position: { x: 0, y: 0, z: 0 }, radius: 10, height: 30 }, ], }, position: { x: 0, y: 0, z: 6378137 },});