박철순

SVG를 넣는 방법을 넣는 방법은 총 2가지이다. 1. import svgFileName from './test.svg 를 통해 이미지에 src로 넣는 방법과, 2. import { ReactComponent as SvgFileName 를 통해 컴포넌트로 넣는 방법이 있음. 개인적으로 컴포넌트로 넣는 방법을 사용하면, SVG값을 쉽게 변경이 가능함. 대신, svg 내에 변경하고자 하는 값에 ex) fill="current" 에 넣은 뒤 컴포넌트에 해당하는 값을 넣어주면 됨. 리액트 내에서 import를 통해 SVG 를 넣으면 타입 오류 ('Cannot find module 'path.svg' or its corresponding type declartions')가 뜹니다. 해당 오류가 발생 했을 때 sr..

Math.max()는 입력값으로 받은 0개 이상의 숫자 중 가장 큰 숫자를 반환합니다. 아래 코드는 Math.max()를 이용해 유저의 성향을 파악하는 기능을 만들었습니다. const array = Array(12).fill(0); // 0이 12개가 들어간 배열을 생성 const count = 0; let id; let target; const clickEvent = (e) => { id = e.target.id; target = foodGameExample[count].answer[id].type; //선택한 대상의 타입값을 변수에 할당 (ex : [0,2,3,1]) if (count === 6) { const result = array.indexOf(Math.max(...array)); // arr..

* https://threejs.org/manual/#ko/materials을 통해 재질 예제를 확인할 수 있습니다. * 이 글 또한 Youtube. GIS DEVELOPER 님의 영상을 보고, 공부한 부분을 적어둔 내용입니다. Mesh에 대한 재질에서 적용할 수 있는 텍스쳐(Texture)에 대한 맵핑 속성이 있습니다. "map" : 가장 기본적인 속성으로, 텍스쳐 객체를 지정하면은 지오메트리에 표면에 텍스쳐 이미지가 적용됨. 모든 재질에 적용이 됩니다. map에 대한 속성을 지정하기 위해서는 텍스쳐 객체(이미지, 동영상)가 필요합니다. 텍스쳐 속성은 텍스쳐 객체가 생성된 이후에 설정하는 것을 권장합니다. _setupModel() { const textureLoader = new THREE.Textur..

* https://threejs.org/manual/#ko/materials을 통해 재질 예제를 확인할 수 있습니다. * 이 글 또한 Youtube. GIS DEVELOPER 님의 영상을 보고, 공부한 부분을 적어둔 내용입니다. #1. PointsMaterial() _setupModel() { const vertices = []; for (let i = 0; i < 10000; i++) { const x = THREE.Math.randFloatSpread(5); const y = THREE.Math.randFloatSpread(5); const z = THREE.Math.randFloatSpread(5); vertices.push(x, y, z); } const geometry = new THREE.Bu..

* https://threejs.org/manual/#ko/scenegraph 을 참고하였습니다. * 이 글 또한 Youtube. GIS DEVELOPER 님의 영상을 보고, 공부한 부분을 적어둔 내용입니다. Object 3D에는 Mesh, Line, Points로 분류되어있습니다. Mesh는 삼각형면으로 구성된 객체, Line는 선형 객체, Points는 점 합쳐서 3차원 공간상에 놓입니다. Object 3D가 3차원 공간상에 놓이기 위해서는 Position(위치), Rotation(회전), Scale(크기) 값이 필요. Position은기본값은 0, Rotation은 기본값은 0, Scale은 기본값은 1 밑에 코드는 씬그래프의 예제 코드이다. _setupModel() { const solarSyst..

https://threejs.org/manual/#ko/primitives을 통해 다양한 형태를 확인할 수 있습니다. * ​https://threejs.org/manual/#ko/custom-buffergeometry​ 사용자 지정 Geometry * 이 글 또한 Youtube. GIS DEVELOPER 님의 영상을 보고, 공부한 부분을 적어둔 내용입니다. #1 ShapeGeometry() Shape() 메소드를 통해 선을 그릴 수 있습니다. canvas의 라인그리는 원리랑 똑같이, moveTo(x, y)로 원하는 좌표에서 시작을 하고, lineTo(x,y)로 해당 좌표까지 이동하여 선을 그린 뒤, 모든 작업이 끝났으면 ClosePath()로 그리는 것을 멈추면 됩니다. _setupModel() { co..

* https://threejs.org/docs/#examples/ko/controls/OrbitControls을 보고 공부한 내용입니다. three.js docs threejs.org OrbitControls란? 마우스로 카메라시점을 사용자가 조작 해주는 클래스입니다. import * as THREE from "../../build/three.module.js"; import { OrbitControls } from "../../examples/jsm/controls/OrbitControls.js"; /* HTML 파일 내 Three.js를 불러오는 Js파일 위에 적용해줘야 함. */ new OrbitControls(Camera,HTMLDOMElement)를 통해 사용이 가능. Camera(필수)는 제..

* https://threejs.org/manual/#ko/primitives을 통해 다양한 형태를 확인할 수 있습니다. * ​https://threejs.org/manual/#ko/custom-buffergeometry​ 사용자 지정 Geometry * 이 글 또한 Youtube. GIS DEVELOPER 님의 영상을 보고, 공부한 부분을 적어둔 내용입니다. Geometry(지오메트리)는 Mesh 형태를 나타내는 속성값으로 사용이 되며, 기하학 객체의 정점 데이터입니다. 정육면체(cube), 면(plane), 개, 고양이, 사람, 나무, 건물 등 아주 다양한 것이 될 수 있죠. BufferGeometry는 3차원 Object 형상을 정의, Geometry를 형상하기 위해서는. 정점(x,y,z 좌표), ..