Geometry - CylinderGeometry0. 구성CylinderGeometry는 생성자에 8개의 인자를 받는다radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength 1. 윗면과 아랫면의 반지름의 크기첫번째인자는 윗면의 반지름 길이두번째인자는 아랫면의 반지름 길이기본값은 둘다 1이다윗면은 0.5 아랫면은 2를 줘보겠다const geometry = new THREE.CylinderGeometry(0.5, 2); 2. 원통의 높이세번째인자는 원통의 높이다.기본값은 1이고10을 줘보겠다.const geometry = new THREE.CylinderGeometry(0.5, 2, ..
Geometry - ConeGeometry0. 구성ConeGeometry는 생성인자로 다음과 같이 7개의 인자를 받는다radius, height,radialSegments, heightSegments, openEnded,thetaStart,thetalLenght 1. 밑몉의 반지름기본값은 1이다_setupModel() { const geometry = new THREE.ConeGeometry(); //1라디안은 180도/파이 , 즉 파이는 180도 const fillMaterial = new THREE.MeshPhongMaterial({ color: 0x515151 }); const cube = new THREE.Mesh(geometry, fillMaterial); const lin..
Geometry - CircleGeometry0. 생성인자CircleGeometry는 생성시 다음과 같이 4개의 인자를 받는다(radius,segments,thetaStart,thetaLenght) 1. 원판의 반지름첫번째 인자는 원판의 반지름 크기이다기본값은 1이다. _setupModel() { const geometry = new THREE.CircleGeometry(); //1라디안은 180도/파이 , 즉 파이는 180도 const fillMaterial = new THREE.MeshPhongMaterial({ color: 0x515151 }); const cube = new THREE.Mesh(geometry, fillMaterial); const lineMaterial = new TH..
Geometry - BoxGeometryboxgeometry인자로x크기,y크기,z크기,x분할수,y분할수,z분할수이렇게 인자를 받는데x분할수,y분할수,z분할수 를 생략시 기본값은 1이다_setupModel() { const geometry = new THREE.BoxGeometry(1, 1, 1); const fillMaterial = new THREE.MeshPhongMaterial({ color: 0x515151 }); const cube = new THREE.Mesh(geometry, fillMaterial); const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffff00 }); const line = new THRE..
Geometry1. 기본 geometrythree.js 에서 기본적으로 제공하는 geometry를 살펴보겠다이 geometry들은 기본적으로 bufferGeometry를 상속받는다 Geometry들은 3차원 오브젝트의 형상을 정의한다고했는데geometry들의 형상을 정의하기 위한 데이터들은 다음과 같다 - 형상을 정의하는 정점(Vertex)데이터(x y z축에 대한 좌표)- 3차원 오브젝트의 면을 구성하는 정점에 대한 인덱스- 정점에 대한 수직벡터- 정점에 대한 색상- 텍스쳐 맵핑을 위한 UV 좌표- 사용자가 정의한 데이터 이러한 데이터들은 3차원으로 시각화 될 때 GPU에 한번에 전달되어 빠르게 처리된다 이제 geometry에 대한 코드를 살펴보자 2. 코드https://jwinjection.tist..
Three.js | 기본 구성 요소 1. 기본구성요소 Threejs는 3차원 객체로 구성되는 Scene(장면)이 있고이 Scene(장면)을 모니터와 같은 출력장치에 출력(렌더링) 할 수 있는 Renderer가 있다Scene을 렌더링 할때에는 어떤 시점에서 보느냐에 따라 다양한 모습으로 렌더링 될 수 있는데 그 시점을 Camera로 정의한다. Scene은 Light와 3차원 모델인 Mesh로 구성된다.Light : Mesh가 화면상에 표시되기 위해서는 적절한 광원이 필요Mesh : Mesh는 Object3D의 파생 클래스이다. 형상을 정의하는 Geometry와 색상 재질 투명도 등을 정의하는 Material로 정의된다. 2. 코드우선 contstructor 부터 ..
