Fix threejs portal demo (#79)

demos/threejs-journey-portal/package.json

@@ -11,11 +11,10 @@
   "dependencies": {
     "@react-three/drei": "^9.109.5",
     "@react-three/fiber": "^8.17.5",
-    "babel-plugin-glsl": "^1.0.0",
-    "babel-plugin-macros": "^3.1.0",
     "glsl-noise": "^0.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "vite-plugin-glslify": "^2.1.0",
     "three": "^0.165.0"
   },
   "devDependencies": {
@@ -30,7 +29,7 @@
     "dev": "vite --host",
     "dev3": "e2e-dev $npm_package_name",
     "build": "tsc && vite build",
-    "bbuild2": "tsc && e2e-build $npm_package_name",
+    "build2": "tsc && e2e-build $npm_package_name",
     "preview": "vite preview"
   },
   "browserslist": [

demos/threejs-journey-portal/src/App.jsx

@@ -2,7 +2,7 @@ import { useRef } from 'react'
 import { Color, AdditiveBlending } from 'three'
 import { Canvas, extend, useFrame } from '@react-three/fiber'
 import { OrbitControls, Sparkles, shaderMaterial, useGLTF, useTexture } from '@react-three/drei'
-import glsl from 'babel-plugin-glsl/macro'
+import glsl from 'glslify'
 
 import portalModel from './portal-2.glb?url'
 import backedImg from './baked-02.jpeg'
@@ -61,7 +61,7 @@ const PortalMaterial = shaderMaterial(
     vec3 color = mix(uColorStart, uColorEnd, strength);
     gl_FragColor = vec4(color, 1.0);
     #include <tonemapping_fragment>
-    #include <encodings_fragment>
+    #include <colorspace_fragment>
   }`,
 )
 

demos/threejs-journey-portal/vite.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import glslify from 'vite-plugin-glslify/dist/index.mjs'
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), glslify({ include: [/\.jsx$/] })],
 })