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 })