未验证 提交 d9e89711 编写于 作者: H harehare 提交者: GitHub

Docs: docs/api/ko/core korean translated (#21791)

* bufer_1

* core

* buffergeometry

* 0430

* 0504

* 0504

* api-core-korean
Co-authored-by: Nhareha <maiel@naver.com>
上级 855f9daa
......@@ -112,7 +112,7 @@
<h3>[method:AnimationClip findByName]( [param:Object objectOrClipArray], [param:String name] )</h3>
<p>
Searches for an AnimationClip을 위한 검색기로, 첫 파라미터 혹은 AnimationClips 배열, "animations"라는 이름을 가진 mesh, geometry 열로부터 이름을 기반으로 검색합니다.
Searches for an AnimationClip을 위한 검색기로, 첫 파라미터 혹은 AnimationClips 배열, "animations"라는 이름을 가진 mesh, geometry 열로부터 이름을 기반으로 검색합니다.
</p>
<h3>[method:AnimationClip parse]( [param:Object json] )</h3>
......
......@@ -88,7 +88,7 @@
</p>
<p>
트랙의 이름은 노드의 이름을 사용하거나 노드의 uuid(믹서에 전달된 장면 그래프 노드의 서브트리 안에 있어야 하지만)를 사용해서 노드를 특정할 수 있습니다.
트랙의 이름은 노드의 이름을 사용하거나 노드의 uuid(믹서에 전달된 그래프 노드의 서브트리 안에 있어야 하지만)를 사용해서 노드를 특정할 수 있습니다.
혹은 만약 트랙 이름이 .으로 시작한다면, 트랙은 믹서에 전달된 루트 노드를 적용할 것입니다.
</p>
......
......@@ -10,7 +10,7 @@
<h1>[name]</h1>
<p class="desc">
내부적으로 사용되는 장면 그래프의 실제 프로퍼티에 대한 내용입니다.
내부적으로 사용되는 그래프의 실제 프로퍼티에 대한 내용입니다.
</p>
......@@ -81,13 +81,13 @@
<h3>[method:null bind]( )</h3>
<p>
장면 그래프에 있는 프로퍼티에 대한 게터와 세터를 생성합니다. 내부적으로
그래프에 있는 프로퍼티에 대한 게터와 세터를 생성합니다. 내부적으로
[page:PropertyBinding.getValue getValue] 와 [page:PropertyBinding.setValue setValue]로 사용됩니다.
</p>
<h3>[method:null unbind]( )</h3>
<p>
장면 그래프에 있는 프로퍼티에 대한 게터와 세터의 연결을 끊습니다.
그래프에 있는 프로퍼티에 대한 게터와 세터의 연결을 끊습니다.
</p>
<h3>[method:Constructor Composite]( targetGroup, path, optionalParsedPath )</h3>
......
......@@ -10,7 +10,7 @@
<h1>[name]</h1>
<p class="desc">
내부적으로 사용되는 가중치 축적을 허용하는 버퍼 장면 그래프 프로퍼티입니다.
내부적으로 사용되는 가중치 축적을 허용하는 버퍼 그래프 프로퍼티입니다.
</p>
......
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">
이 클래스에는 [page:BufferGeometry]와 연관된 속성 데이터(꼭짓점 위치, 면 순서, 법선, 색깔,
UV, 모든 커스텀 속성들 등)를 저장하고 있으며, GPU에 보다 효율적으로 데이터를 전송할 수 있게 합니다.
세부사항 및 활용 예제를 확인해보세요.<br /><br />
데이터는 모든 길이가 벡터로 저장되며 ([page:BufferAttribute.itemSize itemSize]로 정의된 값),
일반적으로 인덱스 값으로 전달될 경우 메서드 내에서 밑줄이 쳐지며 자동으로 벡터 길이에 곱해집니다.
</p>
<h2>생성자</h2>
<h3>[name]( [param:TypedArray array], [param:Integer itemSize], [param:Boolean normalized] )</h3>
<p>
[page:TypedArray array] -- 반드시 [link:https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/TypedArray TypedArray]여야 합니다.
버퍼를 시작하는데에 사용됩니다. <br />
배열에는
<code>itemSize * numVertices</code>
엘레먼트가 있어야 하며, numVertices는 [page:BufferGeometry BufferGeometry]와 연관된 꼭짓점의 갯수입니다.<br /><br />
[page:Integer itemSize] -- 특정 꼭짓점과 연관된 배열의 값의 수입니다.
예를 들어 이 속성에서 3개의 벡터(위치, 법선, 색 처럼)를 저장하고 있다면, itemSize는 3이 됩니다.
<br /><br />
[page:Boolean normalized] -- (생략가능) 정수 데이터에만 적용됩니다. 버퍼에 있는 기저 데이터가 GLSL 코드에서 값으로 맵핑되는 방식입니다.
예를 들어 [page:TypedArray array]가 UInt16Array의 인스턴스이고, [page:Boolean normalized]가 true면 배열에 있는 0 - +65535 값들은
GLSL 속성에서 0.0f - +1.0f로 매핑될 것입니다. Int16Array (기호 있는)는 -32767 - +32767 가 -1.0f - +1.0f 로 매핑될 것입니다.
[page:Boolean normalized]가 false라면, 값은 수정 없이 floats로 변환될 것입니다. 예) 32767은 32767.0f로 변환.
</p>
<h2>프로퍼티</h2>
<h3>[property:TypedArray array]</h3>
<p>
버퍼에 저장되어 있는 데이터를 담고 있는 [page:TypedArray array].
</p>
<h3>[property:Integer count]</h3>
<p>
[page:BufferAttribute.itemSize itemSize]로 나눈 [page:BufferAttribute.array array]의 길이를 저장.<br /><br />
버퍼가 3개의 컴포넌트를 저장한 벡터(위치, 법선, 색 등)
저장된 벡터들의 수를 계산합니다.
</p>
<h3>[property:Integer itemSize]</h3>
<p>[page:BufferAttribute.array array]에 저장되는 벡터의 길이.</p>
<h3>[property:String name]</h3>
<p>
이 속성 인스턴스의 임시 이름. 기본값은 빈 문자열입니다.
</p>
<h3>[property:Boolean needsUpdate]</h3>
<p>
이 속성이 변했는지와 GPU에 다시 전송해야하는지에 대한 표시입니다.
배열의 값을 수정했다면 이 값을 true로 설정하세요.<br /><br />
이 값을 true로 설정하면 [page:BufferAttribute.version version] 값도 높입니다.
</p>
<h3>[property:Boolean normalized]</h3>
<p>
버퍼에 있는 기저 데이터가 GLSL 코드에서 값으로 맵핑되는 방식입니다.
자세한 내용은 위의 생성자 부분을 참고하세요.
</p>
<h3>[property:Function onUploadCallback]</h3>
<p>
렌더러가 속성 배열 데이터를 GPU에 전달한 후에 실행되는 함수입니다.
</p>
<h3>[property:Object updateRange]</h3>
<p>포함 객체:<br />
[page:Integer offset]: 기본값은 *0*입니다. 업데이트를 시작할 위치입니다.<br />
[page:Integer count]: 기본값은 *-1*이고, 업데이트 번위를 사용하지 않는다는 의미입니다.<br /><br />
저장된 벡터의 몇몇 컴포넌트들을 업데이트 할 때만 사용됩니다 (예를 들면, 색과 관련된 컴포넌트만 업데이트할 때).
</p>
<h3>[property:Usage usage]</h3>
<p>
최적화를 목적으로 특정 데이터 저장 패턴 사용을 정의합니다.
[link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/bufferData WebGLRenderingContext.bufferData]()의 *usage* 파라미터에 대응됩니다.
기본값은 *THREE.StaticDrawUsage*입니다.
</p>
<h3>[property:Integer version]</h3>
<p>버전값으로, [page:BufferAttribute.needsUpdate needsUpdate] 속성이 true로 설정될 때 증가합니다.</p>
<h2>메서드</h2>
<h3>[method:this applyMatrix3]( [param:Matrix3 m] )</h3>
<p>현재 BufferAttribute의 모든 Vector3 엘레먼트에 matrix [page:Matrix3 m]를 적용합니다.</p>
<h3>[method:this applyMatrix4]( [param:Matrix4 m] )</h3>
<p>현재 BufferAttribute의 모든 Vector3 엘레먼트에 matrix [page:Matrix4 m]를 적용합니다.</p>
<h3>[method:this applyNormalMatrix]( [param:Matrix3 m] )</h3>
<p>현재 BufferAttribute의 모든 Vector3 엘레먼트에 일반 matrix [page:Matrix3 m]를 적용합니다.</p>
<h3>[method:this transformDirection]( [param:Matrix4 m] )</h3>
<p>현재 BufferAttribute의 모든 Vector3 엘레먼트에 matrix [page:Matrix4 m]를 적용하고, 엘레먼트를 방향 벡터로 이동합니다.</p>
<h3>[method:BufferAttribute clone]() </h3>
<p>bufferAttribute 사본을 리턴합니다.</p>
<h3>[method:BufferAttribute copy]( [param:BufferAttribute bufferAttribute] )</h3>
<p>현재의 BufferAttribute에 다른 BufferAttribute를 붙여 넣습니다.</p>
<h3>[method:BufferAttribute copyArray]( array ) </h3>
<p>[page:BufferAttribute.array array]에 해당 배열(일반 배열 혹은 TypedArray)을 복사합니다.<br /><br />
TypedArray를 복사할 때의 조건에 대한 주의사항은 [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/set TypedArray.set]
를 참고해 주세요.
</p>
<h3>[method:null copyAt] ( [param:Integer index1], [param:BufferAttribute bufferAttribute], [param:Integer index2] ) </h3>
<p>bufferAttribute[index2]의 벡터를 [page:BufferAttribute.array array][index1]에 복사합니다.</p>
<h3>[method:BufferAttribute copyColorsArray]( [param:Array colors] ) </h3>
<p>RGB 색상 값을 나타내는 배열을 [page:BufferAttribute.array array]에 복사합니다.</p>
<h3>[method:BufferAttribute copyVector2sArray]( [param:Array vectors] ) </h3>
<p>[page:Vector2]값을 나타내는 배열을 [page:BufferAttribute.array array]에 복사합니다.</p>
<h3>[method:BufferAttribute copyVector3sArray]( [param:Array vectors] ) </h3>
<p>[page:Vector3]값을 나타내는 배열을 [page:BufferAttribute.array array]에 복사합니다.</p>
<h3>[method:BufferAttribute copyVector4sArray]( [param:Array vectors] ) </h3>
<p>[page:Vector4]값을 나타내는 배열을 [page:BufferAttribute.array array]에 복사합니다.</p>
<h3>[method:Number getX]( [param:Integer index] ) </h3>
<p>해당 index의 벡터의 x 컴포넌트 값을 리턴합니다.</p>
<h3>[method:Number getY]( [param:Integer index] ) </h3>
<p>해당 index의 벡터의 y 컴포넌트 값을 리턴합니다.</p>
<h3>[method:Number getZ]( [param:Integer index] ) </h3>
<p>해당 index의 벡터의 z 컴포넌트 값을 리턴합니다.</p>
<h3>[method:Number getW]( [param:Integer index] ) </h3>
<p>해당 index의 벡터의 w 컴포넌트 값을 리턴합니다.</p>
<h3>[method:this onUpload]( [param:Function callback] ) </h3>
<p>
onUploadCallback 속성의 값을 설정합니다.<br /><br />
이 값은 [example:webgl_buffergeometry WebGL / Buffergeometry]에서 버퍼가 GPU로 전송된 후에 자유 메모리로 사용됩니다.
</p>
<h3>[method:BufferAttribute set] ( [param:Array value], [param:Integer offset] ) </h3>
<p>
value -- 복사할 [page:Array] 혹은 [page:TypedArray] 값입니다. <br />
offset -- (생략가능) 복사를 시작할 [page:BufferAttribute.array array] 의 인덱스값입니다.<br /><br />
[page:BufferAttribute.array array]에서 [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/set TypedArray.set]( [page:Array value], [page:Integer offset] )
를 호출합니다.<br /><br />
[page:Array value]가 [page:TypedArray]로 되는 조건에 대해서는 해당 페이지를 참고하세요.
</p>
<h3>[method:BufferAttribute setUsage] ( [param:Usage value] ) </h3>
<p>[page:BufferAttribute.usage usage]를 value로 설정합니다.</p>
<h3>[method:BufferAttribute setX]( [param:Integer index], [param:Float x] ) </h3>
<p> x 컴포넌트 값을 설정합니다.</p>
<h3>[method:BufferAttribute setY]( [param:Integer index], [param:Float y] ) </h3>
<p> y 컴포넌트 값을 설정합니다.</p>
<h3>[method:BufferAttribute setZ]( [param:Integer index], [param:Float z] ) </h3>
<p> z 컴포넌트 값을 설정합니다.</p>
<h3>[method:BufferAttribute setW]( [param:Integer index], [param:Float w] ) </h3>
<p> w 컴포넌트 값을 설정합니다.</p>
<h3>[method:BufferAttribute setXY]( [param:Integer index], [param:Float x], [param:Float y] ) </h3>
<p>index의 벡터의 x 및 y 컴포넌트를 설정합니다.</p>
<h3>[method:BufferAttribute setXYZ]( [param:Integer index], [param:Float x], [param:Float y], [param:Float z] ) </h3>
<p> x, y 및 z 컴포넌트를 설정합니다. </p>
<h3>[method:BufferAttribute setXYZW]( [param:Integer index], [param:Float x], [param:Float y], [param:Float z], [param:Float w] ) </h3>
<p> x, y, z 및 w 컴포넌트를 설정합니다. </p>
<h2>소스코드</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p>
메쉬, 선, 점 기하학의 표현입니다. 꼭짓점의 위치, 면 순서, 법선, 색상, UV, 버퍼에 있는 커스텀 속성을 포함하고 있으며, 데이터를 GPU에 전달하는
자원을 줄여줍니다.
</p>
<p>
속성에 있는 데이터를 읽고 수정하려면, [page:BufferAttribute] 문서를 참고하세요.
</p>
<h2>코드 예제</h2>
<code>
const geometry = new THREE.BufferGeometry();
// create a simple square shape. We duplicate the top left and bottom right
// vertices because each vertex needs to appear once per triangle.
const vertices = new Float32Array( [
-1.0, -1.0, 1.0,
1.0, -1.0, 1.0,
1.0, 1.0, 1.0,
1.0, 1.0, 1.0,
-1.0, 1.0, 1.0,
-1.0, -1.0, 1.0
] );
// itemSize = 3 because there are 3 values (components) per vertex
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
const mesh = new THREE.Mesh( geometry, material );
</code>
<h2>예제</h2>
<p>
[example:webgl_buffergeometry Mesh with non-indexed faces]<br />
[example:webgl_buffergeometry_indexed Mesh with indexed faces]<br />
[example:webgl_buffergeometry_lines Lines]<br />
[example:webgl_buffergeometry_lines_indexed Indexed Lines]<br />
[example:webgl_buffergeometry_custom_attributes_particles Particles]<br />
[example:webgl_buffergeometry_rawshader Raw Shaders]
</p>
<h2>생성자</h2>
<h3>[name]()</h3>
<div>
새 [name]를 만듭니다. 몇몇 기본값도 설정합니다.
</div>
<h2>프로퍼티</h2>
<h3>[property:Object attributes]</h3>
<p>
이 해시맵은 설정될 속성의 이름을 id로 가지고 있으며 설정해야 할 [page:BufferAttribute buffer] 값을 value로 가지고 있습니다.
프로퍼티에 직접 접근하기보다, [page:.setAttribute] 및 [page:.getAttribute]를 통해 이 기하학 속성에 접근하세요.
</p>
<h3>[property:Box3 boundingBox]</h3>
<p>
bufferGeometry의 바운딩 박스이며 [page:.computeBoundingBox]()로 계산할 수 있습니다.
기본값은 *null*입니다.
</p>
<h3>[property:Sphere boundingSphere]</h3>
<p>
bufferGeometry의 바운딩 스피어이며 [page:.computeBoundingSphere]()로 계산할 수 있습니다.
기본값은 *null*입니다.
</p>
<h3>[property:Object drawRange]</h3>
<p>
렌더링할 기하학의 부분을 정의합니다. 직접 설정하면 안되며 [page:.setDrawRange]를 사용해야 합니다.
기본 값은 다음과 같습니다.
<code>
{ start: 0, count: Infinity }
</code>
인덱스가 없는 BufferGeometry의 경우, count는 렌더링할 꼭짓점들의 갯수입니다.
인덱스가 있는 BufferGeometry의 경우, count는 렌더링할 인덱스의 갯수입니다.
</p>
<h3>[property:Array groups]</h3>
<p>
기하학을 그룹으로 나누며 각자의 WebGL 그리기 요청을 통해 렌더링 됩니다.
bufferGeometry와 함께 사용되는 재질의 배열을 허용합니다..<br /><br />
각자의 그룹은 형태의 객체입니다:
<code>{ start: Integer, count: Integer, materialIndex: Integer }</code>
start는 이 드리기 요청에서 첫 번째 엘레먼드를 지정하지만 – 첫 번째 인덱스가 없는 기하학이기때문이지만,
다른 경우는 첫 번째 삼각형 인덱스입니다. Count는 몇 개의 꼭짓점(혹은 인덱스)가 포함되었는지,
materialIndex는 사용할 재질 배열 인덱스를 지정합니다.
배열을 직접 수정하기보다는 [page:.addGroup]를 사용해 그룹을 추가합니다.
</p>
<!-- Note: groups used to be called drawCalls
<h3>[property:Array drawcalls]</h3>
<p>
For geometries that use indexed triangles, this Array can be used to split the object
into multiple WebGL draw calls. Each draw call will draw some subset of the vertices
in this geometry using the configured [page:Material shader]. This may be necessary if,
for instance, you have more than 65535 vertices in your object.
</p> -->
<h3>[property:Integer id]</h3>
<p>인스턴스의 고유한 번호입니다.</p>
<h3>[property:BufferAttribute index]</h3>
<p>
꼭짓점을 여러 개의 삼각형으로 재 사용할 수 있게 해줍니다; 이를 "indexed triangles"를 사용한다고 합니다.
각각의 삼각형은 세 꼭짓점의 인덱스와 연관되어 있습니다. 이 속성은 따라서 각 삼각형 면의 각 꼭짓점의 인덱스를 저장하고 있습니다.
이 속성이 설정되어 있지 않다면, [page:WebGLRenderer renderer]는 세 연속된 위치가 단일 삼각형을 나타낸다고 추정합니다.
기본값은 *null* 입니다.
</p>
<h3>[property:Object morphAttributes]</h3>
<p>
[page:BufferAttribute]의 해쉬맵은 기하학의 모프 타겟에 대한 세부정보를 담고 있습니다.
</p>
<h3>[property:Boolean morphTargetsRelative]</h3>
<p>
모프 타겟의 행동을 컨트롤하는데에 사용됩니다; true로 설정하면, 모프 타겟 데이터는 absolute positions/normals 대신 relative offsets으로 취급됩니다.
기본값은 *false* 입니다.
</p>
<h3>[property:String name]</h3>
<p>
인스턴스의 임의 이름입니다. 기본값은 빈 문자열입니다.
</p>
<h3>[property:Object userData]</h3>
<p>
BufferGeometry에 관한 커스텀 데이터를 저장하는데에 사용될 수 있는 객체입니다. 이 속성은 복제되지 않기 때문에
기능에 대한 참조를 포함하고 있어서는 안됩니다.
</p>
<h3>[property:String uuid]</h3>
<p>
객체 인스턴스의 [link:http://en.wikipedia.org/wiki/Universally_unique_identifier UUID]입니다.
자동으로 할당되며 수정할 수 없습니다.
</p>
<h2>메서드</h2>
<h3>이 클래스에서는 [page:EventDispatcher EventDispatcher] 메서드들이 활용 가능합니다.</h3>
<h3>[method:BufferGeometry setAttribute]( [param:String name], [param:BufferAttribute attribute] )</h3>
<p>
기하학에 대한 속성을 설정합니다. [page:.attributes]의 내부 해시맵은 속성들의 반복 속도 증가를 위해 유지되기 때문에,
속성 프로퍼티 대신 이 메서드를 사용하세요.
</p>
<h3>[method:null addGroup]( [param:Integer start], [param:Integer count], [param:Integer materialIndex] )</h3>
<p>
기하학에 그룹을 추가합니다; 프로퍼티 상세에 대해서는 [page:BufferGeometry.groups groups] 페이지를 참고하세요.
</p>
<h3>[method:null applyMatrix4]( [param:Matrix4 matrix] )</h3>
<p>꼭짓점 좌표로 직접 매트릭스 변형을 합니다.</p>
<h3>[method:BufferGeometry center] ()</h3>
<p>바운딩 박스를 기준으로 기하학을 중앙정렬합니다.</p>
<h3>[method:BufferGeometry clone]()</h3>
<p>BufferGeometry의 사본을 만듭니다.</p>
<h3>[method:BufferGeometry copy]( [param:BufferGeometry bufferGeometry] )</h3>
<p>다른 BufferGeometry를 이 BufferGeometry에 복사합니다.</p>
<h3>[method:null clearGroups]( )</h3>
<p>모든 그룹을 제거합니다.</p>
<h3>[method:null computeBoundingBox]()</h3>
<p>
기하학의 바운딩 박스를 계산하고 [page:.boundingBox] 속성을 업데이트합니다.<br />
바운딩 박스는 자동으로 계산되지 않습니다. 명시적으로 계산되어야하며 그렇지 않으면 *null* 값입니다.
</p>
<h3>[method:null computeBoundingSphere]()</h3>
<p>
기하학의 바운딩 스피어를 계산하고 [page:.boundingSphere] 속성을 업데이트합니다.<br />
바운딩 스피어는 자동으로 계산되지 않습니다. 명시적으로 계산되어야하며 그렇지 않으면 *null* 값입니다.
</p>
<h3>[method:null computeTangents]()</h3>
<p>
기하학에 탄젠트 속성을 계산하고 추가합니다.<br />
이 계산은 인덱스가 있는 기하학에만 지원되며 위치, 법선, uv 속성이 정의되어야 합니다.
</p>
<h3>[method:null computeVertexNormals]()</h3>
<p>면의 법선 평균값을 통해 꼭짓점 법선을 계산합니다.</p>
<h3>[method:null dispose]()</h3>
<p>
메모리에서 객체를 정리합니다. <br />
앱이 동작중인데 BufferGeometry를 삭제하고 싶을 때 호출합니다.
</p>
<h3>[method:BufferAttribute getAttribute]( [param:String name] )</h3>
<p>[page:BufferAttribute attribute]를 특정 이름과 함께 리턴합니다.</p>
<h3>[method:BufferAttribute getIndex] ()</h3>
<p>[page:.index] 버퍼를 리턴합니다.</p>
<h3>[method:Boolean hasAttribute]( [param:String name] )</h3>
<p>특정 이름의 속성이 존재하면 *true*를 리턴합니다.</p>
<h3>[method:BufferGeometry lookAt] ( [param:Vector3 vector] )</h3>
<p>
vector - 바라보는 시점의 월드 벡터 입니다.<br /><br />
공간의 점을 기준으로 기하학을 면을 회전시킵니다. 일반적으로 한 구간에서만 사용되며 루프 구간에서 사용되지 않습니다.
일반적인 리얼타임 메쉬 사용은 [page:Object3D.lookAt] 을 사용하세요.
</p>
<h3>[method:null merge]( [param:BufferGeometry bufferGeometry], [param:Integer offset] )</h3>
<p>병합을 시작할 지점인 임의의 오프셋으로 다른 BufferGeometry에 병합합니다.</p>
<h3>[method:null normalizeNormals]()</h3>
<p>
기하학의 모든 법선 벡터는 1의 크기를 갖습니다.
기하학 표면의 광도를 수정합니다.
</p>
<h3>[method:BufferAttribute deleteAttribute]( [param:String name] )</h3>
<p>특정 이름의 [page:BufferAttribute attribute]를 전부 삭제합니다.</p>
<h3>[method:BufferGeometry rotateX] ( [param:Float radians] )</h3>
<p>
X 축의 기하학을 회전합니다. 일반적으로 한 구간에서만 사용되며 루프 구간에서 사용되지 않습니다.
일반적인 리얼타임 메쉬 회전은 [page:Object3D.rotation] 를 사용하세요.
</p>
<h3>[method:BufferGeometry rotateY] ( [param:Float radians] )</h3>
<p>
Y 축의 기하학을 회전합니다. 일반적으로 한 구간에서만 사용되며 루프 구간에서 사용되지 않습니다.
일반적인 리얼타임 메쉬 회전은 [page:Object3D.rotation] 를 사용하세요.
</p>
<h3>[method:BufferGeometry rotateZ] ( [param:Float radians] )</h3>
<p>
Z 축의 기하학을 회전합니다. 일반적으로 한 구간에서만 사용되며 루프 구간에서 사용되지 않습니다.
일반적인 리얼타임 메쉬 회전은 [page:Object3D.rotation] 를 사용하세요.
</p>
<h3>[method:BufferGeometry scale] ( [param:Float x], [param:Float y], [param:Float z] )</h3>
<p>
기하학 데이터를 확대/축소합니다. 일반적으로 한 구간에서만 사용되며 루프 구간에서 사용되지 않습니다.
일반적인 리얼타임 메쉬 확대/축소는 [page:Object3D.scale] 를 사용하세요.
</p>
<h3>[method:BufferGeometry setIndex] ( [param:BufferAttribute index] )</h3>
<p>[page:.index] 버퍼를 설정합니다.</p>
<h3>[method:null setDrawRange] ( [param:Integer start], [param:Integer count] )</h3>
<p>[page:.drawRange] 프로퍼티를 설정합니다. 인덱스가 없는 BufferGeometry에서, count는 렌더링할 꼭짓점의 수입니다.
인덱스가 있는 BufferGeometry에서 count는 렌더링할 인덱스의 수입니다.</p>
<h3>[method:BufferGeometry setFromPoints] ( [param:Array points] )</h3>
<p>점 배열로부터 BufferGeometry의 속성을 설정합니다. from an array of points.</p>
<h3>[method:Object toJSON]()</h3>
<p>버퍼 기하학을 three.js [link:https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4 JSON Object/Scene format]로 변환합니다.</p>
<h3>[method:BufferGeometry toNonIndexed]()</h3>
<p>인덱스가 있는 BufferGeometry의 인덱스가 없는 버전을 리턴합니다.</p>
<h3>[method:BufferGeometry translate] ( [param:Float x], [param:Float y], [param:Float z] )</h3>
<p>
기하학을 이동합니다. 일반적으로 한 구간에서만 사용되며 루프 구간에서 사용되지 않습니다.
일반적인 리얼타임 메쉬 이동은 [page:Object3D.position] 를 사용하세요.
</p>
<h2>소스코드</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">
시간을 파악하는 객체입니다. [link:https://developer.mozilla.org/en-US/docs/Web/API/Performance/now performance.now]를 우선적으로 사용하며, 사용이 불가능할 때는 덜 정확한 [link:https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date/now Date.now]를 사용합니다.
</p>
<h2>생성자</h2>
<h3>[name]( [param:Boolean autoStart] )</h3>
<p>
autoStart — (생략 가능) 자동으로 시계를 시작시킬지 설정합니다. 기본값은 true 입니다.
</p>
<h2>프로퍼티</h2>
<h3>[property:Boolean autoStart]</h3>
<p>
업데이트가 최초로 호출되면 자동으로 시계를 시작시킵니다. 기본값은 true 입니다.
</p>
<h3>[property:Float startTime]</h3>
<p>
시계의 [page:Clock.start start] 메서드가 호출되면 시간을 멈춥니다.
</p>
<h3>[property:Float oldTime]</h3>
<p>
시계의 [page:Clock.start start], [page:Clock.getElapsedTime getElapsedTime] 혹은 [page:Clock.getDelta getDelta]
메서드가 호출되면 시간을 멈춥니다.
</p>
<h3>[property:Float elapsedTime]</h3>
<p>
시계가 작동한 총 시간을 가지고 있습니다.
</p>
<h3>[property:Boolean running]</h3>
<p>
시계가 동작중인지 아닌지를 나타냅니다.
</p>
<h2>메서드</h2>
<h3>[method:null start]()</h3>
<p>
시계를 시작시킵니다. 또한 [page:Clock.startTime startTime] 및 [page:Clock.oldTime oldTime]을 현재 시간으로 업데이트하고
[page:Clock.elapsedTime elapsedTime] 를 *0*으로, [page:Clock.running running] *true*로 설정합니다.
</p>
<h3>[method:null stop]()</h3>
<p>
시계를 멈추고 [page:Clock.oldTime oldTime]을 현재 시간으로 설정합니다.
</p>
<h3>[method:Float getElapsedTime]()</h3>
<p>
시계가 시작한 이후로부터의 초를 가져오며 [page:Clock.oldTime oldTime]을 현재 시간으로 설정합니다.<br />
[page:Clock.autoStart autoStart]가 *true* 이고 시계가 멈춰있는 상태라면, 시계를 시작시킵니다.
</p>
<h3>[method:Float getDelta]()</h3>
<p>
[page:Clock.oldTime oldTime]이 설정된 이후로부터 지난 초를 가져오며 [page:Clock.oldTime oldTime]을 현재 시간으로 설정합니다.<br />
[page:Clock.autoStart autoStart]가 *true* 이고 시계가 멈춰있는 상태라면, 시계를 시작시킵니다.
</p>
<h2>소스코드</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">
커스텀 객체를 위한 자바스크립트 이벤트입니다.<br />
[link:https://github.com/mrdoob/eventdispatcher.js Eventdispatcher on GitHub]
</p>
<h2>코드 예제</h2>
<code>
// Adding events to a custom object
class Car extends EventDispatcher {
start() {
this.dispatchEvent( { type: 'start', message: 'vroom vroom!' } );
}
};
// Using events with the custom object
const car = new Car();
car.addEventListener( 'start', function ( event ) {
alert( event.message );
} );
car.start();
</code>
<h2>생성자</h2>
<h3>[name]()</h3>
<p>
EventDispatcher 객체를 만듭니다.
</p>
<h2>메서드</h2>
<h3>[method:null addEventListener]( [param:String type], [param:Function listener] )</h3>
<p>
type - 리스닝할 이벤트의 타입입니다.<br />
listener - 이벤트가 작동하면 호출될 함수입니다.
</p>
<p>
이벤트 타입에 리스너를 추가합니다.
</p>
<h3>[method:Boolean hasEventListener]( [param:String type], [param:Function listener] )</h3>
<p>
type - 리스닝할 이벤트의 타입입니다.<br />
listener - 이벤트가 작동하면 호출될 함수입니다.
</p>
<p>
리스너가 이벤트 타입에 추가되었는지를 체크합니다.
</p>
<h3>[method:null removeEventListener]( [param:String type], [param:Function listener] )</h3>
<p>
type - 제거될 리스너의 타입입니다.<br />
listener - 제거될 리스너 함수입니다.
</p>
<p>
이벤트 타입에서 리스너를 제거합니다.
</p>
<h3>[method:null dispatchEvent]( [param:Object event] )</h3>
<p>
event - 작동하는 이벤트입니다.
</p>
<p>
이벤트 타입을 작동시킵니다.
</p>
<h2>소스코드</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">
이 버퍼 속성 클래스는 VBO를 생성하지 않습니다. 대신, VBO가 생성자로 전달되고 난 후의 모든 것을 사용하며 후에 *buffer* 속성으로 변경될 수 있습니다.<br /><br />
VBO와 나란히 추가적인 파라미터 전달이 필요합니다. 해당 파라미터는 다음과 같습니다:
GL 구조체, GL 데이터 타입, 꼭짓점 당 컴포넌트 갯수,
컴포넌트 당 바이트 수, 꼭짓점의 수.<br /><br />
이 클래스의 가장 일반적인 사용 사례는 어떤 종류의 GPGPU 계산이 해당 VBO를 방해하거나 심지어 생성하는 경우입니다.
</p>
<h2>생성자</h2>
<h3>[name]( [param:WebGLBuffer buffer], [param:GLenum type], [param:Integer itemSize], [param:Integer elementSize], [param:Integer count] )</h3>
<p>
*buffer* — 반드시 <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLBuffer" target="_blank">WebGLBuffer</a>여야 합니다.
<br />
*type* — <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Constants#Data_types" target="_blank">WebGL</a> 데이터 타입 중 하나.
<br />
*itemSize* — 특정 꼭짓점가 연관되어야 하는 배열의 값의 수. 예를 들어 이 속성이 3-컴포넌트 벡터(예: 위치, 법선 또는 색상)를 저장하는 경우 (
itemSize는 3이어야 합니다.
<br />
*elementSize* — 1, 2 혹은 4. 할당된 "type" 파라미터에 상응하는 사이즈(바이트).
<ul>
<li>gl.FLOAT: 4</li>
<li>gl.UNSIGNED_SHORT: 2</li>
<li>gl.SHORT: 2</li>
<li>gl.UNSIGNED_INT: 4</li>
<li>gl.INT: 4</li>
<li>gl.BYTE: 1</li>
<li>gl.UNSIGNED_BYTE: 1</li>
</ul>
*count* — 예상되는 VBO의 꼭짓점 수.
</p>
<h2>프로퍼티</h2>
<h3>[property:WebGLBuffer buffer]</h3>
<p>
현재의 <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLBuffer" target="_blank">WebGLBuffer</a> 인스턴스.
</p>
<h3>[property:Integer count]</h3>
<p>
VBO의 꼭짓점 수.
</p>
<h3>[property:Integer itemSize]</h3>
<p>
각 항목을 구성하는 값의 크기 (꼭짓점).
</p>
<h3>[property:Integer elementSize]</h3>
<p>
현재의 *type* 속성 값에 맞는 바이트 사이즈를 저장.
</p>
<p>
알려진 타입 크기 리스트는 위의 (생성자)를 참고.
</p>
<h3>[property:GLenum type]</h3>
<p>
기저의 VBO 컨텐츠를 묘사하는 <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Constants#Data_types" target="_blank">WebGL Data Type</a>
.
</p>
<p>
*elementSize*와 함께 이 속성을 설정합니다. 추천하는 방법은 *setType* 메서드를 사용하는 것입니다.
</p>
<h3>[property:Boolean isGLBufferAttribute]</h3>
<p>
읽기 전용. 언제나 *true*입니다.
</p>
<h2>메서드</h2>
<h3>[method:null setBuffer]( buffer ) </h3>
<p>*buffer* 속성을 설정합니다.</p>
<h3>[method:null setType]( type, elementSize ) </h3>
<p>*type* 및 *elementSize* 속성을 설정합니다.</p>
<h3>[method:null setItemSize]( itemSize ) </h3>
<p>*itemSize* 속성을 설정합니다.</p>
<h3>[method:null setCount]( count ) </h3>
<p>*count* 속성을 설정합니다.</p>
<h3>[property:Integer version]</h3>
<p>
버전 넘버이며 needsUpdate 속성이 true가 될 때마다 증가합니다.
</p>
<h3>[property:Boolean needsUpdate]</h3>
<p>
기본값은 *false* 입니다. true로 설정하면 [page:GLBufferAttribute.version version]을 증가시킵니다.
</p>
<h2>소스코드</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:BufferAttribute] &rarr;
<h1>[name]</h1>
<p class="desc">
[page:BufferAttribute]의 인스턴스 버전입니다.
</p>
<h2>생성자</h2>
<h3>[name]( [param:TypedArray array], [param:Integer itemSize], [param:Boolean normalized], [param:Number meshPerAttribute] )</h3>
<p>
</p>
<h2>프로퍼티</h2>
<p>상속받은 속성은 [page:BufferAttribute]를 참고하세요.</p>
<h3>[property:Number meshPerAttribute]</h3>
<p>
이 버퍼 속성의 값이 얼마나 자주 반복되어야 하는지를 정의합니다.
값이 1이라면 각 인스턴스 속성이 한 개의 인스턴스로만 사용됩니다.
값이 2라면 각 값은 두 개의 연속적인 인스턴스(그 후로)에 사용됩니다. 기본값은 *1*입니다.
</p>
<h2>메서드</h2>
<p>상속 메서드는 [page:BufferAttribute] 를 참고하세요.</p>
<h2>소스코드</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:BufferGeometry] &rarr;
<h1>[name]</h1>
<p class="desc">
[page:BufferGeometry]의 인스턴스 버전입니다.
</p>
<h2>생성자</h2>
<h3>[name]( )</h3>
<p>
</p>
<h2>프로퍼티</h2>
<p>상속 프로퍼티는 [page:BufferGeometry] 를 참고하세요.</p>
<h3>[property:Number instanceCount]</h3>
<p>
기본값은 *Infinity*입니다.
</p>
<h2>메서드</h2>
<p>상속 메서드는 [page:BufferGeometry] 를 참고하세요.</p>
<h2>소스코드</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:InterleavedBuffer] &rarr;
<h1>[name]</h1>
<p class="desc">
[page:InterleavedBuffer]의 인스턴스 버전입니다.
</p>
<h2>생성자</h2>
<h3>[name]( [param:TypedArray array], [param:Integer itemSize], [param:Number meshPerAttribute] )</h3>
<p>
</p>
<h2>프로퍼티</h2>
<p>
상속 프로퍼티는 [page:InterleavedBuffer] 를 참고하세요.
</p>
<h3>[property:Number meshPerAttribute]</h3>
<p>
기본값은 *1*입니다.
</p>
<h2>메서드</h2>
<p>
상속 메서드는 [page:InterleavedBuffer] 를 참고하세요.
</p>
<h2>소스코드</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">
"Interleaved"는 서로 다른 타입일 수도 있는 여러 속성들이(예를 들어 위치, 법선, uv, 색상)이 단일 배열 버퍼에 패키징되어있다는 뜻입니다.
<br/><br/>
인터리브 배열에 대한 설명은 여기: [link:https://blog.tojicode.com/2011/05/interleaved-array-basics.html Interleaved array basics]에서 확인할 수 있습니다.
</p>
<h2>예제</h2>
<p>[example:webgl_buffergeometry_points_interleaved webgl / buffergeometry / points / interleaved]</p>
<h2>생성자</h2>
<h3>[name]( [param:TypedArray array], [param:Integer stride] )</h3>
<p>
[page:TypedArray array] -- 공유 버퍼를 가진 타입 배열입니다. 기하학 데이터를 저장합니다.<br/>
[page:Integer stride] -- 꼭짓점 당 타입-배열 엘레먼트의 수입니다.
</p>
<h2>프로퍼티</h2>
<h3>[property:Array array]</h3>
<p>
공유 버퍼를 가진 타입 배열입니다. 기하학 데이터를 저장합니다.
</p>
<h3>[property:Integer stride]</h3>
<p>
꼭짓점 당 타입-배열 엘레먼트의 수입니다.
</p>
<h3>[property:Integer count]</h3>
<p>
배열 안에 있는 엘레먼트의 총 수입니다
</p>
<h3>[property:Object updateRange]</h3>
<p>
오프셋과 카운트를 가지고 있는 객체입니다.
</p>
<h3>[property:Number updateRange.offset]</h3>
<p>
기본값은 *0* 입니다.
</p>
<h3>[property:Number updateRange.count]</h3>
<p>
기본값은 *-1* 입니다.
</p>
<h3>[property:String uuid]</h3>
<p>
인스턴스의 [link:http://en.wikipedia.org/wiki/Universally_unique_identifier UUID]입니다. 자동으로 할당되는 값이며, 수정할 수 없습니다.
</p>
<h3>[property:Integer version]</h3>
<p>
버전 넘버이며 needsUpdate 속성이 true일 때 증가합니다.
</p>
<h3>[property:Boolean needsUpdate]</h3>
<p>
기본값은 *false*입니다. true로 설정하면 [page:InterleavedBuffer.version version]를 증가시킵니다.
</p>
<h3>[property:Usage usage]</h3>
<p>
최적화 목적의 데이터 저장 패턴의 사용법을 정의합니다.
[link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/bufferData WebGLRenderingContext.bufferData]()의 *usage* 파라미터에 해당합니다.
</p>
<h2>메서드</h2>
<h3>[method:InterleavedBuffer copy]( [param:InterleavedBuffer source] ) </h3>
<p>
다른 [name]를 이[name]에 복사합니다.
</p>
<h3>[method:InterleavedBuffer copyAt]( [param:Integer index1], [param:InterleavedBuffer attribute], [param:Integer index2] ) </h3>
<p>속성 [index2]의 데이터를 [page:InterleavedBuffer.array array][index1]에 복사합니다.</p>
<h3>[method:InterleavedBuffer set]( [param:TypedArray value], [param:Integer offset] ) </h3>
<p>
value - 원본 (타입) 배열.<br/>
offset - 원본 배열로부터 값을 작성하기 시작할 타깃 배열의 오프셋. 기본값은 *0*입니다.<br/><br />
버퍼에 여러 값을 저장하고 특정 배열로부터 입력값을 읽습니다.
</p>
<h3>[method:InterleavedBuffer clone]( [param:Object data] ) </h3>
<p>
data - 이 오브젝트는 인터리브 속성을 가진 기하학의 적절한 복사과정을 위한 공유 배열 버퍼를 가지고 있습니다.
<br/><br />
이 [name]의 사본을 만듭니다.
</p>
<h3>[method:InterleavedBuffer setUsage] ( [param:Usage value] ) </h3>
<p>[page:InterleavedBuffer.usage usage]를 value 로 설정합니다.</p>
<h3>[method:InterleavedBuffer toJSON]( [param:Object data] ) </h3>
<p>
data - 이 오브젝트는 인터리브 속성을 가진 기하학의 적절한 시리얼라이징을 위한 공유 배열 버퍼를 가지고 있습니다.<br/><br />
이 [name]을 시리얼화합니다.
</p>
<h2>소스코드</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">
</p>
<h2>생성자</h2>
<h3>[name]( [param:InterleavedBuffer interleavedBuffer], [param:Integer itemSize], [param:Integer offset], [param:Boolean normalized] )</h3>
<p>
</p>
<h2>프로퍼티</h2>
<h3>[property:InterleavedBuffer data]</h3>
<p>
생성자로 전달된 [page:InterleavedBuffer InterleavedBuffer] 인스턴스입니다.
</p>
<h3>[property:TypedArray array]</h3>
<p>
[page:InterleavedBufferAttribute.data data].array의 값입니다.
</p>
<h3>[property:Integer count]</h3>
<p>
[page:InterleavedBufferAttribute.data data].count의 값입니다.
버퍼가 3-컴포넌트 항목(위치, 법선, 색상 등의)을 저장하고 있을 때,
저장된 항목들의 수를 카운팅합니다.
</p>
<h3>[property:Integer itemSize]</h3>
<p>
각 항목을 구성하는 값의 수입니다.
</p>
<h3>[property:String name]</h3>
<p>
이 속성 인스턴스의 임시 이름입니다. 기본값은 빈 문자열입니다.
</p>
<h3>[property:Boolean needsUpdate]</h3>
<p>
기본값은 *false*입니다. *true*로 설정하면 모든 인터리브 버퍼(특정 속성 데이터만이 아닌)를 GPU에 다시 전송합니다.
</p>
<h3>[property:Boolean normalized]</h3>
<p>
기본값은 *false*입니다.
</p>
<h3>[property:Integer offset]</h3>
<p>
항목이 시작하는 기저 배열 버퍼의 오프셋입니다.
</p>
<h2>메서드</h2>
<h3>[method:this applyMatrix4]( [param:Matrix4 m] )</h3>
<p>[page:Matrix4 m] 매트릭스를 이 InterleavedBufferAttribute의 모든 Vector3 엘레먼트에 적용합니다.</p>
<h3>[method:this applyNormalMatrix]( [param:Matrix3 m] )</h3>
<p>[page:Matrix3 m] 노멀 매트릭스를 이 InterleavedBufferAttribute의 모든 Vector3 엘레먼트에 적용합니다.</p>
<h3>[method:this transformDirection]( [param:Matrix4 m] )</h3>
<p>[page:Matrix4 m] 매트릭스를 이 InterleavedBufferAttribute의 모든 Vector3 엘레먼트에 적용하고, 엘레먼트를 방향 벡터로 이동합니다.</p>
<h3>[method:Number getX]( [param:Integer index] ) </h3>
<p>해당 index의 항목의 x 컴포넌트를 리턴합니다.</p>
<h3>[method:Number getY]( [param:Integer index] ) </h3>
<p>해당 index의 항목의 y 컴포넌트를 리턴합니다.</p>
<h3>[method:Number getZ]( [param:Integer index] ) </h3>
<p>해당 index의 항목의 z 컴포넌트를 리턴합니다.</p>
<h3>[method:Number getW]( [param:Integer index] ) </h3>
<p>해당 index의 항목의 w 컴포넌트를 리턴합니다.</p>
<h3>[method:null setX]( [param:Integer index], [param:Float x] ) </h3>
<p>해당 index의 항목의 x 컴포넌트를 설정합니다.</p>
<h3>[method:null setY]( [param:Integer index], [param:Float y] ) </h3>
<p>해당 index의 항목의 y 컴포넌트를 설정합니다.</p>
<h3>[method:null setZ]( [param:Integer index], [param:Float z] ) </h3>
<p>해당 index의 항목의 z 컴포넌트를 설정합니다.</p>
<h3>[method:null setW]( [param:Integer index], [param:Float w] ) </h3>
<p>해당 index의 항목의 w 컴포넌트를 설정합니다.</p>
<h3>[method:null setXY]( [param:Integer index], [param:Float x], [param:Float y] ) </h3>
<p>해당 index의 항목의 x, y 컴포넌트를 설정합니다.</p>
<h3>[method:null setXYZ]( [param:Integer index], [param:Float x], [param:Float y], [param:Float z] ) </h3>
<p>해당 index의 항목의 x, y, z 컴포넌트를 설정합니다.</p>
<h3>[method:null setXYZW]( [param:Integer index], [param:Float x], [param:Float y], [param:Float z], [param:Float w] ) </h3>
<p>해당 index의 항목의 x, y, z, w 컴포넌트를 설정합니다.</p>
<h2>소스코드</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">
[page:Layers] 오브젝트는 [page:Object3D]를 1개에서 32개의 레이어에 0에서 31의 숫자로 할당합니다.
- 내부적으로 레이어들은 [link:https://en.wikipedia.org/wiki/Mask_(computing) bit mask]로 저장되며, 기본값으로 모든
Object3D들은 0번 레이어의 멤버입니다. <br /><br />
가시성을 컨트롤하는데에 사용할 수 있습니다. - 카메라의 뷰가 렌더링될 때 오브젝트는 반드시 [page:Camera camera]와 가시 레이어를 공유해야합니다.<br /><br />
[page:Object3D]로부터 상속받은 모든 클래스들은 [page:Object3D.layers] 프로퍼티를 가지고 있으며 이는 이 클래스의 인스턴스입니다.
</p>
<h2>예제</h2>
<p>
[example:webgl_layers WebGL / layers]
</p>
<h2>생성자</h2>
<h3>[name]()</h3>
<p>
새 레이어 오브젝트를 만들고 최초 멤버 레이어 0을 설정합니다.
</p>
<h2>프로퍼티</h2>
<h3>[property:Integer mask]</h3>
<p>
현재 레이어가 속해있는 32 레이어들의 비트 마스크를 저장하고 있습니다.
</p>
<h2>메서드</h2>
<h3>[method:null disable]( [param:Integer layer] )</h3>
<p>
layer - 0부터 31까지의 정수.<br /><br />
이 *layer*의 멤버 속성을 제거합니다.
</p>
<h3>[method:null enable]( [param:Integer layer] )</h3>
<p>
layer - 0부터 31까지의 정수.<br /><br />
이 *layer*에 멤버 속성을 추가합니다.
</p>
<h3>[method:null set]( [param:Integer layer] )</h3>
<p>
layer - 0부터 31까지의 정수.<br /><br />
*layer*의 멤버 속성을 설정하고, 다른 모든 레이어들의 멤버 속성을 제거합니다.
</p>
<h3>[method:Boolean test]( [param:Layers layers] )</h3>
<p>
layers - 레이어 오브젝트<br /><br />
전달받은 *layers* 오브젝트가 적어도 1개 이상의 레이어를 가지고 있으면 true를 리턴합니다.
</p>
<h3>[method:null toggle]( [param:Integer layer] )</h3>
<p>
layer - 0부터 31까지의 정수.<br /><br />
ㄴ*layer*의 멤버 속성을 전환합니다.
</p>
<h3>[method:null enableAll]()</h3>
<p>
모든 레이어에 멤버 속성을 추가합니다.
</p>
<h3>[method:null disableAll]()</h3>
<p>
모든 레이어의 멤버 속성을 제거합니다.
</p>
<h2>소스코드</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>
此差异已折叠。
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">
이 클래스는 [link:https://en.wikipedia.org/wiki/Ray_casting raycasting]을 보조하기 위해 만들어졌습니다.
레이캐스팅은 여러 개체 중 마우스로 선택(마우스가 3d 공간의 객체 위에서 작동하는)하는 기능을 담당합니다.
</p>
<h2>코드 예제</h2>
<code>
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
function onMouseMove( event ) {
// calculate mouse position in normalized device coordinates
// (-1 to +1) for both components
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}
function render() {
// update the picking ray with the camera and mouse position
raycaster.setFromCamera( mouse, camera );
// calculate objects intersecting the picking ray
const intersects = raycaster.intersectObjects( scene.children );
for ( let i = 0; i < intersects.length; i ++ ) {
intersects[ i ].object.material.color.set( 0xff0000 );
}
renderer.render( scene, camera );
}
window.addEventListener( 'mousemove', onMouseMove, false );
window.requestAnimationFrame(render);
</code>
<h2>예제</h2>
<p>
[example:webgl_interactive_cubes Raycasting to a Mesh]<br />
[example:webgl_interactive_cubes_ortho Raycasting to a Mesh in using an OrthographicCamera]<br />
[example:webgl_interactive_buffergeometry Raycasting to a Mesh with BufferGeometry]<br />
[example:webgl_instancing_raycast Raycasting to a InstancedMesh]<br />
[example:webgl_interactive_lines Raycasting to a Line]<br />
[example:webgl_interactive_raycasting_points Raycasting to Points]<br />
[example:webgl_geometry_terrain_raycast Terrain raycasting]<br />
[example:webgl_interactive_voxelpainter Raycasting to paint voxels]<br />
[example:webgl_raycast_texture Raycast to a Texture]
</p>
<h2>생성자</h2>
<h3>[name]( [param:Vector3 origin], [param:Vector3 direction], [param:Float near], [param:Float far] ) {</h3>
<p>
[page:Vector3 origin] — 레이캐스팅이 활용되는 시점 벡터입니다.<br />
[page:Vector3 direction] — 레이 방향을 가지고 있는 방향 벡터입니다. 정규화되어야 합니다.<br />
[page:Float near] — near보다 바깥 범위에 있는 결과값들입니다. 음수가 될 수 없습니다. 기본값은 0입니다.<br />
[page:Float far] — far 안쪽 범위에 있는 결과값들입니다. near보다 작을 수 없습니다. 기본값은 무한대입니다.
</p>
<p>
새 레이캐스터 객체를 만듭니다.<br />
</p>
<h2>프로퍼티</h2>
<h3>[property:Float far]</h3>
<p>
레이캐스터의 far 요소입니다. 이 값은 거리에 비례해 버려지는 객체들을 나타냅니다.
이 값은 음수가 될 수 없으며 near 프로퍼티보다 커야합니다.
</p>
<h3>[property:Float near]</h3>
<p>
레이캐스터의 near 요소입니다. 이 값은 거리에 비례해 버려지는 객체들을 나타냅니다.
이 값은 음수가 될 수 없으며 far 프로퍼티보다 작아야 합니다.
</p>
<h3>[property:Camera camera]</h3>
<p>
[page:Sprites]같은 빌보드객체처럼 뷰에 의존하는 객체에 대항 레이캐스팅 시에 사용되는 카메라입니다.
이 값은 수동으로 설정하거나 "setFromCamera"를 호출해야 합니다.
기본값은 null입니다.
</p>
<h3>[property:Layers layers]</h3>
<p>
[name]에서 인터섹션 테스트 시에 3d 객체를 선택적으로 무시할 때 사용됩니다. 아래 코드 예제에서 *1* 레이어에 있는 3D 객체들만 [name]의 인스턴스가 될 것입니다.
<code>
raycaster.layers.set( 1 );
object.layers.enable( 1 );
</code>
</p>
<h3>[property:Object params]</h3>
<p>
다음과 같은 프로퍼티를 가지고 있는 객체입니다:
<code>
{
Mesh: {},
Line: { threshold: 1 },
LOD: {},
Points: { threshold: 1 },
Sprite: {}
}
</code>
여기서 threshold는 객체를 교차할 때 레이캐스터의 정밀도(월드 단위)입니다.
</p>
<h3>[property:Ray ray]</h3>
<p>레이캐스팅에 사용되는 [Page:Ray]입니다.</p>
<h2>메서드</h2>
<h3>[method:null set]( [param:Vector3 origin], [param:Vector3 direction] )</h3>
<p>
[page:Vector3 origin] — 레이캐스팅이 활용되는 시점 벡터입니다.<br />
[page:Vector3 direction] — 레이 방향을 정하는 정규화된 방향 벡터입니다.
</p>
<p>
새 시점과 방향으로 레이를 업데이트합니다. 이 메서드는 인자의 값만을 복사한다는 점에 주의하세요.
</p>
<h3>[method:null setFromCamera]( [param:Vector2 coords], [param:Camera camera] )</h3>
<p>
[page:Vector2 coords] — 마우스의 2D 좌표이며 정규화 디바이스 좌표입니다(NDC)---X 및 Y 컴포넌트는 -1 과 1 사이입니다.<br />
[page:Camera camera] — 레이의 시점이 되는 카메라입니다.
</p>
<p>
레이의 새 시점과 방향을 업데이트합니다.
</p>
<h3>[method:Array intersectObject]( [param:Object3D object], [param:Boolean recursive], [param:Array optionalTarget] )</h3>
<p>
[page:Object3D object] — 레이와의 교차 체크를 하는 객체입니다.<br />
[page:Boolean recursive] — true라면, 모든 자식들도 함게 체크합니다. false라면 해당 객체와의 교차만 체크합니다. 기본값은 false입니다.<br />
[page:Array optionalTarget] — (생략가능) 결과값을 설정할 타겟입니다. 아니면 [page:Array]가 인스턴스화됩니다. 이 값을 설정하면, 모든 요청 전에 배열을 제거해야합니다 (예를 들어 array.length = 0;).
</p>
<p>
자식 항목이 포함되거나 포함되지 않은 객체와 레이 사이의 모든 교차를 체크합니다. 교차는 거리별로 가장 가까운 거리부터 리턴됩니다. 교차 배열은 아래와 같이 리턴됩니다.
</p>
<code>
[ { distance, point, face, faceIndex, object }, ... ]
</code>
<p>
[page:Float distance] – 레이의 시점과 교차 간의 거리<br />
[page:Vector3 point] – 월드 좌표에서의 교차점<br />
[page:Object face] – 교차면<br />
[page:Integer faceIndex] – 교차 면의 인덱스<br />
[page:Object3D object] – 교차된 객체<br />
[page:Vector2 uv] - 교차점의 U,V 좌표<br />
[page:Vector2 uv2] - 교차점의 U,V 2차 좌표<br />
[page:Integer instanceId] – InstancedMesh에 교차하는 레이의 인스턴스 인덱스 넘버입니다.
</p>
<p>
*Raycaster*는 레이가 객체에 교차하는지 아닌지 판단할 때의 전달받은 객체의 [page:Object3D.raycast raycast] 메서드를 대신합니다. 이는 [page:Line lines]과 [page:Points pointclouds]와 달리 [page:Mesh meshes]가 레이캐스팅에 다르게 반응할 수 있게 합니다.
</p>
<p>
메쉬의 면은 [page:.ray ray]의 시점에서 탐지 가능할 수 있도록 마주보고 있어야 하는 것에 주의하세요;
면의 뒤쪽을 통과하는 레이 교차는 탐지디지 않을 것입니다.
객체의 양 면을 레이캐스팅하고 싶다면, [page:Mesh.material material]의 [page:Material.side side] 프로퍼티를 *THREE.DoubleSide*로 설정해야합니다.
</p>
<h3>[method:Array intersectObjects]( [param:Array objects], [param:Boolean recursive], [param:Array optionalTarget] )</h3>
<p>
[page:Array objects] — 레이의 교차를 체크하기 위한 객체입니다.<br />
[page:Boolean recursive] — true면 객체의 모든 자식들도 체크합니다. 아니면 객체만의 교차를 체크합니다. 기본값은 false입니다.<br />
[page:Array optionalTarget] — (생략가능) 결과값을 설정할 타겟입니다. 아니면 [page:Array]가 인스턴스화됩니다. 이 값을 설정하면, 모든 요청 전에 배열을 제거해야합니다 (예를 들어 array.length = 0;).
</p>
<p>
자식 항목이 포함되거나 포함되지 않은 객체와 레이 사이의 모든 교차를 체크합니다. 교차는 거리별로 가장 가까운 거리부터 리턴됩니다. 교차는 [page:.intersectObject]와 같은 방식으로 리턴됩니다.
</p>
<h2>소스코드</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">유니폼은 전역 [link:https://www.opengl.org/documentation/glsl/ GLSL] 변수입니다. 셰이더 프로그램으로 전달됩니다.
</p>
<h2>코드 예제</h2>
<p>
[page:ShaderMaterial]의 유니폼이 선언될 때는, 값 혹은 객체로부터 선언됩니다.
</p>
<code>
uniforms: {
time: { value: 1.0 },
resolution: new Uniform( new Vector2() )
};
</code>
<h2>유니폼 타입</h2>
<p>
각 유니폼에는 *value* 프로퍼티가 있어야 합니다. 값의 타입은 아래 표에 있는 기본 GLSL 유형에 대해 지정된 GLSL 코드의 유니폼 변수 타입과 일치해야 합니다.
유니폼 구조 및 배열도 지원됩니다. 기본 유형의 GLSL 배열은 THREE 객체의 배열로 지정되거나 모든 객체의 데이터를 포함하는 플랫 배열로 지정되어야 합니다.
즉, 배열 안의 GLSL 기본 요소는 배열로 표현해서는 안 됩니다. 이 규칙은 반대로는 적용되지 않습니다.
*vec2* 배열은 다섯 벡터의 길이를 각각 가지고 있기 때문에 배열 안에 배열을 가지고 있거나, 다섯개의 [page:Vector2] 객체, 10개의 *number*를 가지고 있어야 합니다.
</p>
<table>
<caption><a id="uniform-types">유니폼 타입</a></caption>
<thead>
<tr>
<th>GLSL 타입</th>
<th>JavaScript 타입</th>
</tr>
</thead>
<tbody>
<tr>
<td>int</td>
<td>[page:Number]</td>
</tr>
<tr>
<td>uint (WebGL 2)</td>
<td>[page:Number]</td>
</tr>
<tr>
<td>float</td>
<td>[page:Number]</td>
</tr>
<tr>
<td>bool</td>
<td>[page:Boolean]</td>
</tr>
<tr>
<td>bool</td>
<td>[page:Number]</td>
</tr>
<tr>
<td>vec2</td>
<td>[page:Vector2 THREE.Vector2]</td>
</tr>
<tr>
<td>vec2</td>
<td>[page:Float32Array Float32Array] (*)</td>
</tr>
<tr>
<td>vec2</td>
<td>[page:Array Array] (*)</td>
</tr>
<tr>
<td>vec3</td>
<td>[page:Vector3 THREE.Vector3]</td>
</tr>
<tr>
<td>vec3</td>
<td>[page:Color THREE.Color]</td>
</tr>
<tr>
<td>vec3</td>
<td>[page:Float32Array Float32Array] (*)</td>
</tr>
<tr>
<td>vec3</td>
<td>[page:Array Array] (*)</td>
</tr>
<tr>
<td>vec4</td>
<td>[page:Vector4 THREE.Vector4]</td>
</tr>
<tr>
<td>vec4</td>
<td>[page:Quaternion THREE.Quaternion]</td>
</tr>
<tr>
<td>vec4</td>
<td>[page:Float32Array Float32Array] (*)</td>
</tr>
<tr>
<td>vec4</td>
<td>[page:Array Array] (*)</td>
</tr>
<tr>
<td>mat2</td>
<td>[page:Float32Array Float32Array] (*)</td>
</tr>
<tr>
<td>mat2</td>
<td>[page:Array Array] (*)</td>
</tr>
<tr>
<td>mat3</td>
<td>[page:Matrix3 THREE.Matrix3]</td>
</tr>
<tr>
<td>mat3</td>
<td>[page:Float32Array Float32Array] (*)</td>
</tr>
<tr>
<td>mat3</td>
<td>[page:Array Array] (*)</td>
</tr>
<tr>
<td>mat4</td>
<td>[page:Matrix3 THREE.Matrix4]</td>
</tr>
<tr>
<td>mat4</td>
<td>[page:Float32Array Float32Array] (*)</td>
</tr>
<tr>
<td>mat4</td>
<td>[page:Array Array] (*)</td>
</tr>
<tr>
<td>ivec2, bvec2</td>
<td>[page:Float32Array Float32Array] (*)</td>
</tr>
<tr>
<td>ivec2, bvec2</td>
<td>[page:Array Array] (*)</td>
</tr>
<tr>
<td>ivec3, bvec3</td>
<td>[page:Int32Array Int32Array] (*)</td>
</tr>
<tr>
<td>ivec3, bvec3</td>
<td>[page:Array Array] (*)</td>
</tr>
<tr>
<td>ivec4, bvec4</td>
<td>[page:Int32Array Int32Array] (*)</td>
</tr>
<tr>
<td>ivec4, bvec4</td>
<td>[page:Array Array] (*)</td>
</tr>
<tr>
<td>sampler2D</td>
<td>[page:Texture THREE.Texture]</td>
</tr>
<tr>
<td>samplerCube</td>
<td>[page:CubeTexture THREE.CubeTexture]</td>
</tr>
</tbody>
</table>
<p>
(*) 동일한 GLSL 타입의 (가장 안쪽) 배열(차원)도 동일하며, 배열 내 모든 벡터 또는 배열의 재질을 포함합니다.
</p>
<h2>구조화된 유니폼</h2>
<p>
때때로 셰이더 코드에서 유니폼을 *구조*로 구성하고자 할 수 있습니다. *three.js*가 구조화된 유니폼 데이터를 처리할 수 있도록 다음 스타일을 사용해야 합니다.
</p>
<code>
uniforms = {
data: {
value: {
position: new Vector3(),
direction: new Vector3( 0, 0, 1 )
}
}
};
</code>
이 정의는 다음 GLSL 코드로 매핑될 수 있습니다.
<code>
struct Data {
vec3 position;
vec3 direction;
};
uniform Data data;
</code>
<h2>배열이 있는 구조화된 유니폼</h2>
<p>
배열 *구조*를 관리하는 것도 가능합니다. 이 기능의 사용 구문은 다음과 같습니다:
</p>
<code>
const entry1 = {
position: new Vector3(),
direction: new Vector3( 0, 0, 1 )
};
const entry2 = {
position: new Vector3( 1, 1, 1 ),
direction: new Vector3( 0, 1, 0 )
};
uniforms = {
data: {
value: [ entry1, entry2 ]
}
};
</code>
이 정의는 다음 GLSL 코드로 매핑될 수 있습니다.
<code>
struct Data {
vec3 position;
vec3 direction;
};
uniform Data data[ 2 ];
</code>
<h2>생성자</h2>
<h3>[name]( [param:Object value] )</h3>
<p>
value -- 유니폼을 설정할 값을 가지고 있는 객체입니다. 위에 있는 유니폼 타입 중 하나여야 합니다.
</p>
<h2>프로퍼티</h2>
<h3>[property:Object value]</h3>
<p>
유니폼의 현재 값입니다.
</p>
<h2>메서드</h2>
<h3>[method:Uniform clone]()</h3>
<p>
현재 유니폼의 사본을 리턴합니다.<br />
유니폼의 값 프로퍼티가 clone() 메서드를 가진 [page:Object]라면 이 메서드가 사용됩니다. 아니라면 값은 할당된 값으로 복사됩니다.
배열 값은 복제된 [page:Uniform]들이 공유합니다.
</p>
<h2>소스코드</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<base href="../../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:BufferAttribute] &rarr;
<h1>BufferAttribute Types</h1>
<p class="desc">
three.js에서는 아홉 개의 [page:BufferAttribute] 타입을 사용할 수 있습니다. 이 타입들은 JavaScript의
[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Syntax Typed Arrays]에 대응됩니다.
</p>
<code>
THREE.Float64BufferAttribute
THREE.Float32BufferAttribute
THREE.Float16BufferAttribute
THREE.Uint32BufferAttribute
THREE.Int32BufferAttribute
THREE.Uint16BufferAttribute
THREE.Int16BufferAttribute
THREE.Uint8ClampedBufferAttribute
THREE.Uint8BufferAttribute
THREE.Int8BufferAttribute
</code>
<h2>생성자</h2>
<p>위의 타입들은 전부 같은 방법으로 호출됩니다.</p>
<h3>TypedBufferAttribute( [param:Array_or_Integer array], [param:Integer itemSize], [param:Boolean normalized] )</h3>
<p>
array -- typed 혹은 untyped (일반) 배열이나 길이를 나타내는 정수가 올 수 있습니다.
배열의 값은 타입이 특정된 값으로 변환됩니다.
길이를 받으면 새 TypedArray가 생성되고 모든 엘레먼트가 0부터 시작됩니다.<br /><br />
itemSize -- 특정 꼭짓점에 대응되는 배열 값의 수입니다.<br /><br />
normalized -- (생략가능) 버퍼에 있는 기저 데이터가 GLSL 코드에서 값으로 맵핑되는 방식입니다.
</p>
<h2>프로퍼티</h2>
<p>
상속 프로퍼티에 관해서는 [page:BufferAttribute] 를 참고하세요.
</p>
<h2>메서드</h2>
<p>
상속 메서드에 관해서는 [page:BufferAttribute] 를 참고하세요.
</p>
<h2>소스코드</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/core/BufferAttribute.js src/core/BufferAttribute.js]
</p>
</body>
</html>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册