글

작성일자

Mac에 OpenJDK 설치하기

Mac에서 OpenJDK 설치 순서인데, 설치라고 하기에 너무 간단합니다. 그냥 압축 풀고 복사하는 정도입니다.

일단 OpenJDK 공식 사이트에서 OpenJDK를 다운로드 받습니다. 확장자가 tar.gz인 압축 파일을 다운로드 받아 압축을 풉니다. 아래와 같습니다. 압축이 풀린 것이 jdk-21.0.1 디렉토리입니다. 이해를 돕기 위해 아래의 이미지를 참조하세요.

jdk-21.0.1 디렉토리 전체를 그대로 /Library/Java/JavaVirtualMachines 디렉토리로 이동시킵니다. 암호를 입력 하라고 하면 암호를 입력하세요.

끝.

확인을 위해 터미널을 열고 아래처럼 javac -version을 입력해 봅니다.

사실 Windows도 같습니다. 차이점은 내가 직접 Path를 지정해줘야 한다는 것인데.. 맥은 이미 Path로 지정된 디렉토리를 가지고 있다는 점이네요. 맥의 Java 사랑이 희한하면서도 남다르네요.

추가로 VS.Code에서 자바 프로젝트를 생성하기 위해 [1]필요한 확장 기능(Extension Pack for Java)을 설치 후 [2]명령 팔레트(Shift+Command+P)에서 Java:Create Java Project로 명령을 선택해 실행한 뒤 [3]No Build Tools을 선택(바닐라 프로젝트)하고 [4]프로젝트의 디렉토리가 만들어질 부모 디렉토리를 선택하고 마지막으로 [5]프로젝트의 이름(디렉토리 이름)을 입력하면 됩니다.

작성일자

JS를 통해 CSS에 값 전달하기

JS 코드에서 어떤 값을 정해서 CSS에 전달해서 CSS를 통한 스타일을 정의할 때 전달받은 값을 사용하는 내용입니다.

먼저 JS에서 값을 전달하기 위해서는 특정 DOM에 대한 style에 속성(Property)를 설정해 주면 되는데요. 예를 들어서 –x와 –y라는 속성을 설정해 주는 코드는 다음과 같습니다.

const pos = document.documentElement
pos.addEventListener("mousemove", e => {
    pos.style.setProperty("--x", e.clientX + "px")
    pos.style.setProperty("--y", e.clientY + "px")
})

위의 코드는 document에 해당하는 DOM의 스타일에 대한 속성(–x, –y)를 설정하는 코드입니다. 좀더 자세히 설명드리면 마우스 커서의 위치 값으로 설정하고 있습니다. 반드시 document의 스타일 속성으로 설정해야 합니다.

이렇게 JS에서 설정한 값을 CSS에서 사용하는 방식은 다음과 같습니다.

.banner {
  clip-path: circle(15vh at var(--x) var(--y));
}

핵심은 var이라는 명령을 통해 JS를 통해 설정했던 –x와 –y의 값을 바로 사용할 수 있다는 것입니다.

위의 코드를 활용한 예제는 아래와 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      font-family: 'Gill Sans';
      box-sizing: border-box;
    }

    body {
      background: #111;
      user-select: none;
    }

    .banner {
      position: fixed;
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fff;
      z-index: 1;
      /* clip-path: circle(15vh at center center); */
      clip-path: circle(15vh at var(--x) var(--y));
      transition: all .1s linear;
    }

    .banner h2 {
      /* position: relative; */
      color: transparent;
      -webkit-text-stroke: 4px #333;
      font-size: 25vh;
      pointer-events: none;
    }

    .content {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .content h2 {
      color: transparent;
      -webkit-text-stroke: 4px #333;
      font-size: 25vh;
      pointer-events: none;
    }
  </style>
</head>
<body>
  <section class="banner">
    <h2>GIS DEVELOPER</h2>
  </section>
  <section class="content">
    <h2>GIS DEVELOPER</h2>
  </section>

  <script>
    const pos = document.documentElement
    pos.addEventListener("mousemove", e => {
      pos.style.setProperty("--x", e.clientX + "px")
      pos.style.setProperty("--y", e.clientY + "px")
    })
  </script>
</body>
</html>

실행 결과는 다음과 같습니다.

작성일자

지오서비스웹의 경위도 좌표를 주소(지번주소, 도로명주소)로 변환

먼저 해당 기능은 v1.2.5입니다. 지오서비스웹에 로그인할 때 버전이 다르다면 Shift 키와 함께 우측 상단의 업데이트 버튼을 클릭해 웹브라우저의 캐쉬를 삭제하시기 바랍니다.

지도를 클릭하면 클릭된 지점의 경위도 좌표를 지번주소 또는 도로명주소로 표시해 줍니다. 도로명주소는 건물에 대해서 할당되어 있으므로 클릭한 지점에 건물이 없을 수 있습니다. 그럴때는 가장 가까운 건물에 대한 도로명주소와 함께 떨어진 거리를 제공해 줍니다.

여러개의 좌표를 CSV 데이터에 저장해 한번에 변환할 수 있습니다. 아래는 그에 대한 변환 결과입니다.

지적도는 그 특성상 연속되어 있으므로 좌표에 대해 떨어진 거리가 대부분 0입니다. 그와 다르게 도로명주소는 0과 같거나 큽니다. 이런 거리에 대한 결과를 이용해 좌표에 대해 변환된 주소 결과를 좀 더 의미 있게 활용할 수 있습니다.

작성일자

three.js의 애니메이션 시스템

개요

three.js의 애니메이션 시스템을 통해 모델의 다양한 속성을 애니메이트 할 수 있습니다 : 스킨드 앤 리지드 모델(Skinned & Rigged Model)의 뼈대, 모프 타겟(Morph Targets), 재질의 속성(색, 불투명도, boolean 값), 보이고 않보이기, 변환(위치, 크기, 회전). 애니메이트 된 속성은 점진적으로 서서히 변경될 수 있습니다. 다른 객체 뿐만 아니라 동일한 객체의 서로 다른 연속된 애니메이션의 가중치(Weight)와 타임 스케일(Time Scale)은 독립적으로 변경될 수 있습니다. 동시에 다양한 애니메이션을 다른 물체에 동기화할 수 있습니다.

하나의 동일한 차원의 시스템에서 애니메이션에 대한 이 모든 것들을 이루기 위해서 three.js의 애니메이션 시스템은 2015년에 완전히 변경되었으며, 유니티와 언리얼 엔진4와 유사한 구조를 갖게 되었습니다. 이 문서는 애니메이션 시스템의 주요 요소에 대한 개략적인 개요와 어떻게 함께 작동 되는지를 설명합니다.

애니메이션 클립(Animation Clips)

블렌더 등과 같은 3차원 모델링 툴로부터 glTF 형식으로 저장하고 이를 three.js의 GLTFLoader 코드를 통해 모델을 불러왔다면(이 모델이 Bones이나 Morph Targets 또는 둘다 없어도 상관없음) 이 모델 갹체에는 AnimationClips 타입의 객체를 가지는 배열인 “animations”라는 이름의 필드를 가지고 있습니다.

각각의 AnimationClip 객체는 객체의 특정 행위에 대한 데이터를 가지고 있습니다. 예를들어 만약 매시가 케릭터라면 첫번째는 걷기, 두번째는 점프, 세번째는 옆으로 걷기에 대한 데이터가 될 수 있습니다.

키프레임 트랙(Keyframe Tracks)

이런 AnimationClip 내부에는 개별적인 KeyframeTrack 객체에 저장된 애니메이트 속성 데이터가 저장되어 있습니다. 케릭터 객체가 스켈레턴(Skeleton)을 가지고 있다고 한다면, 하나의 키프레임 트랙은 시간에 대한 팔의 위치 변화에 대한 데이터를 저장하고 있습니다. 다른 키프레임 트랙은 회전 변화나 크기 변화 등이 저장되어 있구요. 하나의 AnimationClip은 여러개의 키프레임 트랙으로 구성될 수 있다는 것입니다.

애니메이션 믹서(Animation Mixer)

저장된 데이터는 오직 애니메이션을 위한 기반만으로 구성됩니다. 실제 재생은 AnimationMixer를 통해 제어됩니다. 이 AnimationMixer가 단순히 애니메이션을 재생하는 객체일 뿐이라고 생각할 수 있지만 이 객체는 여러개의 애니메이션을 연속적으로 자연스럽게 처리될 수 있도록 블렌딩하고 합칠 수 있는 실제 믹서(Mixer)와 같은 기능을 수행합니다.

애니메이션 액션(Animation Action)

AnimationMixer 자체는 몇개 안되는 (일반적인) 속성과 매서드를 가지고 있는데, AnimationMixer가 AnimationAction에 의해 제어되기 때문입니다. AnimationAction을 구성함으로써 어떤 AnimationClip이 재생되어지고, 잠시 멈추거나 완전히 멈추거나 할때를 결정할 수 있고 애니메이션을 얼마나 반복될 것인지, 다른 애니메이션 액선으로의 전환(Fade)이나 타임 스케일링(Time Scaling) 등을 수행할 수 있습니다.

애니메이션 객체 그룹(Animation Object Groups)

공유된 애니메이션 상태를 받기 위해 객체들의 그룹이 필요하다면 AnimationObjectGroup를 사용할 수 있습니다.

지원되는 형식과 로더(Loader)

모든 모델 형식이 애니메이션을 포함할 수 있는 것은 아닙니다. three.js 로더 들중 몇개만이 AnimationClip을 지원합니다 : THREE.ObjectLoader, THREE.BVHLoader, THREE.ColladaLoader, THREE.FBXLoader, THREE.GLTFLoader, THREE.GLTFLoader, THREE.MMDLoader

3dx max와 Maya는 단일 파일에 여러개의 애니메이션을 내보낼 수 없습니다.

예제

let mesh;

// Create an AnimationMixer, and get the list of AnimationClip instances
const mixer = new THREE.AnimationMixer( mesh );
const clips = mesh.animations;

// Update the mixer on each frame
function update () {
	mixer.update( deltaSeconds );
}

// Play a specific animation
const clip = THREE.AnimationClip.findByName( clips, 'dance' );
const action = mixer.clipAction( clip );
action.play();

// Play all animations
clips.forEach( function ( clip ) {
	mixer.clipAction( clip ).play();
} );