Блог

Я использую React-Three-Fiber в приложении, написанном на машинописном языке. Я настроил холст и камеру, но мне нужно реализовать .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) amp; ((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) amp; ((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-три волокна, поэтому я действительно не знаю, какой структуры он ожидает от меня для 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);