3 つの J は、カラーカスタム変換を実装します

Three.js 公式ドキュメントのチュートリアルでは、立方体 BoxGeometry、円柱 CylinderGeometry、球体 SphereGeometry など、さまざまなタイプの 3D ポリゴンを構築するための多くの Geomerty が提供されています。Three.js ジオメトリクラスは、基本クラス BufferGeometry セカンダリパッケージに基づいています。Geometry encapsulates vertex data such as vertex position, vertex normal vector normal, vertex color color, vertex texture coordinate uv, vertex index index and other vertex data in native WebGL. Geometry vertices の詳細については、公式ドキュメントまたは B ステーションビデオを参照してください。練習。

ただし、頂点の概念に初めて触れ、ネイティブ WebGL の基礎を持っていない場合は、ジオメトリ頂点の概念をよりよく理解できるように、ネイティブ WebGL チュートリアルを学習することをお勧めします。この分析は、モデルオブジェクトの重要な要素の 1 つであるジオメトリを構成します。この記事では、Geometry の主なプロパティを 3 つの部分で紹介します。

- ジオメトリプロパティ: 基本プロパティとアニメーションプロパティ

基本属性

Vertices (頂点): ジオメトリの頂点位置を表すコア属性で、サーフェスの構築や法線の計算などに使用されます。

色: 着色のための色計算

面: 頂点インデックス、面法線、面頂点法線などのデータを含む、異なる頂点で構成された面で、通常は三角形の面 (3 点インデックスを含む)

ジオメトリメソッド: 基本的な変換、メッシュと頂点の結合、ポイントサーフェスの法線、バウンディングボックス/球体の計算

BufferGeometry と DirectGeometry(Todo)

アニメーションプロパティ

アニメーションは、Three で 2 つの方法で実装できます。

モーフアニメーション: 各フレームの状態は、指定された頂点配列によって決定され、指定された頂点位置配列の補間値がアニメーションに適用されます (一般的に使用されます)。

ボーンスキンアニメーション: 各フレームの状態でのメッシュの頂点の位置は、指定されたさまざまなボーンとその重みによって決定されます。

- Geometry のその他のプロパティ

Vertices 頂点位置アトリビュート (Geometry はジオメトリをカスタマイズします)

Three Js ドキュメントの下にある立方体 BoxGeometry、球体 SphereGeometry、円柱 CylinderGeometry などの three.js ジオメトリクラスのソースコードを読んでください。これらのジオメトリのソースコードは、さまざまなタイプのジオメトリの頂点を生成するための関連アルゴリズムであることがわかります。

頂点の位置の xyz 座標は、Three.js の 3 次元ベクトル Vector3 と Three.js ジオメトリペアで表すことができます。Geometry の属性 .vertices は、頂点位置の座標のコレクションを表します。

var geo = new THREE.Geometry();
//位置坐标
var point = new THREE.Vector3(18, 20, 4);

色の頂点の色アトリビュート

頂点の色は、Three.js ジオメトリオブジェクト Geometry の属性 color によって設定され、色の値は Color オブジェクトによって定義できます。頂点のカラーデータは、Color オブジェクトによって表され、その後、geometry.colors 属性値配列の要素として使用されます。もちろん、点モデルのPointsや線モデルのLineジオメトリの頂点カラー属性は、色の頂点データでも構いませんが、メッシュモデルのMeshであれば、三角形の面オブジェクトFace3で色を定義する必要があります。

const color = new THREE.Color(1, 1, 1);
const material = new THREE.MeshBasicMaterial({color: 0xffff00})

- ジオメトリのメインカテゴリ

キュービックバッファージオメトリ (BoxGeometry)

BoxGeometry は四角形の元のジオメトリクラスであり、通常、コンストラクターによって提供される幅、高さ、および深さのパラメーターを使用して、立方体または台形を作成します。

コード例:

代码示例
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

循環バッファージオメトリ (CircleGeometry)

CircleGeometry は、中心点の周りのいくつかの三角形セグメントから構築され、指定された半径だけ拡張されたユークリッドジオメトリの単純な形状です。セグメントの数が正多角形の辺の数に依存する正多角形を作成するためにも使用できます。

const geometry = new THREE.CircleGeometry( 5, 32 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const circle = new THREE.Mesh( geometry, material );
scene.add( circle );

コーンバッファジオメトリ (ConeGeometry)

円錐ジオメトリを生成するためのクラス。

const geometry = new THREE.CircleGeometry( 5, 32 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const circle = new THREE.Mesh( geometry, material );
scene.add( circle );

関数のスクリーンショットを実行する

4. まとめ

以上が Three js に組み込まれている一部の 3D ポリゴンの主な構築方法です. 詳細は公式サイトのドキュメントマニュアルを参照してください ( https://threejs.org/docs/?q=geo#api/zh/geometries /CircleGeometry )。さまざまなオブジェクトを使い始めるための詳細な説明と方法があると同時に、3 つの js の他のオブジェクトと属性を巧みに使用して、カラフルな色とクールな特殊効果を構築する必要があります。例えば、下図のようにforループやランダム関数の手法を柔軟に使っていろいろな三角形を作ってみたりして、とても面白かったです。もちろん、私はフロントエンドの 3D GIS の知識を学び始めたばかりで、まだ多くの面で多くの欠点があります。皆さんが私を啓発することをためらわないことを願っています! !

この記事で参照されているブロガーへの主なリンクは次のとおりです。

http://www.yanhuangxueyuan.com/doc/Three.js/Geometry.html

https://yrq110.me/post/front-end/deep-in-threejs-core-objects-ii-geometry/