Threejs——ヘルパー

Threejs——ヘルパー

序章

threejs を使用する過程で、threejs には多くの組み込みのヘルパー クラスがあることがわかりました。そのため、いくつかの非常に一般的な機能を数行のコードで実装でき、シンプルで便利に使用できます。

以下は、threejs の組み込みヘルパー クラスの簡単な紹介です。

アロー (アローヘルパー)

序章

方向をシミュレートするために使用される 3D 矢印オブジェクト、矢印ヘルパー。

公式ドキュメント: ArrowHelper – three.js docs (threejs.org)

パラメータ

パラメータ	導入
dir	矢印の原点に基づく方向。単位ベクトルである必要があります。
元	矢の元
長さ	矢印の長さ. デフォルトは1です.
六角	定義済みの 16 進数の色値. デフォルトは 0xffff00.
頭の長さ	矢印の頭 (円錐) の長さ. デフォルトは、矢印の長さの 0.2 倍 (0.2 * 長さ) です。
頭幅	矢印の先端 (円錐) の幅. デフォルトは、矢印の先端の長さの 0.2 倍 (0.2 * headLength) です。

レンダリング

軸 (AxesHelper)

序章

3座標軸の簡易シミュレーション用オブジェクト
赤がX軸、緑がY軸、青がZ軸を表します。

公式ドキュメント: AxesHelper – three.js docs (threejs.org)

パラメータ

パラメータ	導入
サイズ	(オプション) 軸を表すセグメントの長さを示します. デフォルトは1です.

レンダリング

境界ボックス (BoxHelper)

序章

オブジェクトのワールド軸に沿ったバウンディング ボックスをグラフィカルに表現するために使用されるヘルパー オブジェクト。知らせ：

• 正しく動作するには、ターゲット オブジェクトに BufferGeometry が含まれている必要があるため、ターゲット オブジェクトがスプライトの場合は正しく動作しません。
• このバウンディング ボックスには、オブジェクトのすべての子オブジェクトが含まれます。

公式ドキュメント: BoxHelper – three.js docs (threejs.org)

パラメータ

パラメータ	導入
物体	(オプション) ワールド軸に合わせてバウンディング ボックスを表示するオブジェクト。
色	(省略可能) ワイヤフレーム ボックスの 16 進数の色の値。デフォルトは 0xffff00 です。

レンダリング

境界ボックス 3 (Box3Helper)

序章

3D バウンディング ボックス Box3 をシミュレートするヘルパー オブジェクト。

公式ドキュメント: Box3Helper – three.js docs (threejs.org)

パラメータ

パラメータ	導入
箱	シミュレートされた 3D バウンディング ボックス。
色	(オプション) ワイヤーフレーム ボックスの色. デフォルトは 0xffff00.

レンダリング

BoxHelper と同じ効果

カメラ (CameraHelper)

序章

カメラ錐台をシミュレートするためのヘルパー オブジェクトです。LineSegments
を使用してカメラ錐台をシミュレートします。

公式ドキュメント: CameraHelper – three.js docs (threejs.org)

パラメータ

パラメータ	導入
カメラ	シミュレートされたカメラ。

レンダリング

平行光 (DirectionalLightHelper)

序章

シーン内の DirectionalLight をシミュレートするために使用されるヘルパー オブジェクトです。これには、ライトの位置を表す平面と、ライトの方向を表す線分が含まれています。

公式ドキュメント: DirectionalLightHelper – three.js docs (threejs.org)

パラメータ

パラメータ	導入
ライト	シミュレートされている光源。
サイズ	(オプション) 平面の​​サイズ. デフォルトは1です.
色	(オプション) 色が設定されていない場合は、光源の色が使用されます。

レンダリング

グリッド (GridHelper)

序章

グリッド ヘルパー オブジェクト. グリッドは、実際には線の 2D 配列です。

公式ドキュメント: GridHelper – three.js docs (threejs.org)

パラメータ

パラメータ	導入
サイズ	グリッド サイズ。デフォルトは 10 です。
部門	グリッドの分割回数。デフォルトは 10 です。
colorCenterLine	中央線の色。値は、色の種類、16 進数、および CSS の色の名前です。デフォルトは 0x444444 です。
カラーグリッド	中央線の色。値は、色の種類、16 進数、および CSS の色の名前です。デフォルトは 0x444444 です。

レンダリング

極座標グリッド (PolarGridHelper)

序章

極グリッド ヘルパー オブジェクト. グリッドは、実際には線の 2D 配列です。

公式ドキュメント: PolarGridHelper – three.js docs (threejs.org)

パラメータ

パラメータ	導入
半径	極グリッドの半径。任意の正の数値を指定できます。デフォルトは 10 です。
セクター	グリッドが分割されるセクターの数。これは任意の正の整数にすることができます。デフォルト値は 16 です。
リング	リングの数。これは任意の正の整数にすることができます。デフォルト値は 8 です。
部門	円の分割数. 3 以上の任意の正の整数を指定できます. デフォルトは 64 です.
色1	極座標グリッドで使用される最初の色. 値は、色の種類、16 進数、および CSS の色の名前です. デフォルトは 0x444444 です
色2	極座標グリッドで使用される 2 番目の色。値は、色の種類、16 進数、および CSS の色の名前です。デフォルトは 0x888888 です。

レンダリング

半球ライトヘルパー

序章

仮想球状メッシュ メッシュ ヘルパー オブジェクトを作成して、半球光源 HemisphereLight をシミュレートします。

公式ドキュメント: HemisphereLightHelper – three.js docs (threejs.org)

パラメータ

パラメータ	導入
ライト	シミュレートされている光源。
球体サイズ	光源をシミュレートするために使用されるメッシュ サイズ。
色	(オプション) ヘルパーが割り当てられていない場合、ライトの色が使用されます。

レンダリング

平面 (PlaneHelper)

序章

平面をシミュレートするためのヘルパー オブジェクト。

公式ドキュメント: PlaneHelper – three.js docs (threejs.org)

パラメータ

パラメータ	導入
飛行機	シミュレートされている飛行機。
サイズ	(省略可能) ヘルパー オブジェクトの辺の長さ。既定値は 1 です。
六角	(オプション) ヘルパー オブジェクトの色。デフォルトは 0xffff00 です。

レンダリング

ポイントライト (PointLightHelper)

序章

点光源 PointLight をシミュレートする仮想球状メッシュ メッシュ ヘルパー オブジェクトを作成します。

公式ドキュメント: PointLightHelper – three.js docs (threejs.org)

パラメータ

パラメータ	導入
ライト	シミュレートする光源。
球体サイズ	(オプション) 球ヘルパーのサイズ. デフォルトは1です.
色	(オプション) ヘルパーが割り当てられていない場合、ライトの色が使用されます。

レンダリング

スケルトン (SkeletonHelper)

序章

スケルトン Skeleton をシミュレートするために使用されるヘルパー オブジェクトヘルパー オブジェクトは、LineBasicMaterial マテリアルを使用します。

公式ドキュメント: SkeletonHelper – three.js docs (threejs.org)

パラメータ

パラメータ	導入
物体	通常、SkinnedMesh のインスタンスです。ただし、(Object3D.childs を介して) ボーンの階層を表す場合は、Object3D の任意のインスタンスを使用できます。

レンダリング

スポットライト (SpotLightHelper)

序章

SpotLight をシミュレートするための円錐ヘルパー オブジェクト。

公式ドキュメント: https://threejs.org/docs/api/zh/helpers/SpotLightHelper.html

パラメータ

パラメータ	導入
ライト	シミュレートされたスポットライト SpotLight 。
色	(オプション) ヘルパーが割り当てられていない場合、ライトの色が使用されます。

レンダリング

エピローグ：

私は threejs の初心者です。何か間違ったことを書いたら、批判や訂正を歓迎します。