reactjs - React-Three-Fiber: cách sử dụng setViewOffset

Tôi đang sử dụng React-Three-Fiber trong một ứng dụng được viết bằng TypeScript. Tôi đã thiết lập canvas và camera của mình nhưng tôi cần triển khai .setViewOffset trên camera trực giao của mình. Trong tài liệu three.js, nó nêu rằng đầu vào cho setViewOffset là:

( fullWidth : Float, fullHeight : Float, x : Float, y : Float, width : Float, height : Float ) : null

Cài đặt của tôi:

<Canvas orthographic camera={{ zoom: 50, position: [0, 100, 100], setViewOffset: SVO }}>
 <ambientLight intensity={1.90} color={"rgb(255,255,255)"}/>
 <directionalLight position={[150, 250, -150]} castShadow={true}/>
 <Box position={[0, 0, 0]} color="red"/>
 <Box position={[0, 7, 0]} color="blue"/>
 <Box position={[0, -7, 0]} color="green"/>
</Canvas>

Tôi đã thử triển khai những điều sau cho biến "SVO":

const SVO = [ 500, 500, 1000, 0, 500, 500 ];
//Typescript error:
//Type 'number[]' is not assignable to type '((fullWidth: number, fullHeight: number, x: number, y: number, width: number, height: number) => void) & ((fullWidth: number, fullHeight: number, offsetX: number, offsetY: number, width: number, height: number) => void)'


const SVO = {fullWidth: 50, fullHeight: 50, offsetX: 50, offsetY: 50, width: 50, height: 50};
//Typescript error:
//Type '{ fullWidth: number; fullHeight: number; offsetX: number; offsetY: number; width: number; height: number; }' is not assignable to type '((fullWidth: number, fullHeight: number, x: number, y: number, width: number, height: number) => void) & ((fullWidth: number, fullHeight: number, offsetX: number, offsetY: number, width: number, height: number) => void)'.


const SVO = ( fullWidth=500, fullHeight=500, offsetX=1000, offsetY=-1000, width=500, height=500 ) => { };
//Accepted by typescript but has no effect.

Đây là lần đầu tiên tôi sử dụng Typescript và react-three-fiber nên tôi không thực sự biết cấu trúc mà nó mong đợi tôi cung cấp cho setViewOffset. Vì vậy nên tôi đã thử một mảng, đối tượng và hàm. Tôi đã triển khai setViewOffset trong các dự án khác sử dụng three.js thuần như sau:

const [ w, h, cam, frust ] = [ this.mount.clientWidth, this.mount.clientHeight, this.camera, this.frustumSize ];
cam.setViewOffset( w, h, -225, -120, w, h);

Câu trả lời #1

tôi nghĩ câu trả lời nằm ở thuộc tính onUpdate sử dụng camera của @react-three/drei

import { OrthographicCamera  } from '@react-three/drei'

...

<OrthographicCamera onUpdate={c => c.setViewOffset(...) />