Three.js (4) 썸네일형 리스트형 geometry #03 여러가지 geometry 를 테스트하기 위해 IGeometryHelper를 사용 box geometry BoxGeometry() 의 인자 width: 1, height: 1, depth: 1, widthSegments: 1, heightSegments: 1, depthSegments:1 main.tsimport { OrbitControls } from 'three/examples/jsm/Addons.js' // 컨트롤을 위한 클래스import './style.css'import * as THREE from 'three'import GUI from 'three/examples/jsm/libs/lil-gui.module.min.js'// IGeometryHelper는 두개의 .. geometry #02 1. 생성했던 박스 geometry에 GUI를 적용해 직접 설정을 조정할 수 있게 수정 step 1BosGeometry 객체는 6개의 인자를 받는데, 해당 인자를 컨트롤하기 위한args 인자를 추가한다.class App{ //.... // 박스 세그먼트 인자 const args = { width: 1, height: 1, depth: 1, widthSegments: 1, heightSegments: 1, depthSegments:1 } //....} step 2createModel 객체를 새로 만들고, 기존의 geometry를 생성하는 메서드를createModel 객체에 담고, createModel 객체를 호출한다. GUI 적용 .. geometry #01 three.js 의 geometry 라이브러리https://threejs.org/docs/index.html#api/en/geometries/BoxGeometry three.js docs threejs.org BoxGeometryCapsuleGeometryCircleGeometryConeGeometryCylinderGeometryDodecahedronGeometryEdgesGeometry베이스 지오메트리의 외곽 라인만 생성ExtrudeGeometryIcosahedronGeometryLatheGeometryOctahedronGeometryPlaneGeometryPolyhedronGeometry다면체 지오메트리를 생성하는데 쓰임RingGeometryShapeGeometrySphereGeometryTetrah.. Three.js 개발환경 세팅 및 큐브 생성 해당 글은 유튜브 GIS DEVELPOPER 채널의 영상을 보고 개인적인 스터디 차원에서 메모하는 글입니다. 1. VScode 설치 2. Node.js 설치 3. 스터디를 위한 폴더 생성 후 VScode로 열기 4. VScode 에서 새 터미널 열기 5. 터미널에서 개발 환경에 필요한 npm 설치npm create vite@latest . //설치시 사용할 프레임 워크는 Vanilla, 언어는 TypeScript 로 선택//기본 라이브러리 설치npm install //라이브러리 설치를 위한 npm 설치//Three.js를 이용하기 위한 라이브러리 설치npm install @types/three //Three.js에 대한 타입 정의가 되어있는 라이브러리, 타입스크립트를 사용하기 위.. 이전 1 다음
