Three.jsソースコード読解メモ(オブジェクトの構成)_基礎知識

Three.jsのソースコード読書メモの3回目の記事です。前の 2 つの記事は主にコア オブジェクトについてでした。これらのコア オブジェクトは主にベクトル Vector3 オブジェクトと行列 Matrix4 オブジェクトを中心に展開し、空間内の 1 つの頂点の位置と変化に焦点を当てました。この記事では主に、Three.js のオブジェクトがどのように編成されるか、つまり頂点、サーフェス、マテリアルを特定のオブジェクトに組み合わせる方法について説明します。
Object::Mesh
このコンストラクターは空間内にオブジェクトを構築します。なぜ「グリッド」と呼ばれるかというと、実際には体積のあるオブジェクトは基本的に「グリッド」としてモデル化されるからです。

コードをコピー コードは次のとおりです。

THREE.Mesh = 関数 (ジオメトリ、マテリアル) ) {
THREE.Object3D.call( this );
this.geometry = geometry;
this.material = ( マテリアル !== 未定義 ) マテリアル : new THREE.MeshBasicmaterial( { color: Math. random() * 0xffffff, Wireframe: true } );
/* このセクションに関係のないその他の内容*/
}

実際には、Mesh クラスには 2 つの属性しかありません。ジオメトリを表す 形状のジオメトリ オブジェクトとマテリアルを表すマテリアル オブジェクト。ジオメトリ オブジェクトは前のブログ投稿で紹介されており、いくつかの派生クラスがこのブログ投稿で紹介されます (これらの派生クラスの構築プロセスを通じて、メッシュ オブジェクトの動作原理をより明確に理解できます)。このノートでは、派生クラスについても説明します。 Mesh オブジェクトのこれら 2 つのプロパティは互いに密接に関連しており、ジオメトリ オブジェクトの face 配列では、マテリアル属性オブジェクトとの一致に各 face オブジェクトのmaterialIndex が使用され、face オブジェクトの vertexUVs 配列が一致に使用されます。配列内の各頂点の値を順番に返します。メッシュは 1 つのマテリアル オブジェクトしか持てないことに注意してください (この設計の目的が何であるかはわかりません)。複数のマテリアルを使用する必要がある場合は、ジオメトリ自体のマテリアル アトリビュートでマテリアルを順番に初期化する必要があります。マテリアルインデックスの。
Geometry::CubeGeometry
このコンストラクターは立方体オブジェクトを作成します。

コードをコピー コードは次のとおりです。

THREE.CubeGeometry = function ( width, height 、深さ、幅セグメント、高さセグメント、深さセグメント) {
THREE.Geometry.call(this);
this.width = width;
>this. 深さ = 深さ;
var width_half = this.width / 2;
var Depth_half = this.width / 2; /
buildPlane( 'z', 'y', - 1, - 1, this. Depth, this.height, width_half, 0 ); // px
/*省略*/
function buildPlane( u , v, udir, vdir, width, height, Depth,materialIndex ) {
/*省略*/
}
this.computeCentroids();
this.mergeVertices();


コンストラクターが行う最も重要なことは buildPlane 内で行われます。この関数で最も重要なことは、スコープの操作です (上記のコード ブロックでは、スコープは this です)。これには、scope.vertices.push(vector) を呼び出して頂点をジオメトリ オブジェクトに追加します。 face) to add サーフェスがジオメトリ オブジェクトに追加され、scope.faceVertexUvs[i].push(uv) メソッドが呼び出されて、頂点に対応するマテリアル座標がジオメトリ オブジェクトに追加されます。コードの大部分は、キューブを生成するロジックに関するもので、理解しやすく、他のタイプのジオメトリ オブジェクトに拡張するのも簡単です。

コンストラクターのパラメーターには、長さ、幅、高さ、および 3 方向のセグメントの数が含まれます。いわゆるセグメンテーションとは、widthSeqments などの 3 つのパラメータがすべて 2 に設定されている場合、各面は 2×2=4 つの面として表現され、立方体全体がまさにグリッドのように 24 個の面で構成されることを意味します。

コードをコピー

コードは次のとおりです:

function buildPlane( u, v, udir, vdir, width, height, Depth,materialIndex ) {
var w, ix, iy,
gridX =scope.widthSegments,
gridY = scope.heightSegments、
width_half = 幅 / 2、
height_half = 高さ / 2、
offset =scope.vertices.length;
if ( ( u === 'x' && v === 'y' ) || ( u === 'y' && v === 'x' ) ) {w = 'z';}
else if ( ( u === 'x' && v === 'z' ) || ( u === 'z' && v === 'x' ) ) {w = 'y'; GridY =scope. DepthSegments;} else if ( ( u === 'z' && v === 'y' ) || ( u === 'y' && v === 'z' ) ) {w = 'x';gridX =scope. DepthSegments;}
var GridX1 = グリッド X 1、
gridY1 = グリッド Y 1、
segment_width = 幅 / グリッド X、
segment_height = 高さ / グリッド Y、
通常= 新しい THREE.Vector3();
通常[ w ] = 深さ > 0 ? 1 : - 1;
for ( iy = 0; iy for ( ix = 0; ix var Vector = new THREE.Vector3();
vector[ u ] = ( ix * セグメント幅 - 幅半 ) * udir;
vector[ v ] = ( iy * セグメントの高さ - 高さの半分 ) * vdir;
ベクトル[ w ] = 深さ;
scope.vertices.push(vector);
}
}
for ( iy = 0; iy < GridY; iy ) {
for ( ix = 0; ix < GridX; ix ) {
var a = ix GridX1 * そうです;
var b = ix GridX1 * ( iy 1 );
var c = ( ix 1 ) GridX1 * ( iy 1 );
var d = ( ix 1 ) グリッドX1 * iy;
var face = new THREE.Face4( a オフセット, b オフセット, c オフセット, d オフセット );
face.normal.copy(normal);
face.vertexNormals.push(normal.clone(),normal.clone(),normal.clone(),normal.clone());
face.materialIndex = マテリアルインデックス;
scope.faces.push(face);
scope.faceVertexUvs[ 0 ].push( [
new THREE.UV( ix / GridX, 1 - iy / GridY ),
new THREE.UV( ix / GridX, 1 - ( iy 1 ) /gridY )、
new THREE.UV( ( ix 1 ) /gridX、1- ( iy 1 ) /gridY )、
new THREE.UV( ( ix 1 ) /gridX、1 - iy /gridY )
] );
}
}
}

大部分のオブジェクトにある clone() メソッドを除き、CubeGeometry 以外のメソッド、他の XXXGeometry オブジェクトもこのように適用されます。このオブジェクトがデータを構成して保存し、これらのデータをどのように利用して 3 つのシーンとアニメーションを生成するかを説明します。
Geometry::CylinderGeometry
の名前考えこの建造物

代打代打次のように:

THREE .CylinderGeometry = function ( radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded ) {
/* 略 */
}

有了CubeGeometry构造関数数的基础，自己也应当円柱のジオメトリを実現できますが、次の構成関数の各パラメータの意味に注意する必要があります。radiusTop と RadiusBottom は頂部と底部の半径を示し、高さは高さを示します。 heightSegments は、全体の高さをどのように分割する必要があるか、openEnded で上面と下面を生成するかどうかを指定します。重心の種類、つまり、上円面の高さ（y軸値）は高さ/2、下円面は-高さ/2であり、この点では円柱体には差はありませんが、上下半径は異なります。違いは、このモデルの頂面と床面には face3 タイプの表面が使用され、側面には face4 タイプの表面が使用されるという点です。


复制代

代码如下: THREE.SphereGeometry = function ( radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength ){ /* 略 */ }

各パラメータの意义：radius 半径指定、widthSegments 表示“经度”分带数目、heightSegments 表示「角度」の分割数。次の 4 つのパラメータは任意であり、角度の開始値と強度の開始値を示します。この 4 つの数値の許容値はそれぞれ 0、2π、0、π であり、値を変更することにより、残余の球面を作成できます（ただし、残余の球面は鋼球の形状を調整する必要があります）。

ソース コードでは、北極と南極を除く極内部の領域は face3 型の表面であり、その他の部位はすべて face4 型の表面です。

Geometry ::PlaneGeometry

この構造関数は平面を作成します。

THREE.PlaneGeometry = function (width, height, widthSegments, heightSegments){
/* わずかに*/
}

各パラメーターの意味: width、高さ、幅セグメントの数、および高さセグメントの数。読者は、この「グリッド」の構築方法に精通している必要があります。
その他の情報はソース コードから取得されます。平面は X-Y 平面上に構築され、原点は長方形の中心点です。
Geometry::ExtrudeGeometry
このオブジェクトは現在、一般的な幾何学的形状を構築するメソッドですが、通常はモデル化されたオブジェクトを特定の形式でファイルに保存し、ローダーを通じてロードします。 , そのため、この機能を直接使う機会は少ないと思われます。しかもこの機能は中途半端な設定がオプションオブジェクトに山積みになっているようで、よく調べていませんでした。
マテリアル::マテリアル
マテリアル オブジェクトは、他のすべての種類のマテリアルのプロトタイプ オブジェクトです。

コードをコピー コードは次のとおりです。

THREE.material = function () {
THREE .materialLibrary.push( this );
this.id = THREE.materialIdCount;
this.side = THREE.FrontSide = 1;
this.transparent = false;
this.blendSrc = THREE.SrcAlphaFactor;
this.blendEquation = THREE;
this. DepthTest = true;
this.polygonOffsetFactor = 0;
this.alphaTest = 0;
this.overdraw = false; // CanvasRenderer のアンチエイリアス ギャップを修正するためのブール値
this.visible = true;
this.needsUpdate = true;


より重要な属性のいくつかを見てみましょう:
属性の不透明度は、透明度を示す 0 ～ 1 の範囲の値です。属性 transparent は、値が true の場合にのみ、透明度を使用するかどうかを指定します (transparent は、ピクセルをレンダリングするときに、レンダリングされる値と既存の値が連携してレンダリング後のピクセル値を計算することを意味します)。ミキシング効果）。

属性 Blending、blendSrc、blendDst、blendEquation は、ブレンド元 Src とブレンド画素の既存画素値 Dst のブレンド方法と重み指定方法を指定します。デフォルト (コンストラクターで割り当てられたデフォルト値など) では、新しいピクセル値は、新しい値 × アルファ古い値 × (1-アルファ) に等しくなります。

テクスチャ イメージのプロパティを表すマテリアル クラスに、最も重要なオブジェクトが存在しないのはなぜなのか、私は混乱していました。後でわかったのですが、実はマテリアルとテクスチャには違いがあるのです。あるマテリアルにはテクスチャがあるとしか言えませんが、テクスチャがないマテリアルもあります。マテリアルは形状全体のレンダリング効果に影響します。例: 「線を幅 5 ピクセル、両端を正方形、不透明な赤でレンダリングする」 この説明はマテリアルと見なすことができ、テクスチャは含まれません。

多くの Geometry オブジェクトと同様、マテリアル オブジェクトには、一般的な clone()、dellocate()、setValues() メソッド以外のメソッドはありません。以下は 2 つの最も基本的なマテリアル オブジェクトです。

material::LineBasicmaterial

このコンストラクターは、線形形状をレンダリングするためのマテリアルを作成します。




コードをコピー
コードは次のとおりです。

THREE.LineBasicmaterial = function (parameters) { THREE.material.call( this ); this.color = new THREE.Color( 0xffffff ); this.linecap = 'round'; this.linejoin = 'round'; this.vertexColors = false; this.setValues(パラメータ);属性の色と 名前が示すように、線幅は線の色と線の幅を指します (線には幅がありません。ここでの幅はレンダリングに使用されます)。

属性 linecap と linejoin は、線の端点と接続点のスタイルを指定します。

属性フォグは、このマテリアルがフォグの影響を受けるかどうかを指定します。

material::MeshBasicmaterial

このコンストラクターは、メッシュ サーフェスのレンダリングに使用されるマテリアルを作成します。




コードをコピー

コードは次のとおりです:

THREE.MeshBasicMaterial = function ( parameters ) {
THREE.Material.call( this );
this.color = new THREE.Color( 0xffffff ); // emissive
this. map = null;
this.lightMap = null;
this.specularMap = null;
this.envMap = null;
this.combine = THREE.MultiplyOperation;
this.reflectivity = 1 ;
this.refractionRatio = 0.98;
this.fog = true;
this.shading = THREE.SmoothShading;
this.wireframe = false;
this.wireframeLinewidth = 1;
this.wireframeLinecap = 'round';
this.wireframeLinejoin = 'round';
this.vertexColors = THREE.NoColors;
this.skinning = false;
this.morphTargets = false;
this.setValues( parameters );
};

The most important texture attributes appear here, including map, lightMap and specularMap, they are all texture type objects.
The attribute wireframe specifies whether the boundary line of the surface is rendered. If it is rendered, the following attributes starting with wireframe indicate how it will be rendered if the boundary line is rendered.
Texture::Texture
This constructor is used to create texture objects.

Copy code The code is as follows:

THREE.Texture = function (image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy ) {
THREE.TextureLibrary.push( this );
this.id = THREE.TextureIdCount ;
this.name = '';
this .image = image;
this.mapping = mapping !== undefined ? mapping : new THREE.UVMapping();
this.wrapS = wrapS !== undefined ? wrapS : THREE.ClampToEdgeWrapping;
this .wrapT = wrapT !== undefined ? wrapT : THREE.ClampToEdgeWrapping;
this.magFilter = magFilter !== undefined ? magFilter : THREE.LinearFilter;
this.minFilter = minFilter !== undefined ? minFilter : THREE .LinearMipMapLinearFilter;
this.anisotropy = anisotropy !== undefined ? anisotropy : 1;
this.format = format !== undefined ? format : THREE.RGBAFormat;
this.type = type !== undefined ? type : THREE.UnsignedByteType;
this.offset = new THREE.Vector2( 0, 0 );
this.repeat = new THREE.Vector2( 1, 1 );
this.generateMipmaps = true ;
this.premultiplyAlpha = false;
this.flipY = true;
this.needsUpdate = false;
this.onUpdate = null;
};

The most important attribute is image, which is a JavaScript Image type object. The first parameter passed in is the object. How to create the object will be described later. The objects following

are all optional. If left out, the default value will be filled in, and the default value is often filled in.
The attributes magFileter and minFileter specify the filtering method of the texture when zooming in and out: nearest neighbor point, bilinear interpolation, etc.
To generate a texture from the URL, you need to call Three.ImageUtils.loadTexture(paras). This function returns a texture type object. The THREE.ImageLoader.load(paras) function is called inside the function, and the THREE.Texture() constructor is called inside this function to generate the texture.