reactjs - React-Three-Fiber: πώς να χρησιμοποιήσετε το setViewOffset

Χρησιμοποιώ το React-Three-Fiber σε μια εφαρμογή γραμμένη σε TypeScript. Έχω ρυθμίσει το καμβά και την κάμερά μου, αλλά χρειάζομαι να υλοποιήσω το .setViewOffset στην ορθογραφική κάμερά μου. Στην τεκμηρίωση του three.js αναφέρεται ότι η είσοδος για το setViewOffset είναι:

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

Η ρύθμισή μου:

<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>

Έχω προσπαθήσει να εφαρμόσω τα εξής για τη μεταβλητή "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.

Αυτή είναι η πρώτη φορά που χρησιμοποιώ Typescript και react-three-fiber, οπότε δεν ξέρω πραγματικά ποια δομή περιμένει να του δώσω για το setViewOffset. Γι' αυτό προσπάθησα με πίνακα, αντικείμενο και συνάρτηση. Έχω υλοποιήσει το setViewOffset σε άλλα έργα χρησιμοποιώντας vanilla three.js ως εξής:

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

Απάντηση #1

νομίζω ότι η απάντηση βρίσκεται στην ιδιότητα onUpdate χρησιμοποιώντας τις κάμερες του @react-three/drei

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

...

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