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 タイプの表面が使用されるという点です。
复制代
各パラメータの意义：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
このコンストラクターは、線形形状をレンダリングするためのマテリアルを作成します。
コードをコピー
コードは次のとおりです。
属性 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.
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.
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
