<div id="readability-page-1" class="page"><div><img src="https://velog.velcdn.com/images/hyounglee/post/a5b99055-98bf-4980-8d99-c1397c16c5b6/image.jpg">
<h2 id="geometries">Geometries</h2>
정점(vertices)와 면으로 이루어진 요소들 
particles은 vertices의 꼭지점을 의미한다.
<h2 id="built-in-geometry"><a href="https://threejs.org/docs/?q=BufferGeo#api/en/core/BufferGeometry">Built-in Geometry</a></h2>
<code>translate()</code>, <code>rotateX()</code>, <code>normalize()</code> 와 같은 메서드를 사용할 수 있다. 이 메서드는 mesh가 아닌 vertices에 적용되는 것이다.
<ul>
<li>BoxGeometry: 상자를 만듭니다.</li>
<li>PlaneGeometry: 직사각형 평면을 만듭니다.</li>
<li>CircleGeometry: 원반 또는 원반의 일부(원형 차트와 유사)를 만듭니다.</li>
<li>ConeGeometry: 원뿔 또는 원뿔의 일부를 만듭니다. 원뿔의 밑면을 열거나 닫을 수 있습니다.</li>
<li>CylinderGeometry: 원통을 만듭니다. 원통의 양쪽 끝을 열거나 닫을 수 있으며 각 끝의 반지름을 변경할 수 있습니다.</li>
<li>RingGeometry: 평평한 링 또는 평평한 원의 일부를 만듭니다.</li>
<li>TorusGeometry: 두께가 있는 링(도넛과 유사) 또는 링의 일부를 만듭니다.</li>
<li>TorusKnotGeometry: 일종의 매듭 지오메트리를 만듭니다.</li>
<li>DodecahedronGeometry: 12면 구체를 만듭니다. 더 둥근 구체를 만들기 위해 세부 사항을 추가할 수 있습니다.</li>
<li>OctahedronGeometry: 8면 구체를 만듭니다. 더 둥근 구체를 만들기 위해 세부 사항을 추가할 수 있습니다.</li>
<li>TetrahedronGeometry: 4면 구체를 만듭니다(세부 사항을 늘리지 않으면 구체라고 하기 어렵습니다). 더 둥근 구체를 만들기 위해 세부 사항을 추가할 수 있습니다.</li>
<li>IcosahedronGeometry: 거의 같은 크기의 삼각형으로 구성된 구체를 만듭니다.</li>
<li>SphereGeometry: 가장 일반적인 유형의 구체를 만듭니다. 여기서 면은 사각형처럼 보입니다(사각형은 두 개의 삼각형의 조합일 뿐입니다).</li>
<li>ShapeGeometry: 경로를 기반으로 모양을 만듭니다.</li>
<li>TubeGeometry: 경로를 따라 튜브를 만듭니다.</li>
<li>ExtrudeGeometry: 경로를 기반으로 돌출을 만듭니다. 베벨을 추가하고 제어할 수 있습니다.</li>
<li>LatheGeometry: 꽃병 또는 꽃병의 일부(회전과 유사)를 만듭니다.</li>
<li>TextGeometry: 3D 텍스트를 만듭니다. typeface json 형식으로 글꼴을 제공해야 합니다.</li>
</ul>
<h2 id="boxgeometry">BoxGeometry</h2>
<blockquote>
순서대로 여섯가지 파라미터를 갖는다. 
먼저 가로, 세로, 높이의 길이. 
1. width — 길이(X axis) Optional; defaults to 1. 
2. height — 높이(Y axis) Optional; defaults to 1. 
3. depth — 깊이(Z axis) Optional; defaults to 1. 
그리고 각 면이 몇 개의 세그먼트로 나뉘는지를 보여준다. 
4. widthSegments — Optional; defaults to 1. 
5. heightSegments — Optional; defaults to 1. 
6. depthSegments — Optional; defaults to 1.
</blockquote>
<pre><code>/*
 * 6개의 파라미터를 가진다.
 * 가로, 세로, 높이의 길이
 * 그리고 각 면이 몇 개의 세그먼트로 이루어질지다.
 */
const geometry = new THREE.BoxGeometry(1, 1, 1, 1, 2, 3)
const material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true })
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)</code></pre>
<img src="https://velog.velcdn.com/images/hyounglee/post/47f62e11-9313-4eda-ab0e-025da17187cc/image.png">
<h2 id="float32array"><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Float32Array">Float32Array</a></h2>
<ul>
<li>Typed array</li>
<li>float 타입</li>
<li>max length = 3</li>
</ul>
Float32Array를 만드는 두가지 방법이 있다.
<pre><code>const positionArray = new Float32Array(9)

positionArray[0] = 0
positionArray[1] = 0
positionArray[2] = 0

positionArray[3] = 0
positionArray[4] = 1
positionArray[5] = 0

positionArray[6] = 1
positionArray[7] = 0
positionArray[8] = 0</code></pre>
각각 x, y, z 가 위치하는 정점을 의미한다.
<pre><code>const positionArray = new Float32Array([
 0, 0, 0, // 1
 0, 1, 0, // 2
 1, 0, 0, // 3
])</code></pre>
<pre><code>const geometry = new THREE.BufferGeometry()

/* parameter - array: THREE.TypedArray, itemSize: number, normalized?: boolean */
const positionAttribute = new THREE.BufferAttribute(positionArray, 3)

geometry.setAttribute('position', positionAttribute)</code></pre>
<img src="https://velog.velcdn.com/images/hyounglee/post/ef66bc0f-e1b1-4f64-b0ec-021a37d2f015/image.png">
여러 개의 삼각형 도형을 랜덤하게 생성해보자.
<pre><code>// Scene
const scene = new THREE.Scene()
const geometry = new THREE.BufferGeometry()

const count = 5000
const positionsArray = new Float32Array(count * 3 * 3) // 삼각형은 3개의 정점과 각 정점은 3개의 좌표를 가지므로 3을 곱해준다.

for (let i = 0; i &lt; count * 3 * 3; i++) {
	positionsArray[i] = (Math.random() - 0.5) * 4
}

const positionAttribute = new THREE.BufferAttribute(positionsArray, 3) // 3개의 좌표를 가진 버퍼 어트리뷰트를 생성한다.
geometry.setAttribute('position', positionAttribute)</code></pre>
<img src="https://velog.velcdn.com/images/hyounglee/post/0017cb51-10ea-415e-a517-c2d81c6945e2/image.png"></div></div>

(งᐖ)ว

Geometries
정점(vertices)와 면으로 이루어진 요소들
particles은 vertices의 꼭지점을 의미한다.
Built-in Geometry
translate(), rotateX(), normalize() 와 같은 메서드를 사용할 수 있다. 이 메서드는 mesh가 아닌 vertices에 적용되는 것이다.
BoxGeometry: 상자를 만듭니다.
PlaneGeometry: 직사각형 평면을 만듭니다.
CircleGeometry: 원반 또는 원반의 일부(원형 차트와 유사)를 만듭니다.
ConeGeometry: 원뿔 또는 원뿔의 일부를 만듭니다. 원뿔의 밑면을 열거나 닫을 수 있습니다.
CylinderGeometry: 원통을 만듭니다. 원통의 양쪽 끝을 열거나 닫을 수 있으며 각 끝의 반지름을 변경할 수 있습니다.
RingGeometry: 평평한 링 또는 평평한 원의 일부를 만듭니다.
TorusGeometry: 두께가 있는 링(도넛과 유사) 또는 링의 일부를 만듭니다.
TorusKnotGeometry: 일종의 매듭 지오메트리를 만듭니다.
DodecahedronGeometry: 12면 구체를 만듭니다. 더 둥근 구체를 만들기 위해 세부 사항을 추가할 수 있습니다.
OctahedronGeometry: 8면 구체를 만듭니다. 더 둥근 구체를 만들기 위해 세부 사항을 추가할 수 있습니다.
TetrahedronGeometry: 4면 구체를 만듭니다(세부 사항을 늘리지 않으면 구체라고 하기 어렵습니다). 더 둥근 구체를 만들기 위해 세부 사항을 추가할 수 있습니다.
IcosahedronGeometry: 거의 같은 크기의 삼각형으로 구성된 구체를 만듭니다.
SphereGeometry: 가장 일반적인 유형의 구체를 만듭니다. 여기서 면은 사각형처럼 보입니다(사각형은 두 개의 삼각형의 조합일 뿐입니다).
ShapeGeometry: 경로를 기반으로 모양을 만듭니다.
TubeGeometry: 경로를 따라 튜브를 만듭니다.
ExtrudeGeometry: 경로를 기반으로 돌출을 만듭니다. 베벨을 추가하고 제어할 수 있습니다.
LatheGeometry: 꽃병 또는 꽃병의 일부(회전과 유사)를 만듭니다.
TextGeometry: 3D 텍스트를 만듭니다. typeface json 형식으로 글꼴을 제공해야 합니다.
BoxGeometry
순서대로 여섯가지 파라미터를 갖는다.
먼저 가로, 세로, 높이의 길이.
width — 길이(X axis) Optional; defaults to 1.
height — 높이(Y axis) Optional; defaults to 1.
depth — 깊이(Z axis) Optional; defaults to 1.
그리고 각 면이 몇 개의 세그먼트로 나뉘는지를 보여준다.
widthSegments — Optional; defaults to 1.
heightSegments — Optional; defaults to 1.
depthSegments — Optional; defaults to 1.
/*
 * 6개의 파라미터를 가진다.
 * 가로, 세로, 높이의 길이
 * 그리고 각 면이 몇 개의 세그먼트로 이루어질지다.
 */
const geometry = new THREE.BoxGeometry(1, 1, 1, 1, 2, 3)
const material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true })
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)
Float32Array
Typed array
float 타입
max length = 3
Float32Array를 만드는 두가지 방법이 있다.
const positionArray = new Float32Array(9)
positionArray[0] = 0
positionArray[1] = 0
positionArray[2] = 0
positionArray[3] = 0
positionArray[4] = 1
positionArray[5] = 0
positionArray[6] = 1
positionArray[7] = 0
positionArray[8] = 0
각각 x, y, z 가 위치하는 정점을 의미한다.
const positionArray = new Float32Array([
 0, 0, 0, // 1
 0, 1, 0, // 2
 1, 0, 0, // 3
])
const geometry = new THREE.BufferGeometry()
/* parameter - array: THREE.TypedArray, itemSize: number, normalized?: boolean */
const positionAttribute = new THREE.BufferAttribute(positionArray, 3)
geometry.setAttribute('position', positionAttribute)
여러 개의 삼각형 도형을 랜덤하게 생성해보자.
// Scene
const scene = new THREE.Scene()
const geometry = new THREE.BufferGeometry()
const count = 5000
const positionsArray = new Float32Array(count * 3 * 3) // 삼각형은 3개의 정점과 각 정점은 3개의 좌표를 가지므로 3을 곱해준다.
for (let i = 0; i < count * 3 * 3; i++) {
 positionsArray[i] = (Math.random() - 0.5) * 4
}
const positionAttribute = new THREE.BufferAttribute(positionsArray, 3) // 3개의 좌표를 가진 버퍼 어트리뷰트를 생성한다.
geometry.setAttribute('position', positionAttribute)

TIL 114 | Three.js 기초 - Geometries

댓글