[카테고리:] 미분류

1. 먼저 github에 레포지토리를 생성한다.
2. 작업 폴더를 만든다.
3. 만든 작업 폴더를 VS.Code에서 연다.
4. 터미널에서 “git clone URL 생성할폴더”을 입력해서 깃허브의 레포지토리에 연결한다.
5. VS.Code에서 푸시(push)할 파일을 복사한다.
6. commit하고 push한다.

이를 위해서는 vite가 쉐이더 코드를 이해하는 척 해야 하는데, 이를 위해 다음 패키지를 설치합니다.

npm i -D vite-plugin-glsl

그리고 vite.config.js(파일이 없으면 직접 생성해야 함)의 코드를 수정합니다. 기존 코드에서 변경된 부분은 3번과 7번 줄입니다.

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), glsl()],
})

이제 다음처럼 별도의 파일로 지정한 쉐이더 코드를 import할 수 있고 사용할 수 있습니다.

import { shaderMaterial, useGLTF } from '@react-three/drei'
import { extend } from '@react-three/fiber'

import stripesVertex from "./stripes.vertex.glsl"
import stripesFragment from "./stripes.fragment.glsl"

const StripesShaderShaderMaterial = shaderMaterial(
  {},
  stripesVertex,
  stripesFragment
)

extend({ StripesShaderShaderMaterial })

실습 진행하면서 웹페이지에 그림 그려가며 설명하기 좋은 도구

package.json 파일 생성 등의 프로젝트 생성

npm init -y

개발에 필요한 패키지 설치

npm i -D typescript ts-node nodemon

tsconfig.json 파일 생성을 위해 다음 명령 수행

npx tsc --init

tsconfig.json에 다음 내용 추가

{
  ...

  "target": "es6",
  "module": "commonjs",
  "outDir": "./dist",
  "rootDir": "./src",
  "strict": true,
  "moduleResolution": "node",
  "esModuleInterop": true,

  ...
}

dist와 src 폴더를 생성하고 src에 index.ts 파일 생성

packagejson에 다음 내용 추가

{
  ...

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node dist/index.js",
    "build": "tsc -p .",
    "dev": "nodemon --watch \"src/**/*.ts\" --exec \"ts-node\" src/index.ts"
  },

  ...
}

개발 시작

npm run dev

index.ts에 다음 코드를 입력하면 터미널에 그 결과가 바로 반영됨