- 먼저 github에 레포지토리를 생성한다.
- 작업 폴더를 만든다.
- 만든 작업 폴더를 VS.Code에서 연다.
- 터미널에서 “git clone URL 생성할폴더”을 입력해서 깃허브의 레포지토리에 연결한다.
- VS.Code에서 푸시(push)할 파일을 복사한다.
- commit하고 push한다.
Vite React(또는 바닐라), shader 코드를 별도의 파일로 분리하기
이를 위해서는 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 })