在 React Three Fiber 中使用 CameraControls 时如何实现视图偏移平移？

如果我理解正确的话，您想要将逻辑从 vanilla 重写为Drei ...offset

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

编辑

一般来说，这是一个自定义偏移的问题。你可以像原始示例一样setViewOffset“平移”场景。我根据你示例的参数重新创建了原始示例，结果也与原先一样：

CodePen 上有原文

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;

通过反复试验，我找到了一个使用monkey-patching 的解决方案，它可以消除伪影。对反射器进行 monkey-patching，使其自身的虚拟相机在绘制到反射之前始终清除所有视图偏移。

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

setViewOffset改变相机视锥体，告诉 Three.js 只渲染完整视锥体的一部分，同样的方式也会影响使用该相机的所有对象。Reflector 会virtualCamera复制你的相机……然后执行

virtualCamera.projectionMatrix.copy( camera.projectionMatrix );

复制投影矩阵会包含视图偏移，而视图偏移通常位于镜像视图之外，从而拉伸反射纹理。这会导致上述瑕疵。

CodePen 上有onBeforeRender

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();

重写代码 R3F

顺便说一句，请记住“... R3F 反射器/MeshReflectorMaterial 与三的反射器不同...” - 您可能会很难重新创建代码 Vanilla → R3F 1-1...

点击此处查看更多

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