Three.js 소스코드 읽기 노트(기본 핵심 Core 객체)_기본 지식

Three.js는 브라우저 3D 프로그래밍을 단순화하고 JavaScript를 사용하여 브라우저에서 복잡한 장면을 훨씬 쉽게 만들 수 있게 해주는 훌륭한 webgl 오픈 소스 라이브러리입니다. Github의 많은 webgl 데모는 저를 흥분시키고 시도해 보고 싶게 만듭니다. 이 라이브러리는 아직 개발 단계이기 때문에 정보가 매우 부족하고, 매니아들은 대부분 라이브러리의 소스 코드를 읽어서 학습해야 하는데, 지금은 그렇게 할 계획입니다.

가장 기본적인 Core 객체부터 시작하는 첫 번째 노트입니다.
Core::Vector2
이 생성자는 2차원 벡터를 나타내는 객체를 생성하는 데 사용됩니다.

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

THREE.Vector2 = function ( x, y ) {
this.x = x || 0; = y || 0;
};

Vector2 객체의 기능적 함수는

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

THREE.Vector2.prototype = {

생성자: THREE.Vector2,
설정: 함수( x, y ) {
this.x = x;
this.y = y
return this;
},
복사: 함수( v ) {
this.x = v.x;
this.y = v.y;
return this;
},
... // 추가 기능


함수 set( x, y)는 벡터의 값을 지정하는 데 사용됩니다. 호출자 자신의 x, y 값이 영향을 받으며 메서드 자체가 호출자 자신에게 반환됩니다. 아래에서는 설명하지 않습니다. 텍스트를 통해 자신의 기능을 명확하게 표현할 수 있는 함수는 더 이상 소스 코드를 참조하지 않으며 이에 대해서는 아래에서 설명하지 않습니다.
copy(v) 함수는 벡터 v를 호출자에게 복사하는 데 사용됩니다.

add(a,b) 함수와 sub(a,b) 함수는 각각 벡터 a와 b의 덧셈과 뺄셈을 나타냅니다.
addSelf(v) 및 subSelf(v) 함수는 각각 호출자 자체에 벡터 v를 더하거나 빼는 것을 의미합니다.
multipleScale(s) 및 DivideScale(s) 함수는 각각 호출자를 s로 곱하거나 나누는 것을 나타냅니다.
lerpSelf(v,alpha) 함수는 v가 가리키는 방향으로 알파만큼 호출자를 회전합니다. 알파가 1이면 호출자는 최종적으로 v와 같고, 알파=0이면 호출자는 여전히 원본과 동일합니다. .

코드 복사 코드는 다음과 같습니다. lerpSelf: function ( v, alpha ) {

this.x = ( v.x - this.x ) * alpha;

this.y = ( v.y - this.y ) * alpha
return this; >
negate() 함수는 호출자를 무효화합니다.
dot(v) 함수는 float 유형 호출자와 벡터 v의 내적을 반환합니다.
lengthSq() 함수와 length() 함수는 호출자의 길이 제곱 또는 float 유형의 길이를 반환합니다.
normalize() 함수는 호출자 자체를 정규화합니다.
distanceToSquared(v) 및 distanceTo(v) 함수는 호출자와 벡터 v 사이의 거리를 반환합니다. 여기서 거리는 실제로 두 벡터의 시작점이 원점에 있을 때 끝점 사이의 거리, 즉 벡터 this-v의 길이입니다.

setLength(s) 함수는 방향을 변경하지 않고 벡터의 길이를 s로 조정합니다.
equals(v) 함수는 호출자의 값과 벡터 v가 동일한지 여부를 확인합니다.
isZero() 함수는 호출자가 0 벡터인지 여부를 확인합니다.
clone() 함수는 호출자와 동일한 값을 가진 새 벡터를 반환합니다. 이는 복사하는 것과 동일합니다.

Core::Vector3

이 생성자는 3차원 벡터를 나타내는 객체를 생성합니다.


코드 복사

코드는 다음과 같습니다. THREE.Vector3 = function ( x, y, z ) { this.x = x || 0; y || 0 ; z || 0

3차원 벡터와 2차원 벡터는 집합, 더하기, 점, 길이, 복제 등 공통점이 많습니다. 여기서는 모두 생략하고, 3차원 벡터가 더 많은 기능을 갖는 일부 기능만 설명합니다. 2차원 벡터보다 더 많이 기록됩니다.

setX(x), setY(y) 및 setZ(z) 함수는 특정 구성 요소의 값을 개별적으로 설정하는 데 사용됩니다.
cross(a,b) 및 crossSelf(v) 함수는 각각 호출자를 a, b의 교차 곱 또는 호출자 자체와 v의 교차 곱으로 만듭니다. 외적은 외적에 참여하는 두 벡터에 수직이고 오른쪽 나선형 법칙을 따르는 벡터입니다.

getPositionFromMatrix(m), getRotationFromMatrix(m), getScaleFromMatrix(m) 함수는 4×4 모델 행렬에서 위치 구성 요소, 회전 구성 요소 및 크기 조정 구성 요소를 추출합니다. 모델 행렬은 일련의 변환, 회전 및 크기 조정 변환의 중첩 효과를 나타냅니다. (여기서 두 번째 함수는 문서에 나와 있지만 소스 코드에서는 다른 두 함수로 대체되었으며 아직 업데이트되지 않았을 수 있습니다.)
angleTo(v) 함수는 호출자와 벡터 v 사이의 각도를 계산합니다.
Core::Vector4
이 생성자는 4차원 벡터를 나타내는 객체를 생성합니다.

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

THREE.Vector4 = function (x, y, z, w) {
this.x = x || 0; y = y | 0;
this.w = ( w !== 정의되지 않음 )

🎜>4차원 벡터 동차좌표를 표현하는데 사용되며, Vector2, Vector3의 기능과 기능이 중복되므로 여기에는 기록하지 않겠습니다.

Core::Matrix3

이 생성자는 3×3 행렬을 나타내는 객체를 생성합니다.
THREE.Matrix3 = function () { this.elements = new Float32Array(9 ) ; };
3×3 행렬에는 9개의 요소가 있으며 이는 행렬 객체의 요소 속성에 저장됩니다.
getInverse(m) 함수는 호출자 자체를 변경하면서 행렬 m의 역행렬을 반환합니다.
transpose() 함수는 호출자를 전치합니다.
transposeToArray(r) 함수는 자신을 변경하지 않고 호출자를 배열 r로 바꿉니다. (여기서 소스코드가 잘못된 것 같습니다. var m=this.m은 var m=this.elements여야 합니다.)

Core::Matrix4

이 생성자는 4×를 생성합니다. 4 행렬 객체, 4×4 행렬은 3차원 그래픽에서 매우 중요합니다. 모델 행렬, 뷰 행렬 및 투영 행렬은 모두 이러한 행렬입니다.


코드 복사

코드는 다음과 같습니다. THREE.Matrix4 = 함수(n11, n12 , n13, n14, n21, n22, n23, n24, n31, n32, n33, n34, n41, n42, n43, n44 ) { this.elements = new Float32Array( 16 );

( n11 !== 정의되지 않음 ) ? n11 : 1, n12 || 0, n13 || 0, n14 || 0, ( n22 !== 정의되지 않음 ) n23 || 0, n24 || 0,

n31 || 0, n32 || 0, ( n33 !== 정의되지 않음 ) ? n33 : 1, n34 || 0, n42 | | 0, n43 || 0, ( n44 !== 정의되지 않음 ) ? n44 : 1
)
};


Matrix3 객체에 나타나는 여러 함수 Matrix4에서는 여기서도 함수가 생략되었습니다.
identity() 함수는 객체를 항등 행렬로 재설정합니다.

lookAt(eye, center, up) 함수는 객체를 뷰 매트릭스로 설정하며, 매개변수는 모두 Vector3 객체입니다. 이 매트릭스는 눈과 중심의 상대적인 위치만 사용합니다. 이 뷰 행렬은 카메라가 눈 위치에서 중앙 위치를 바라볼 때의 뷰 행렬을 나타내며, 위쪽 벡터(이에 대해서는 나중에 설명)가 위쪽에 있습니다. 뷰 행렬은 카메라의 모델 행렬로 간주될 수 있으므로 이 함수에 의해 생성된 행렬은 다음과 같은 변환을 나타낼 수 있습니다. 객체를 원점에서 눈 중심 위치로 이동한 다음 위쪽 벡터가 위로 올 때까지 회전합니다. . 위쪽 벡터는 카메라를 고정하는 데 사용됩니다. 카메라가 한 지점에 고정되어 있고 렌즈가 고정된 방향을 향하고 있을 때 위쪽 벡터는 카메라의 이 치수를 고정하는 데 사용됩니다. .

코드 복사


코드는 다음과 같습니다.

lookAt: 함수( 눈, 대상, 위로 ) { var te = this.elements; var x = THREE.Matrix4.__v1; // 빈 Vector3 객체, 아래와 동일 var y = THREE.Matrix4.__v2; = THREE.Matrix4 .__v3; z.sub( 눈, 대상 ).normalize()

if ( z.length() === 0 ) {

z.z = 1;
x .cross( up, z ).normalize();
if ( x.length() === 0 ) {
z.x = 0.0001
x.cross( up, z ) .normalize() ;
}
y.cross( z, x );
te[0] = x.x; te[8] = z.x; 1] = x.y ; te[5] = y.y;
te[2] = x.z; te[10] = z.z; 🎜>},


곱셈(a,b), 곱셈Self(v) 및 곱하기ToArray(a,b,r) 함수는 두 행렬을 곱합니다.
multiplyScale(s) 함수는 개체의 모든 16개 요소에 s를 곱합니다.
multiplyVector3(v) 및 MultiplyVector4(v) 함수는 개체 행렬에 4차원 행 벡터를 왼쪽 곱하고 vector3 및 vector4 유형의 행 벡터를 반환합니다. 객체 행렬이 모델 뷰 행렬이고 입력 벡터가 점 위치 정보인 경우 출력 벡터는 모델 변환 및 카메라 변환 후 카메라를 기준으로 한 점의 위치입니다. 벡터3 형태의 벡터가 입력되면 자동으로 동차좌표로 보완되고, 반환되면 네 번째 성분이 잘려 일반 좌표가 된다.

rotateAxis(v) 함수는 객체 행렬의 왼쪽 위 모서리에 있는 3×3 하위 행렬을 사용하여 행 벡터 v에 왼쪽 곱셈을 하고, 새 행 벡터를 구해 정규화한 다음, 이 새 값을 반환합니다. 행 벡터입니다. 이 함수는 벡터 v의 값도 업데이트합니다. 모델 뷰 행렬의 왼쪽 상단에 있는 3×3 하위 행렬에는 모델 행렬의 회전 정보가 포함되어 있습니다. 이 하위 행렬에 왼쪽에 벡터를 곱하면 얻은 새 벡터가 실제로 회전 후의 원래 벡터입니다(회전 효과). 의 모델 매트릭스에서 나옵니다. 따라서 이 함수를rotateAxis라고 합니다.

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

rotateAxis: function ( v ) {
var te = this.elements;
var vx = v.x, vy = v.y, vz = v.z;
v.x = vx * te[0] vy * te[4] vz * te[8]; >v.y = vx * te[1] vy * te[5] vz * te[9];
v.z = vx * te[2] vy * te[6] vz * te[10]; .normalize( );
return v;
},


crossVector(v) 함수는 행렬 객체(호출자)와 v의 외적을 계산합니다. 객체 행렬과 4차원 행 벡터 v를 곱하면 벡터가 반환됩니다. 이것이 정확히 무엇을 하는지는 아직 파악하지 못했습니다.

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

crossVector: function ( a ) {

var te = this.elements;
var v = new THREE.Vector4();
v.x = te[0] * a.x te[4] * a.y te[8] * a.z te[12] * a.w ;
v.y = te[1] * a.x te[5] * a.y te[9] * a.z te[13] * a.w;
v.z = te[2] * a.x te[6] * a.y te[ 10] * a.z te[14] * a.w;
v.w = ( a.w ) ? te[3] * a.x te[7] * a.y te[11] * a.z te[15] * a.w : 1; v를 반환
},


함수 determinant()는 행렬의 행렬식 값을 계산합니다.
flattenToArray( flat) 함수와 flattenToArrayOfset( flat,offset) 함수는 행렬을 1차원 배열로 덤프하고, 후자 함수는 flat[0]부터 flat[15]까지 저장합니다. 저장소의 시작 위치입니다. flat[offset]에서 flat[offset 15]로 저장됩니다.

getPosition() 및 setPosition() 함수는 행렬 개체의 위치 구성 요소를 가져오거나 설정하는 데 사용됩니다. 회전 구성요소가 왼쪽 상단 모서리의 3×3 하위 행렬에 저장되는 것처럼 위치 구성요소는 네 번째 행의 처음 세 구성요소인 요소[12], 요소[13], 요소[14]에 저장됩니다.
getColumeX(), getColumeY() 및 getColumeZ() 함수는 각각 왼쪽 위 모서리에 있는 3×3 하위 행렬의 세 열을 추출합니다.
compose(translate,rotation,scale) 함수는 Vector3 유형의 Translate 객체로 표현되는 평행 이동, Matrix3 유형의 회전 객체로 표현되는 회전, Vector3 유형의 scale 객체로 표현되는 스케일링을 결합하도록 객체 행렬을 설정합니다. 변환 매트릭스. 실제로 이는 모델 행렬의 해당 부분공간에 직접 채워지는 것을 의미합니다.

decompose(translate,rotation,scale) 함수는 행렬 객체를 세 개의 객체로 분할하는데, 이는 이전 함수와 정확히 반대입니다.
extractPosition(m) 및 extractRotation(m) 함수는 행렬 객체 m의 위치 또는 회전을 나타내는 구성 요소를 호출자 객체로 추출합니다. 예를 들어 두 객체는 ​​여러 가지 다른 변환을 거쳤으며 객체의 모델만 있습니다. 뷰 행렬 extractRotates가 다른 객체의 모델 뷰 행렬을 회전시키는 경우 호출자는 다른 객체와 동일한 회전 방향을 유지합니다.

translate(v) 함수는 모델 행렬의 가장 기본적인 변환 중 하나입니다. 즉, 모델 행렬이 벡터 v에 종속된 객체를 변환하는 변환 변환입니다.
rotateX(angle),rotateY(angle),rotateZ(angle) 함수는 각각 모델 행렬이 속한 객체를 X, Y, Z축을 중심으로 각도별로 회전시킵니다.

rotateByAxis(axis, angle) 함수는 모델 행렬이 임의의 축을 중심으로 각도만큼 회전합니다. 이는 관련된 두 변환의 다중 중첩입니다(중첩 매개변수는 현재 축으로 구성됩니다). position 및 axis 매개변수 결정), "Model View Matrix and Projection Matrix: WebGL Notes (1)"에서 임의의 축을 중심으로 한 회전 문제에 대해 논의했습니다.

여기에는 저울 기능이 있어야 하지 않나요? 하지만 소스코드에서는 찾을 수 없었습니다.
makeTranslate(x,y,z), makeRotationX(theta), makeRotationY(theta), makeRotationZ(theta), makeRotationAxis(axis,angle) 및 makeScale(s) 함수는 개체 행렬을 단위로 직접 재설정합니다. 행렬. 변환, 축을 중심으로 한 회전 또는 단순히 크기 조정 후의 행렬입니다. 이 함수는 객체 자체의 값을 업데이트하며, 업데이트된 결과는 객체의 이전 값과 아무런 관련이 없습니다(이것이 make prefix 함수의 특징이기도 합니다).

makeFrustum(...), makePerspective(...) 및 makeOrthographic(...) 함수도 새 행렬을 초기화하는 데 사용됩니다. 구체적인 의미는 카메라 클래스에서 논의될 것 같습니다. 카메라 클래스의 생성자 이러한 함수는 확실히 호출됩니다.
clone() 함수는 행렬 객체를 복사하여 반환합니다.
Core::Face3
삼각형 평면 객체를 생성하는 함수

코드 복사 코드 다음과 같습니다:

THREE.Face3 = function ( a, b, c, Normal, color, MaterialIndex ) {
this.a = a
this.b this.c = c;
this.normal = THREE.Vector3의 일반 인스턴스 ? 일반 : new THREE.Vector3();
this.vertexNormals = 배열의 일반 인스턴스 ?
this . color = THREE.Color ? color : new THREE.Color();
this.vertexColors = 색상 인스턴스of Array ? color : []; = MaterialIndex;
this.centroid = new THREE.Vector3()
};


객체의 a, b, c 값은 세 정점의 인덱스입니다. (나중에 언급할 예정입니다. 모든 점은 Mesh 개체에 배열로 저장됩니다.), Normal은 법선이고, MaterialIndex는 정점 재료 인덱스입니다. 유형 또는 배열 유형.
clone(x) 메소드는 동일한 값을 가진 새 객체를 반환합니다.

Core::Face4

Face3과 거의 동일하며 생략된 4개의 꼭지점 면을 생성하는 기능입니다. Core::Math

THREE.Math는 생성자가 없는 "정적 클래스"이므로 new 키워드를 통해 초기화할 필요가 없습니다. 이 클래스는 몇 가지 필요한 수학적 도구를 제공합니다. clamp(x,a,b) 함수는 [a,b] 구간에서 x를 고정합니다. 클램프Bottom(x,a)는 한쪽 면만 고정한다는 점을 제외하면 비슷한 기능을 가지고 있습니다. mapLinear(x,a1,a2,b1,b2) 함수는 점 (x,y)가 (a1,a2)와 (b1,b2)를 연결하는 직선에 위치하도록 값 y를 계산합니다.

코드 복사 코드는 다음과 같습니다. mapLinear: function( x, a1, a2 , b1, b2 ) {

return b1 ( x - a1 ) * ( b2 - b1 ) / ( a2 - a1 ),

random16(), randInt(low, high), randFloat(low, high) 및 randFloatSpread(range) 함수는 각각 [0,1] 간격에서 16비트 무작위 부동 소수점 숫자를 생성하고 [low, high] 간격. [low,high] 간격의 임의 부동 소수점 수, [-range/2, range/2] 간격의 임의 부동 소수점 수.
sigh(x) 함수는 x의 부호에 따라 1 또는 -1을 반환합니다.
Core::Clock
이 생성자는 시계(정확히 말하면 스톱워치) 객체를 생성합니다.

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

THREE.Clock = function ( autoStart ) {
this.autoStart = ( autoStart !== undefine ) ? autoStart : true; this.startTime = 0;
this.elapsedTime = 0;
this.running =
}; ) 및 stop()은 타이밍을 시작하거나 중지하는 데 사용됩니다.
getDelta() 함수는 함수가 마지막으로 호출된 이후의 시간을 반환합니다. 함수가 처음 호출되면 타이밍 시작 이후의 시간이 반환됩니다. autoStart 값이 true인 경우 start() 함수가 호출되지 않았거나 getDelta() 함수 호출 시 stop() 함수가 호출된 경우 타이밍이 자동으로 시작되고 0이 반환됩니다. autoStart()가 false인 경우 getDelta()를 호출하면 start()를 호출하기 전이나 stop()을 호출한 후에 0이 반환됩니다.

getElapsedTime() 함수는 함수가 호출될 때 타이밍이 시작된 이후의 시간을 반환합니다.

Core::Color

이 생성자는 색상을 나타내는 객체를 구성합니다.


코드 복사

코드는 다음과 같습니다: THREE.Color = function ( hex ) { if ( hex !== undefine ) this.setHex( hex ) return this; } ;

setHex(hex) 함수는 객체의 r, g, b 속성을 16진수 순서로 설정합니다. 실제로 객체에서 색상은 궁극적으로 이 세 가지 속성에 저장됩니다.

코드 복사

코드는 다음과 같습니다. setHex: function ( hex ) { hex = Math.floor( hex ); this.r = ( hex > 16 & 255 ) / 255; this.g = ( hex > 8 & 255 ) / 255;

this.b = ( hex & 255 ) / 255;

이것을 반환
},


함수 setRGB(r,g,b) 및 setHSV(h,s) ,v) RGB 값 또는 HSV 값으로 객체를 설정합니다.
getHex() 함수는 16진수 색상 값을 반환합니다.
copyGammaToLinear(color) 및 copyLinearToGamma(color) 함수는 각각 color의 rgb 값을 제곱 또는 근근화하여 호출자 개체에 할당합니다.
convertGammaToLinear() 및 ConvertLinearToGamma() 함수는 각각 제곱되거나 호출자 고유의 rgb 값에 개방됩니다.