Three.js 소스 코드 읽기 노트(객체 구성 방법)

Three.js 소스코드 읽기 노트의 세 번째 글입니다. 이전 두 기사는 주로 핵심 객체에 관한 것이었습니다. 이러한 핵심 객체는 주로 벡터 벡터3 객체와 행렬 매트릭스4 객체를 중심으로 회전하며 공간에서 단일 정점의 위치와 변화에 중점을 둡니다. 이 기사에서는 Three.js의 객체가 어떻게 구성되는지, 즉 정점, 표면 및 재질을 특정 객체로 결합하는 방법을 주로 설명합니다.
Object::Mesh
이 생성자는 공간에 객체를 구성합니다. "그리드"라고 불리는 이유는 실제로 볼륨이 있는 객체는 기본적으로 "그리드"로 모델링되기 때문입니다.

코드 복사 코드는 다음과 같습니다.

 
THREE.Mesh = 함수(기하학, 재료 ) { 
THREE.Object3D.call( this ); 
this.geometry = 기하학; 
this.material = (material !== undefine ) ? 재질 : new THREE.MeshBasicMaterial( { color: Math. random() * 0xffffff, wireframe: true } ); 
/* 이 섹션과 관련 없는 다른 콘텐츠*/ 
} 

실제로 Mesh 클래스에는 두 가지 속성만 있습니다. 기하학을 나타내는 모양의 기하학 객체와 재료를 나타내는 물질 객체입니다. 지오메트리 객체는 이전 블로그 게시물에서 소개되었으며, 이번 블로그 게시물에서는 일부 파생 클래스를 소개합니다. (이러한 파생 클래스의 구성 과정을 통해 Mesh 개체의 작동 원리를 더 명확하게 이해할 수 있습니다.) 파생 클래스도 이 노트에서 다룹니다. Mesh 객체의 이 두 가지 속성은 서로 밀접하게 연관되어 있습니다. 기하학 객체의 면 배열에서는 각 면 객체의 MaterialIndex를 사용하여 재질 속성 객체를 일치시키고, 면 객체의 vertexUVs 배열을 사용하여 일치시킵니다. 차례로 배열의 각 꼭지점의 값입니다. 메시는 하나의 재료 객체만 가질 수 있다는 점은 주목할 가치가 있습니다(이 디자인의 목적이 무엇인지 모르겠습니다). 여러 재료를 사용해야 하는 경우 재료는 지오메트리 자체의 재료 속성에서 순서대로 초기화되어야 합니다. MaterialIndex의
Geometry::CubeGeometry
이 생성자는 큐브 개체를 생성합니다.

코드 복사 코드는 다음과 같습니다.

 
THREE.CubeGeometry = 함수(너비, 높이 , 깊이, 너비 세그먼트, 깊이 세그먼트 ) { 
THREE.Geometry.call( this ); 
varscope = this; 
this.height = height; >this.깊이 = 깊이; 
var width_half = this.width / 2; 
var height_half = this.height / 2; 
var 깊이_half = this.length / 2; / 
buildPlane( 'z', 'y', - 1, - 1, this.length, this.height, width_half, 0 ) // px 
/* 생략*/ 
function buildPlane( u , v, udir, vdir, 너비, 높이, 깊이, MaterialIndex ) { 
/* 생략*/ 
} 
this.computeCentroids() 
this.mergeVertices() 
 }; 

 
생성자가 수행하는 가장 중요한 작업은 buildPlane에 있습니다. 이 함수에서 가장 중요한 점은 다음을 포함하는 범위 작업입니다(위 코드 블록에서 범위는 다음과 같습니다). 면)을 추가하여 기하 객체에 표면을 추가하고, 해당 정점에 해당하는 재질 좌표를 기하 객체에 추가하기 위해scope.faceVertexUvs[i].push(uv) 메서드를 호출합니다. 대부분의 코드는 큐브 생성 논리에 관한 것인데, 이는 이해하기 쉽고 다른 유형의 지오메트리 개체로 확장하기 쉽습니다. 

생성자의 매개변수에는 길이, 너비, 높이 및 세 방향의 세그먼트 수가 포함됩니다. 소위 분할이란 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 = 범위.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 = 범위.깊이세그먼트;} else if ( ( u === 'z' && v === 'y' ) || ( u === 'y' && v === 'z' ) ) {w = 'x';gridX = 범위.깊이세그먼트;} 
var GridX1 = 그리드X 1, 
gridY1 = 그리드Y 1, 
segment_width = 너비 / 그리드X, 
segment_height = 높이 / 그리드Y, 
normal = 새로운 THREE.Vector3(); 
일반[ w ] = 깊이 > 0? 1 : - 1; 
for ( iy = 0; iy for ( ix = 0; ix var vector = new THREE.Vector3(); 
벡터[ u ] = ( ix * 세그먼트_너비 - 너비_반 ) * udir; 
벡터[ v ] = ( iy * 세그먼트_높이 - 높이_반 ) * vdir; 
벡터[ w ] = 깊이; 
scope.vertices.push( 벡터 ); 
} 
} 
for ( iy = 0; iy for ( ix = 0; ix var a = ixgridX1 * 그렇군요; 
var b = ix GridX1 * ( iy 1 ); 
var c = ( ix 1 ) GridX1 * ( iy 1 ); 
var d = (ix 1) GridX1 * iy; 
var face = new THREE.Face4( a 오프셋, b 오프셋, c 오프셋, d 오프셋 ); 
face.normal.copy( 일반 ); 
face.vertexNormals.push(normal.clone(),normal.clone(),normal.clone(),normal.clone()); 
face.materialIndex = MaterialIndex; 
scope.faces.push(얼굴); 
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对象也大抵如此。 유유방법 G eometry::CylinderGeometry
顾name思义，该构造函数创建一个圆柱体（或圆台）对象。

复代码代码如下: 🎜>세 .CylinderGeometry = 함수( radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded ) {

/* 略 */

} 

유저CubeGeometry构造函数的基础，自己也应当能够实现CylinderGeometry,저희는 반경 상단과 하단 반경 부분과 높이를 고려하여 반경 세그먼트를 정의했습니다.需要将圆周分成多少份（该数字越大，圆柱更圆）， heightSegments는 매우 높은 수준으로 설정되어 있으며 openEnded는 openEnded로 설정되어 있습니다.

中轴线的中点，而不是중심지형, 也就是说上圆면적고도(y轴值)是height/2,下圆face是-height/2,这一点对圆柱体来说没有差异,但对于上下半径不同圆台体就有差异了; 还有就是该模型顶side 와 地面采用face3类型表，而侧 face 采 륙 4类型表 면 .

Geometry::SphereGeometry

该构造函数创建一个球体.

复代码代码如下: THREE.SphereGeometry = 함수(반경, 너비Segments, heightSegments, phiStart, phiLength, thetaStart, thetaLength ){

/* 略 */

} 

各参数의 의미는 radius指定半径，widthSegments表示“经degree”分带数目，heightSegments 설명 "확률"은 带数目입니다.表示纬圈角titude(经degree) ), 而useθ(theta)表示经圈角titude(纬degree).是边缘必须整齐).

源码中，除了North极및南极的极圈内的区域是用face3类型表face，其他part位duc是用的face4型表face。本地原点为球心。

기하학 ::평면 기하학

该构造函数创建一个평면。

复复代码代码如下:

 
THREE.PlaneGeometry = 함수(width, height, widthSegments, heightSegments){ 
/* 약간*/ 
} 

각 매개변수의 의미: 너비, 높이, 너비 세그먼트 수 및 높이 세그먼트 수입니다. 독자는 "그리드"를 구성하는 이러한 방법에 익숙해야 합니다.
몇 가지 다른 정보는 소스 코드에서 얻습니다. 평면은 x-y 평면에 구성되며 원점은 직사각형의 중심점입니다.
Geometry::ExtrudeGeometry
이 개체는 이제 일반적인 기하학적 형태를 구성하는 방법이지만 일반적으로 우리는 모델링된 개체를 특정 형식으로 파일에 저장하고 로더를 통해 로드합니다. , 그래서 이 기능을 직접적으로 사용할 기회는 거의 없는 것 같습니다. 게다가 이 기능은 옵션오브젝트에 설정이 많이 쌓여있어서 잘 살펴보지 못한 기능인 것 같습니다.
Material::Material
Material 객체는 다른 모든 종류의 Material에 대한 프로토타입 객체입니다.

코드 복사 코드는 다음과 같습니다.

 
THREE.Material = function () { 
THREE .MaterialLibrary.push( this ); 
this.id = THREE.MaterialIdCount; 
this.name = ''; 
this.side = 
this.opacity; 1; 
this.transparent = false; 
this.blending = THREE.NormalBlending; 
this.blendSrc = THREE.SrcAlphaFactor; 
this.blendDst = THREE.OneMinusSrcAlphaFactor; = THREE.DepthTest = true; 
this.polygonOffset = false; 
this.polygonOffsetUnits = 0; 
 this.alphaTest = 0; 
this.overdraw = false; // CanvasRenderer의 안티앨리어싱 간격을 수정하기 위한 부울 
this.visible = 
this.needsUpdate = true; 
 
 
더 중요한 속성 중 일부를 살펴보겠습니다. 
불투명도 속성은 투명도를 나타내는 0~1 범위의 값입니다. transparent 속성은 투명도를 사용할지 여부를 지정합니다. 값이 true인 경우에만 투명도와 혼합됩니다(투명이란 픽셀을 렌더링할 때 렌더링할 값과 기존 값이 함께 작동하여 렌더링 후 픽셀 값을 계산함을 의미함). 혼합 효과). 

blending, blendSrc, blendDst, blendEquation 속성은 블렌딩 소스 Src의 블렌딩 방법과 가중치 지정 방법, 블렌딩 픽셀의 기존 픽셀 값 Dst를 지정합니다. 기본적으로(예: 생성자에 할당된 기본값) 새 픽셀 값은 새 값 × 알파 이전 값 × (1-알파)와 같습니다. 

텍스처 이미지의 속성을 나타내는 Material 클래스에는 왜 가장 중요한 객체가 없는지 혼란스러웠습니다. 나중에 나는 실제로 재료와 질감 사이에 차이가 있다는 것을 깨달았습니다. 특정 재료에는 질감이 있다고 말할 수 있지만 질감이 없는 재료도 있습니다. 재질은 전체 모양의 렌더링 효과에 영향을 줍니다. 예: "두 끝점이 모두 불투명한 빨간색인 5px 너비의 선을 렌더링합니다." 이 설명은 재질로 간주될 수 있으며 텍스처와 관련이 없습니다.

많은 Geometry 객체와 마찬가지로 Material 객체에는 일반적인 clone(), dellocate() 및 setValues() 메서드를 제외하고는 다른 메서드가 없습니다. 다음은 가장 기본적인 두 가지 재료 개체입니다.

Material::LineBasicMaterial

이 생성자는 선형 모양을 렌더링하기 위한 재료를 만듭니다.

코드 복사

코드는 다음과 같습니다. THREE.LineBasicMaterial = function (parameters) { THREE.Material.call( this ); this.color = new THREE.Color( 0xffffff );

this.linewidth = 1; this.linecap = 'round'; this.linejoin = 'round';

this.vertexColors = false; 
this.fog = true; 
this.setValues(매개변수) 

 
 속성 색상 및 이름에서 알 수 있듯이 선폭은 선의 색상과 선의 너비를 나타냅니다(선에는 너비가 없으며 여기서 너비는 렌더링에 사용됩니다). 
linecap 및 linejoin 속성은 선 끝점 및 연결점의 스타일을 지정합니다. 
안개 속성은 이 물질이 안개의 영향을 받는지 여부를 지정합니다. 

Material::MeshBasicMaterial 

이 생성자는 메시 표면을 렌더링하는 데 사용되는 재료를 생성합니다. 

코드 복사
코드는 다음과 같습니다.

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

 
map, lightMap 및 specularMap을 포함하여 가장 중요한 텍스처 속성이 여기에 표시되며 모두 텍스처 유형 개체입니다. 
wireframe 속성은 표면의 경계선이 렌더링되는지 여부를 지정하며, wireframe으로 시작하는 다음 속성은 경계선이 렌더링되는 경우 어떻게 렌더링되는지를 나타냅니다. 

Texture::Texture
 
이 생성자는 텍스처 개체를 만드는 데 사용됩니다. 

코드 복사
코드는 다음과 같습니다.

THREE.Texture = 함수(이미지, 매핑) , WrapS, WrapT, magFilter, minFilter, 형식, 유형, 이방성 ) { THREE.TextureLibrary.push( this ) this.id = THREE.TextureIdCount this.name = ''; 🎜>this .image = image; this.mapping = mapping !== 정의되지 않음 ? mapping : new THREE.UVMapping() this.wrapS = WrapS !== undefine ? WrapS : THREE.ClampToEdgeWrapping; 🎜>this .wrapT = WrapT !== 정의되지 않음 ? WrapT : THREE.ClampToEdgeWrapping;

this.magFilter = magFilter !== 정의되지 않음 ? magFilter : THREE.LinearFilter = minFilter !== 정의되지 않음 minFilter: THREE .LinearMipMapLinearFilter;

this.anisotropy !== 정의되지 않음 ? 이방성: 1; 
this.format = 형식 !== 정의되지 않음 ? 형식: 
this.type = 유형 !== 정의되지 않음 ? 유형: THREE.UnsignedByteType; 
this.offset = new THREE.Vector2( 0, 0 ) 
this.repeat = new THREE.Vector2( 1, 1 ); generateMipmaps = true ; 
this.premultiplyAlpha = false; 
this.needsUpdate = false; 

 
가장 중요한 속성은 이미지인데, 이는 JavaScript 이미지 유형 객체입니다. 전달되는 첫 번째 매개변수는 객체입니다. 객체를 생성하는 방법은 나중에 설명합니다. 

 다음의 객체는 모두 선택사항입니다. 생략하면 기본값이 채워지며, 기본값이 채워지는 경우가 많습니다. 
magFileter 및 minFileter 속성은 확대 및 축소 시 텍스처의 필터링 방법(가장 가까운 이웃 점, 이중선형 보간 등)을 지정합니다. 
URL에서 텍스처를 생성하려면 Three.ImageUtils.loadTexture(paras)를 호출해야 합니다. 이 함수는 텍스처 유형 개체를 반환합니다. THREE.ImageLoader.load(paras) 함수는 함수 내부에서 호출되고 THREE.Texture() 생성자는 이 함수 내부에서 호출되어 텍스처를 생성합니다.

Three.js 소스 코드 읽기 노트(객체 구성 방법)_기본 지식