React-three-fiber: TypeScript typings don't allow passing camera position as array

[AndrewPrifer]

For the following code

<Canvas camera={{ position: [0, 0, 20] }}>
  // ...
</Canvas>

TypeScript complains that:

Type '{ position: number[]; }' is not assignable to type 'Partial<OrthographicCamera & PerspectiveCamera>'.
  Types of property 'position' are incompatible.
    Type 'number[]' is missing the following properties from type 'Vector3': x, y, z, isVector3, and 68 more.ts(2322)
canvas.d.ts(80, 3): The expected type comes from property 'camera' which is declared here on type 'IntrinsicAttributes & CanvasProps'

For those that bump into this themselves, an easy workaround is to assert the type as any, as in camera={{ position: [0, 0, 20] as any }}.

[drcmda]

do you know why? im still not so good with TS. shouldn't Partial be enough? these two most certainly have the position prop in threejs.

[birkir]

It's because three.js is expecting a Vector3 there and Vector3 !== [number, number, number].

I think the types at three.js need to be updated to allow the shorthand initialiser.

If you want to do it "By the book (tm)", here's how:

<Canvas camera={{ position: new THREE.Vector3(0, 0, 20) }} />

[drcmda]

i think its because its using applyProps, so mabye it should be a partial of

ReactThreeFiber.Object3DNode
perspectiveCamera: ReactThreeFiber.Object3DNode
orthographicCamera: ReactThreeFiber.Object3DNode

like in the three-types file.

[AndrewPrifer]

@birkir I quickly looked at the Threejs documentation and the shorthand is not documented anywhere, so I think the Threejs typings are correct. @drcmda is the array shorthand for Vectors also in Threejs or is it specific to react-three-fiber? If it is in Three, but not officially supported, it might be better still to use Vector3 in the react-three-fiber examples.

Edit: never mind, forgot to refresh my browser before commenting. :D

[drcmda]

yes, its specific to r3f. we have the types, that's why mesh position={[1,2,3]} works, just needs to apply to the canvas props as well i guess.

[drcmda]

this should work now ...