Three.js 원본 읽기 노트 - 3
23741 단어 three.js
Object::Mesh
이 구조 함수는 한 공간 속의 물체를 구성했다.'망격'이라고 부르는 이유는 실제로 부피를 가진 물체는 기본적으로 모두'망격'으로 모델링된 것이기 때문이다.
THREE.Mesh = function ( geometry, material ) {
THREE.Object3D.call( this );
this.geometry = geometry;
this.material = ( material !== undefined ) ? material : new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, wireframe: true } );
/* */
}실제로 메시 클래스는 기하학적 형태를 나타내는 geometry 대상과 재료를 나타내는 material 대상이라는 두 가지 속성만 있다.metry 대상은 지난 논문에서 이미 소개했고 일부 파생류는 이 논문에서 소개될 것이다(이 파생류의 구조 과정을 통해 메시 대상의 작업 원리를 더욱 뚜렷하게 이해할 수 있다).matrial 대상 및 파생류도 이 노트에서 소개할 예정이다.Mesh 대상의 이 두 속성은 서로 밀접하게 관련되어 있다. Geometry 대상의face 수조에서 각face 대상의materialIndex는material 속성 대상과 일치하고face 대상의vertexUVs 수조는 각 정점의 수조에서 값을 순서대로 일치시킨다.주의해야 할 것은 Mesh에는 하나의 material 대상만 있을 수 있다(이렇게 설계한 의도가 어디에 있는지 알 수 없다). 만약에 여러 개의 재질을 필요로 한다면 재질을 material Index 순서에 따라 Geometry 자체의 materials 속성에 초기화해야 한다.
Geometry::CubeGeometry
이 구조 함수는 입방체 대상을 만들었다.
THREE.CubeGeometry = function ( width, height, depth, widthSegments, heightSegments, depthSegments ) {
THREE.Geometry.call( this );
var scope = this;
this.width = width;
this.height = height;
this.depth = depth;
var width_half = this.width / 2;
var height_half = this.height / 2;
var depth_half = this.depth / 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에 있습니다.이 함수에서 가장 중요한 것은 scope에 대한 조작(위의 코드 블록에서 scope는this)이다. 이는 scope를 호출하는 것을 포함한다.vertices.push(vector)는 정점을 Geometry 대상에 추가합니다.scope를 호출합니다.faces.push(face)는 표면을 Geometry 대상에 넣고 scope를 호출합니다.faceVertexUvs[i].push(uv) 방법은 정점에 대응하는 재질 좌표를 geometry 대상에 추가합니다.코드의 대부분은 입방체를 생성하는 논리에 관한 것이다. 이런 논리는 이해하기 쉽고 다른 유형의geometry 대상으로 확장되기 쉽다.
구조 함수의 매개 변수는 길이, 너비, 높이, 세 방향의 분단수를 포함한다.세그먼트란 widthSeqments 등 세 개의 매개 변수를 모두 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 = width / 2,
height_half = height / 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 = gridX + 1,
gridY1 = gridY + 1,
segment_width = width / gridX,
segment_height = height / gridY,
normal = new THREE.Vector3();
normal[ w ] = depth > 0 ? 1 : - 1;
for ( iy = 0; iy < gridY1; iy ++ ) {
for ( ix = 0; ix < gridX1; ix ++ ) {
var vector = new THREE.Vector3();
vector[ u ] = ( ix * segment_width - width_half ) * udir;
vector[ v ] = ( iy * segment_height - height_half ) * vdir;
vector[ w ] = depth;
scope.vertices.push( vector );
}
}
for ( iy = 0; iy < gridY; iy++ ) {
for ( ix = 0; ix < gridX; ix++ ) {
var a = ix + gridX1 * iy;
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 + offset, b + offset, c + offset, d + offset );
face.normal.copy( normal );
face.vertexNormals.push( normal.clone(), normal.clone(), normal.clone(), normal.clone() );
face.materialIndex = 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 구조 함수의 기초가 있으면 자신도CylinderGeometry를 실현할 수 있어야 한다. 우리는 구조 함수의 각 매개 변수의 의미를 주의할 필요가 있다.radiusTop과 radiusBottom은 위쪽과 아래쪽의 반경을 나타내고 Height는 높이를 나타낸다.radius Segments는 원주를 몇 부로 나누어야 하는지 정의합니다. (이 숫자가 클수록 원통이 더 둥글습니다.) Height Segments는 전체 높이를 몇 부로 나누어야 하는지 정의합니다. OpenEnded는 정면과 밑면을 생성할지 지정합니다.
원본 코드에서 주의해야 할 두 가지가 있다. 이 모델의 현지 원점은 중축선의 중점이지 중심 같은 것이 아니다. 즉, 상원면의 높이(y축값)는 Height/2이고 하원면은-height/2이다. 이 점은 원기둥에 차이가 없지만 상하반경이 다른 원주체에 차이가 있다.그리고 이 모델의 맨 윗면과 바닥은face3 유형의 표면을 사용하고 옆면은face4 유형의 표면을 사용한다.
Geometry::SphereGeometry
이 구조 함수는 구체를 만듭니다.
THREE.SphereGeometry = function ( radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength ){
/* */
}각 파라미터의 의미:radius는 반경을 지정하고widthSegments는'경도'밴드 수를 표시하며,heightSegments는'위도'밴드 수를 나타낸다.다음 네 개의 매개 변수는 경도의 시작값과 위도의 시작값을 나타내는 선택할 수 있습니다.극좌표에 익숙한 사람은 모두 알고 있으며, 통상적으로 그리스 자모를 쓴다φ위권 각도(경도)를 나타내는 대신θ(theta)는 경계 각도(위도)를 나타냅니다.이 네 개의 기본값은 각각 0,2π,0,π로 그들의 값을 바꾸면 결핍된 구면을 만들 수 있다(그러나 가장자리는 반드시 가지런해야 한다).
원본 코드에서 북극과 남극을 제외한 극권 내의 구역은face3형 표면을 사용하고 다른 부위는face4형 표면을 사용한다.로컬 원점은 구의 중심입니다.
Geometry::PlaneGeometry
이 구조 함수는 평면을 만듭니다.
THREE.PlaneGeometry = function ( 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 = THREE.FrontSide;
this.opacity = 1;
this.transparent = false;
this.blending = THREE.NormalBlending;
this.blendSrc = THREE.SrcAlphaFactor;
this.blendDst = THREE.OneMinusSrcAlphaFactor;
this.blendEquation = THREE.AddEquation;
this.depthTest = true;
this.depthWrite = true;
this.polygonOffset = false;
this.polygonOffsetFactor = 0;
this.polygonOffsetUnits = 0;
this.alphaTest = 0;
this.overdraw = false; // Boolean for fixing antialiasing gaps in CanvasRenderer
this.visible = true;
this.needsUpdate = true;
};먼저 몇 가지 중요한 속성을 살펴보자.
속성opacity는 투명도를 나타내는 0-1 구간의 값입니다.속성transparent는 투명을 사용할지 여부를 지정합니다. 이 값이 진짜일 때만 혼합됩니다. (투명이 픽셀을 렌더링할 때 렌더링 값과 존재하는 값이 공동으로 작용하여 렌더링 후 픽셀 값을 계산하여 혼합 효과를 냅니다.)
속성blending,blendsrc,blenddst,blendeEquation은 혼합 방식과 혼합 소스 Src와 혼합 픽셀에 이미 있는 픽셀 값 Dst의 권한 재지정 방식을 지정합니다.기본적으로 (예를 들어 구조 함수에 부여된 부족한 값), 새로운 픽셀 값은 새 값과 같다.×알파+이전 값×(1-alpha).
나는 왜 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( parameters );
};속성color와linewidth는 말 그대로 선의 색깔과 선의 폭을 가리킨다.
속성linecap과linejoin은 선의 끝점과 연결점의 스타일을 지정합니다.
속성 fog 이 재료가 안개의 영향을 받는지 여부를 지정합니다.
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 );
};맵,lightMap,specularMap을 포함한 가장 중요한 무늬 속성이 나타났습니다. 그들은 모두texture 유형의 대상입니다.
속성wireframe은 표면의 경계선을 렌더링할지 여부를 지정합니다. 렌더링하면, 뒤에 있는wireframe로 시작하는 몇몇 속성은 경계선을 렌더링하면 렌더링하는 방법을 나타냅니다.
Texture::Texture
이 구조 함수는 무늬 대상을 만드는 데 쓰인다.
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;
};가장 중요한 속성은 이미지입니다. 이것은 JavaScript Image 유형의 객체입니다.들어오는 첫 번째 파라미터는 이 대상입니다. 이 대상을 어떻게 만드는지 뒤에서 설명합니다.
뒤에 있는 대상은 모두 선택할 수 있습니다. 기본값이 기본값으로 채워지고, 기본값이 채워지는 경우가 많습니다.
속성magFileter와minFileter는 무늬가 확대되고 축소될 때 필터를 지정합니다. 가장 가까운 점, 이중 선형 삽입 등입니다.
URL에서texture를 생성하려면 Three를 호출해야 합니다.ImageUtils.loadTexture (paras), 이 함수는texture 형식의 대상을 되돌려줍니다.함수 내부에서 THREE가 호출되었습니다.ImageLoader.load(paras) 함수, 이 함수 내부에THREE가 호출되었습니다.텍스쳐를 생성하는 텍스쳐() 구조 함수입니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
인쇄용 Shade3D 데이터를 three.js로 표시Shade3D의 대응 출력 파일 형식 중에서 three.js에 대응하고 있는 FBX, Wavefront OBJ(OBJ)당을 출력해 보고 사이즈가 컸기 때문에, 출력된 FBX를 Blender로 열어 glTF로 변환 S...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
