[카테고리:] 프로그래밍

작성일자

Three.JS 동영상 강좌

웹에서 3차원 그래픽 기능을 개발할 수 있는 자바스크립트 라이브러리인 Three.js에 대한 강좌입니다. Three.js 학습을 계획하고 있다면 이 강좌가 도움이 되리라 확신합니다.














작성일자

경위도로 지정한 위치 사이의 흐름선을 3D로 표현하기

구에 지구에 대한 텍스쳐를 맵핑하고 경위도로 지정된 2개의 위치 사이에 흐름선을 표현하는 시각화에 대한 구현체입니다. 최종 실행 결과는 아래와 같습니다.

WebGL을 기반으로 하는 3차원 라이브러리 three.js를 사용했으며, class를 통한 모듈방식으로 구현하였는데, 전체 소스 코드는 다음 URL로 다운로드 받으시기 바랍니다.

GIS 개발자로써 가장 중요한 코드 중 하나를 언급하면 바로 경위도 좌표를 xyz 좌표계로 변환해 주는 함수인데요. 바로 아래의 코드입니다.

_getPosFromLatLonRad(lat, lon, radius) {
    var phi = (90 - lat) * (Math.PI / 180)
    var theta = (lon + 180) * (Math.PI / 180)

    let x = -((radius) * Math.sin(phi)*Math.cos(theta))
    let z = ((radius) * Math.sin(phi)*Math.sin(theta))
    let y = ((radius) * Math.cos(phi))

    return {x,y,z}
}

위도와 경도 그리고 구의 반지름을 받아 해당하는 xyz 축의 좌표를 반환합니다.

작성일자

[THREE.JS-EX] Shader





이 글의 예제 코드는 THREE.JS 공식 사이트의 EXAMPLES에서 제공되는 코드를 이해하고 제 나름대로의 코드로 재구성한 것입니다.

작성일자

Javascript의 디스트럭처링(Destructuring)

자바스크립트의 디스트럭처링은 객체와 배열에 적용이 가능한데요. 디스트럭처링은 객체와 배열을 구성하는 개별 요소를 독립적인 상수나 변수에 저장하는 방법입니다.

먼저 객체에 대한 디스트럭처링 예제는 다음과 같습니다.

const Dip2K = {
    name: "김형준",
    company: {
        name: "GEOSERVICE",
        contacts: {
            address: "에이펙센터 208",
            telephone: "02-525-0421"
        }
    }
}

const { name } = Dip2K
console.log(name) // 김형준

const { address, telephone } = Dip2K.company.contacts
console.log(address, telephone) // 에이펙센터 208 02-525-0421

const { name: companyName} = Dip2K.company
console.log(companyName) // GEOSERVICE

const { alias = "닌자" } = Dip2K.company
console.log(alias) // 닌자

다음은 배열에 대한 디스트럭처링 예제입니다.

const Dip2K = [ "김형준", "지오서비스", "hjkim@geoservice.co.kr" ]

const [name, company, email] = Dip2K
//console.log(name, company, email) // 김형준 지오서비스 hjkim@geoservice.co.kr

const [name2, company2 ] = Dip2K
//console.log(name2, company2) // 김형준 지오서비스

const [name3, ...others] = Dip2K 
console.log(name3, others) // 김형준 (2) ['지오서비스', 'hjkim@geoservice.co.kr']