Upgrade

Everything is mostly working but:
 - Leva is weirdly small. Waiting until they get things working on R18 here.
   pmndrs/leva#330

Author: disambiguator

.babelrc

@@ -1,4 +1,9 @@
 {
-  "presets": ["next/babel"],
-  "plugins": ["glsl"]
+  "presets": [
+    "next/babel"
+  ],
+  "plugins": [
+    "glsl",
+    "module:@react-three/babel"
+  ]
 }

@types/react-new-window.d.ts

@@ -0,0 +1,11 @@
+import React, { PropsWithChildren } from 'react';
+
+// Bypassing a type issue until fixed.
+// https://github.com/rmariuzzo/react-new-window/issues/118
+declare module 'react-new-window' {
+  import { INewWindowProps } from 'react-new-window';
+
+  export default class NewWindow extends React.PureComponent<
+    PropsWithChildren<INewWindowProps>
+  > {}
+}

components/cubedraw.tsx

@@ -12,7 +12,7 @@ export type BoxData = {
   creationTime: number;
 };
 const Box = ({ position, color, rotation, creationTime }: BoxData) => {
-  const meshRef = useRef<THREE.Mesh<THREE.BoxGeometry>>();
+  const meshRef = useRef<THREE.Mesh<THREE.BoxGeometry>>(null);
   useFrame(({ clock }) => {
     const mesh = meshRef.current!;
     const factor = Math.sin(creationTime + clock.elapsedTime / 3);

components/effects.tsx

@@ -29,7 +29,7 @@ declare global {
 /* eslint-enable @typescript-eslint/no-namespace */
 
 const TunnelEffects = () => {
-  const ref = useRef<AfterimagePass>();
+  const ref = useRef<AfterimagePass>(null);
   const viewport = useThree((three) => three.viewport);
   const size = useThree((three) => three.size);
   const trailNoiseTimeRef = useRef(0);
@@ -146,7 +146,7 @@ const TunnelEffects = () => {
   return (
     <afterimagePass
       ref={ref}
-      attachArray="passes"
+      attach="passes-1"
       args={[0.96, TunnelShader]}
       uniforms-aspect-value={viewport.aspect}
       uniforms-resolution-value={new Vector2(

components/scene.tsx

@@ -7,13 +7,9 @@ export const FiberScene = ({
   controls,
   children,
   ...rest
-}: Props & { controls?: boolean }) => {
-  return (
-    <>
-      <Canvas mode="concurrent" {...rest}>
-        {controls && <OrbitControls />}
-        {children}
-      </Canvas>
-    </>
-  );
-};
+}: Props & { controls?: boolean }) => (
+  <Canvas {...rest}>
+    {controls && <OrbitControls />}
+    {children}
+  </Canvas>
+);

components/shader.tsx

@@ -9,7 +9,7 @@ const Shaders = React.memo(function Shader({
 }) {
   const viewport = useThree((t) => t.viewport);
   const size = useThree((t) => t.size);
-  const ref = useRef<ShaderMaterial>();
+  const ref = useRef<ShaderMaterial>(null);
 
   useFrame(({ clock }) => {
     ref.current!.uniforms.time.value = clock.elapsedTime;