박철순

도형의 회전 방향이다. 해당하는 축으로 방향 도형이 회전한다고 생각하면 이해가 편하다. (CSS도 비슷하게 회전한다.) y축을 중심으로 회전하면 회전 목마처럼 그릴 수 있습니다. x축을 중심으로 회전하면 자신이 타고 있는 자동차의 바퀴를 회전하고 있다고 상상할 수 있습니다. z 축을 중심으로 회전하면 탑승하게 될 항공기 앞에서 프로펠러 또는 풍차를 회전하고 있다고 상상할 수 있습니다 그리고 회전 방향은 x축 > y축 > z축 방향으로 회전합니다. 한 축의 방향이 변경되면 다른 축의 방향도 변경돼서 생각과 다른 결과를 나타날 수 있습니다. mesh.rotation.reorder('YXZ') 를 통해 y축 > x축 > z축으로 순서 변경가능. 출처: https://threejs-journey.com/ (5장..

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

* 본 내용은 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..