글

작성일자

Vite로 개발된 웹앱 배포 시 주의점

Vite로 구성된 웹 프로젝트를 배포할 때 npm run build로 배포본을 생성하는데, 이때 경로(path)가 틀려 필요한 리소스를 불러오지 못하는 에러가 발생합니다. vite.config.js 파일에 경로를 명시적으로 지정해주면 됩니다.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  base: "./",
})

위의 코드 중 7번째 줄을 추가했는데요. 이처럼 base를 지정하지 않으면 상대 경로가 / 로 잡힙니다.

이 부분 이외에도 문자열로 구성된 데이터 파일에 대한 URL에 대해서 주의를 해야 하는데요. 예를들어 glb 모델 파일을 로드할때 /가 아닌 ./로 지정해야 배포시에 데이터를 로드할 수 있습니다.

// 개발에서는 문제가 없지만 배포에서는 문제가 발생함
useGLTF.preload('/city_2.glb')

// 개발에서도, 배포에서도 문제가 없음
useGLTF.preload('./city_2.glb')
작성일자

Unknown property ‘?’ found 대처

React에서 R3F를 이용해 JavaScript로 개발할 때 아래의 그림처럼 프로퍼티에 빨간펜 선생님의 등장을 경험할 수 있습니다.

좋은 방법은 아니지만 Lint 옵션 중 react/no-unknown-property 속성을 비활성화 하면 해결 됩니다.

import js from '@eslint/js'
...

export default [
  { ignores: ['dist'] },
  {
    files: ['**/*.{js,jsx}'],
    ...
    rules: {
      ...js.configs.recommended.rules,
      ...
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
      'react/no-unknown-property': 'off'
    },
  },
]

위의 코드는 eslint.config.js 파일의 내용인데, 16번째 코드를 새롭게 추가했습니다.

작성일자

경로 Mesh를 따라 흐르는 화살표 시각화 (three.js)

공장 생산 설비 시각화나 도로 진행 방향 시각화 등에서 자주 사용되는 기능 중 하나입니다. 아래처럼 간단한 경로를 Mesh로 구성하고 화살표 이미지를 맵핑한 후 원하는 방향으로 화살표가 흘러가도록 합니다.

작성일자

three.js, 뒤에서 보여지는 물체 감추기

실내와 같은 장면을 3D로 살펴볼때 벽처럼 막힌 부분이 장면의 시인성을 방해하는 경우가 있습니다. 아래가 그러한 경우입니다.

위의 영상에서 보이는 것처럼 실내의 물체를 벽이 가리는 문제가 있습니다. 이런 문제점을 해결하기 위해 뒤에서 보여지는 물체(벽 등)를 잠시 보이지 않도록 해주는 기능이 필요한데요. 아래는 그에 대한 결과입니다.

이에 대한 기능을 컴포넌트로 만든 것이 BackViewHiderControls 입니다. 관련 API는 다음과 같습니다.

먼저 컨트롤러 객체를 생성합니다.

_setupControls() {
  ...

  const backViewHider = new BackViewHiderControls(this._camera);
  this._backViewHider = backViewHider;

  ...
}

그리고 매 프레임마다 호출되는 update 매서드에서 다음 코드를 입력합니다.

update() {
  ....

  this._backViewHider.updateOnFrame();
}