프로그래밍 – 페이지 23

2021-10-262022-10-30

3D 모델을 화면에 가득 채우고 보는 시점 지정하기

three.js를 이용하여 3D 모델을 불러와서 화면에 렌더링 할 때, 해당 모델의 크기와 원점이 모두 상이하여 이를 공통적으로 처리하기 위한 함수입니다.

_zoomFit(object3D, camera, viewMode, bFront) {
    const box = new THREE.Box3().setFromObject(object3D);
    const sizeBox = box.getSize(new THREE.Vector3()).length();
    const centerBox = box.getCenter(new THREE.Vector3());

    let offsetX = 0, offsetY = 0, offsetZ = 0;
    viewMode === "X" ? offsetX = 1 : (viewMode === "Y") ? offsetY = 1 : offsetZ = 1;
    if(!bFront) {
        offsetX *= -1;
        offsetY *= -1;
        offsetZ *= -1;
    }
    camera.position.set(centerBox.x + offsetX, centerBox.y + offsetY, centerBox.z + offsetZ);

    const halfSizeModel = sizeBox * 0.5;
    const halfFov = THREE.Math.degToRad(camera.fov * .5);
    const distance = halfSizeModel / Math.tan(halfFov);

    const direction = (new THREE.Vector3()).subVectors(camera.position, centerBox).normalize();

    const position = direction.multiplyScalar(distance).add(centerBox);
    camera.position.copy(position);

    camera.near = sizeBox / 100;
    camera.far = sizeBox * 100;

    camera.updateProjectionMatrix();

    camera.lookAt(centerBox.x, centerBox.y, centerBox.z);
}

실제 활용은 다음처럼 fbx 형식의 모델 파일 불러와 화면상에 렌더링하는 예를 보면 쉽게 확인할 수 있습니다.

loader.load('data/Rumba Dancing.fbx', object => {
    this._scene.add(object);
    this._zoomFit(object, this._camera, "X", true);
} );

위의 _zoomFit의 세번째와 네번째 인자인 “X”, true는 양(plus)의 X축 방향에서 바라본다는 의미입니다. 위 코드의 결과는 다음과 같습니다.

2021-10-202022-10-30

Three.JS 동영상 강좌

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

2021-10-022022-10-30

경위도로 지정한 위치 사이의 흐름선을 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 축의 좌표를 반환합니다.

2021-07-192022-10-30