박철순

* 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 좌표), ..

* 본 내용은 YouTube. GIS DEVELOPER님의 영상을 보고, 공부한 부분을 적어둔 내용입니다. * 자세한 내용은 https://www.youtube.com/channel/UCgaxgVio7J9JgZrONkwiSEQ 을 통해 알 수 있습니다. * Three.js 한글번역 공식문서 https://threejs.org/manual/#ko/fundamentals에서도 확인이 가능합니다. GIS DEVELOPER 안녕하세요, GIS Developer 김형준입니다. 지리정보시스템(GIS) 분야에서 활동하고 있는 소프트웨어 개발자입니다. GIS는 현실 세계의 공간 데이터에 기반한 데이터 처리와 분석 그리고 시각화를 위 www.youtube.com Three.js의 기본구성은 3차원 객체로 구성되어있는 S..