728x90 Front-End20 Geometries Geometries 도형의 거리, 모양, 크기 및 상대 위차와 같은 공간의 속성과 관련된 수학의 한 분야이다. 물리적 세계를 모델링하기 위해 개발된 기하학은 거의 모든 과학과 예술, 건축 및 그래픽 과 관련된 기타 활동에 적용된다. Three.js 에는 일반적인 도형을 만들기 위한 많은 클래스가 있다 그중에서 3가지 Geometry 살펴볼 생각이다. BoxGeometry BoxGeometry는 주어진 '너비', '높이', '깊이'가 있는 직육면체의 기하학 클래스이다. 생성 시 각 모서리가 축 중 하나와 평행한 상태에서 원점의 중심에 배치된다. BoxGeometry(width : Float, height : Float, depth : Float, widthSegm.. 2023. 7. 25. Object3D Hierarchy Object3D는 Three.js의 많은 개체에 대한 기본 클래스로 3D 공간에서 개체를 조작하기 위한 메서드와 속성을 제공한다 가장 일반적인 ex) 메쉬, 조명, 카메라 및 Object3D 이다 https://threejs.org/docs/#api/en/core/Object3D three.js docs threejs.org 장면에 다른 Object3D 추가할수 있으면 부모 Object3D의 add() 메소드를 통해서 자식 Object3D를 만들수 있다 const object1 = new THREE.Mesh( new THREE.SphereGeometry(), new THREE.MeshPhongMaterial({ color: 0xff0000 }) // 빨강 ) object1.position.set(4, 0.. 2023. 7. 24. Dat GUI Dat.GUI 는 Three.js 에 대해 배우는데 사용하는 매우 유용한 도구 이다 설치 dat.gui 받아오기 npm install dat.gui --save-dev이제 기존 javascript 파일에 가져온다 import { GUI } from 'dat.gui' threejs 에서 따로 제공해주는 gui import { GUI } from "three/examples/jsm/libs/lil-gui.module.min" x,y,z 적용하기 x,y,z 기준으로 회전값을 설정해 준다 const gui = new GUI() const cubeFolder = gui.addFolder("Cube"); const cubeRotationFolder = cubeFolder.addFolder("Rotat.. 2023. 7. 21. ThreeJS 시작하기 NPM 및 빌드 도구로 설치 npm 패키지 레지스트리 에서 설치하고 빌드 도구를 사용한다 Node.js 설치하기 종속성 관리를 로드하고 빌드 도구를 실행하는 필요하다 프로젝트 폴더의 터미널 을 사용하여 three.js 및 빌드 도구인 Vite를 설치한다 npm init # three.js npm install --save three # vite npm install --save-dev vite npm은 package.json 사용하여 설치한 각 종속성의 버전을 설명한다. 프로젝트에서 함께 작업하는 다른사람이 있는 경우 npm install 실행하여 각 종속성의 원래 버전을 설치할수 있다. 버전 기록을 사용하는 경우 package.json 커밋을 한다 node_modules 폴더는 각 종속성에 대한 코드를.. 2023. 7. 20. PerspectiveCamera vs OrthographicCamera PerspectiveCamera 인간의 눈이 보는 방식을 모방하도록 설계되어 있으며 3D 장면을 렌더링 하는데 사용되는 가장 일반적인 프로젝션 모드 카메라 이다 PerspectiveCamera( fov : Number , aspect : Number , near : Number , far : Number ) fov: 카메라 절두체 시야 영역 aspect: 카메라 절두체 종횡비 near: 평면 근처의 카메라 절두체 far: 카메라 절두체 원거리 평면 https://commons.wikimedia.org/wiki/File:Perspective_view_frustum.png# File:Perspective view frustum.png - Wikimedia Commons --> commons.wikimedia.. 2023. 7. 19. Link vs Import (CSS) Link vs Import 차이 세슘을 공부하다가 Style css 태그 가져올때 Link 와 Import 대해서 궁금해졌다 Link 1.HTML의 Link 태그를 사용하는 CSS 연결방식 2.병렬방식의 다운로드 3.로딩속도가 빠르다 Import @import url(./shared.css); @import url(./Animation/Animation.css); @import url(./BaseLayerPicker/BaseLayerPicker.css); @import url(./CesiumWidget/CesiumWidget.css); @import url(./CesiumInspector/CesiumInspector.css); ... 1.하나의 css 파일에 여러개의 css 페이지를 로드시켜 .. 2022. 7. 26. 이전 1 2 3 4 다음 728x90
