Como implementar a translação de deslocamento de visualização ao usar CameraControls no React Three Fiber?

Se entendi corretamente, você quer reescrever a lógica 1-1,offset do vanilla para Drei...

import React, { useRef, useEffect } from "react";
import { Canvas, useFrame, useThree } from "@react-three/fiber";
import { CameraControls } from "@react-three/drei";
import * as THREE from "three";
import "./styles.css";

function OffSet() {
  const controls = useRef(null);
  const viewOffset = useRef(new THREE.Vector2(0, 0));
  const { camera, size } = useThree();

  useEffect(() => {
    if (!controls.current) return;
    const cc = controls.current;

    cc._truckInternal = (deltaX, deltaY) => {
      viewOffset.current.x += deltaX;
      viewOffset.current.y += deltaY;

      camera.setViewOffset(
        size.width,
        size.height,
        viewOffset.current.x,
        viewOffset.current.y,
        size.width,
        size.height
      );
      camera.updateProjectionMatrix();
    };
  }, [camera, size]);

  useFrame((_, delta) => {
    controls.current?.update(delta);
  });

  return (
    <>
      <CameraControls makeDefault ref={controls} />
      <mesh>
        <boxGeometry args={[1, 1, 1]} />
        <meshBasicMaterial color="red" wireframe />
      </mesh>
      <gridHelper args={[50, 50]} position-y={-1} />
    </>
  );
}

export default function App() {
  return (
    <Canvas
      className="fullscreen"
      camera={{ position: [0, 0, 5], fov: 60, near: 0.01, far: 100 }}
    >
      <OffSet />
    </Canvas>
  );
}

EDITAR

Em termos gerais, é uma questão de deslocamento personalizado. Você usa, como no exemplo original, setViewOffsetpara "Pan" a cena. Recriei o exemplo original nos parâmetros do seu exemplo e os artefatos também estão lá:

CodePen com original

import * as THREE from "https://esm.sh/three";
import CameraControls from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';
import { Reflector } from "https://esm.sh/three/addons/objects/Reflector.js"

CameraControls.install( { THREE: THREE } );
const width = window.innerWidth;
const height = window.innerHeight;
const clock = new THREE.Clock();
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 60, width / height, 0.01, 100 );
camera.position.set( 0, 0, 5 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( width, height );
document.body.appendChild( renderer.domElement );

let offsetUpdated = false;
const viewOffset = new THREE.Vector2();
const cameraControls = new CameraControls( camera, renderer.domElement );
cameraControls._truckInternal = ( deltaX, deltaY ) => {

    viewOffset.x += deltaX;
    viewOffset.y += deltaY;

    camera.setViewOffset(
        width,
        height,
        viewOffset.x,
        viewOffset.y,
        width,
        height,
    );
    camera.updateProjectionMatrix();
    offsetUpdated = true;

}

const mesh = new THREE.Mesh(
    new THREE.BoxGeometry( 1, 1, 1 ),
    new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: false } )
);
mesh.position.y=0.6;
scene.add( mesh );

const loader = new THREE.TextureLoader();
const gridEmitTexture = loader.load("https://media.craiyon.com/2023-11-26/2ets6-v1SVGOdKAtPxmlMw.webp");

const reflector = new Reflector(
  new THREE.PlaneGeometry(120, 120),
  {
    clipBias:       0.003,
    textureWidth:   2048,
    textureHeight:  2048,
    color:          0xededed,
  }
);

reflector.rotation.x = - Math.PI / 2;
reflector.position.y = 0;

const emissivePlane = new THREE.Mesh(
  new THREE.PlaneGeometry(120, 120),
  new THREE.MeshBasicMaterial({
    map:             gridEmitTexture,
    transparent:     true,
    opacity:         0.8,
    depthWrite:      false
  })
);
emissivePlane.rotation.x = - Math.PI / 2;
emissivePlane.position.y = 0.001;

scene.add(reflector, emissivePlane);

renderer.render( scene, camera );

( function anim () {

    const delta = clock.getDelta();
    const elapsed = clock.getElapsedTime();
    const updated = cameraControls.update( delta );

    requestAnimationFrame( anim );

    if ( updated || offsetUpdated ) {

        renderer.render( scene, camera );
        offsetUpdated = false;
        console.log( 'rendered' );

    }

} )();

globalThis.THREE = THREE;
globalThis.cameraControls = cameraControls;

Por tentativa e erro, encontrei uma solução usando monkey-patching , que elimina artefatos. Aplicando monkey-patching no Refletor para que sua própria câmera virtual sempre limpe qualquer deslocamento de visão antes de se aproximar do reflexo.

camera.setViewOffset( fullWidth, fullHeight, offsetX, offsetY, viewWidth, viewHeight );
camera.updateProjectionMatrix();

setViewOffsetaltera o tronco da câmera, diz ao Three.js para renderizar apenas uma sub-região do tronco completo, o que afeta tudo o que usa essa câmera. O Reflector virtualCameracopia sua câmera... e então faz

virtualCamera.projectionMatrix.copy( camera.projectionMatrix );

Copiar a matriz de projeção inclui o deslocamento da sua visão, que muitas vezes fica fora da visão espelhada, esticando assim a textura do reflexo. Isso cria esses artefatos.

CodePen comonBeforeRender

import * as THREE from "https://esm.sh/three";
import CameraControls from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';
import { Reflector } from "https://esm.sh/three/addons/objects/Reflector.js";

CameraControls.install({ THREE });

const width  = window.innerWidth;
const height = window.innerHeight;

const scene    = new THREE.Scene();
const camera   = new THREE.PerspectiveCamera(60, width/height, 0.01, 100);
camera.position.set(0, 0, 5);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

const clock    = new THREE.Clock();
const controls = new CameraControls(camera, renderer.domElement);

let viewOffset = new THREE.Vector2();
controls._truckInternal = (dx, dy) => {
  viewOffset.x += dx;
  viewOffset.y += dy;
  camera.setViewOffset(
    width, height,
    viewOffset.x, viewOffset.y,
    width, height
  );
  camera.updateProjectionMatrix();
};

const reflector = new Reflector(
  new THREE.PlaneGeometry(120, 120),
  { clipBias: 0.003, textureWidth: 2048, textureHeight: 2048, color: 0xededed }
);
reflector.rotation.x = -Math.PI / 2;
reflector.position.y = 0;

const _orig = reflector.onBeforeRender;
reflector.onBeforeRender = function(renderer, scene, cam){
  const saved = cam.view ? { ...cam.view } : null;
  cam.clearViewOffset();
  cam.updateProjectionMatrix();
  _orig.call(this, renderer, scene, cam);
  if (saved) {
    cam.setViewOffset(
      saved.fullWidth, saved.fullHeight,
      saved.offsetX,  saved.offsetY,
      saved.width,    saved.height
    );
    cam.updateProjectionMatrix();
  }
};

scene.add(reflector);

const loader = new THREE.TextureLoader();
const gridTex = loader.load("https://media.craiyon.com/2023-11-26/2ets6-v1SVGOdKAtPxmlMw.webp");

const emissivePlane = new THREE.Mesh(
  new THREE.PlaneGeometry(120, 120),
  new THREE.MeshBasicMaterial({
    map: gridTex,
    transparent: true,
    opacity: 0.8,
    depthWrite: false
  })
);
emissivePlane.rotation.x = -Math.PI/2;
emissivePlane.position.y = 0.001;
scene.add(emissivePlane);

const box = new THREE.Mesh(
  new THREE.BoxGeometry(1,1,1),
  new THREE.MeshBasicMaterial({ color: 0xff0000 })
);
box.position.y = 0.6;
scene.add(box);

renderer.render(scene, camera);

function animate() {
  const delta = clock.getDelta();
  controls.update(delta); 
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
animate();

Código R3F reescrito

A propósito, tenha em mente que "... R3F Reflector / MeshReflectorMaterial não é a mesma coisa que o Reflector do three ..." - você pode ter dificuldades para recriar o código Vanilla → R3F 1-1...

Veja mais AQUI

import React, { useRef, useEffect } from "react";
import { Canvas, useThree, useFrame, useLoader } from "@react-three/fiber";
import * as THREE from "three";
import CameraControls from "camera-controls";
import { TextureLoader } from "three";
import { Reflector } from "three/examples/jsm/objects/Reflector.js";
import "./styles.css";

CameraControls.install({ THREE });

function Offset() {
const controls = useRef();
const reflectorRef = useRef();
const { camera, gl, scene, size } = useThree();
const clock = useRef(new THREE.Clock());
const viewOffset = useRef(new THREE.Vector2(0, 0));
const gridTex = useLoader(
TextureLoader,
"https://media.craiyon.com/2023-11-26/2ets6-v1SVGOdKAtPxmlMw.webp"
);

useEffect(() => {
controls.current = new CameraControls(camera, gl.domElement);

controls.current._truckInternal = (dx, dy) => {
viewOffset.current.x += dx;
viewOffset.current.y += dy;
camera.setViewOffset(
size.width,
size.height,
viewOffset.current.x,
viewOffset.current.y,
size.width,
size.height
);
camera.updateProjectionMatrix();
};

return () => controls.current?.dispose();
}, [camera, gl, size]);

useEffect(() => {
const reflector = new Reflector(new THREE.PlaneGeometry(120, 120), {
clipBias: 0.003,
textureWidth: 2048,
textureHeight: 2048,
color: 0xededed,
});

reflector.rotation.x = -Math.PI / 2;
reflector.position.y = 0;

const orig = reflector.onBeforeRender;
reflector.onBeforeRender = function (renderer, scene, cam) {
const saved = cam.view ? { ...cam.view } : null;
cam.clearViewOffset();
cam.updateProjectionMatrix();
orig.call(this, renderer, scene, cam);
if (saved) {
cam.setViewOffset(
saved.fullWidth,
saved.fullHeight,
saved.offsetX,
saved.offsetY,
saved.width,
saved.height
);
cam.updateProjectionMatrix();
}
};

reflectorRef.current = reflector;
scene.add(reflector);

return () => {
scene.remove(reflector);
};
}, [scene]);

useFrame(() => {
const delta = clock.current.getDelta();
controls.current?.update(delta);
});

return (
<>
<mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, 0.001, 0]}>
<planeGeometry args={[120, 120]} />
<meshBasicMaterial
map={gridTex}
transparent
opacity={0.8}
depthWrite={false}
/>
</mesh>

<mesh position={[0, 0.6, 0]}>
<boxGeometry args={[1, 1, 1]} />
<meshBasicMaterial color="red" />
</mesh>
</>
);
}

export default function App() {
return (
<Canvas
camera={{ position: [0, 0, 5], fov: 60, near: 0.01, far: 100 }}
gl={{ antialias: true }}
>
<Offset />
</Canvas>
);
}

CODESANDBOX