Trouble overriding Object3D.matrix in R3F vs vanilla

[mattrossman]

In vanilla Three.js, I can rewire an object's .matrix to point to my own THREE.Matrix4() and then perform updates on that matrix:
https://jsfiddle.net/mattrossman/4au067nt/

However, the same setup in R3F doesn't work:
https://codesandbox.io/s/cs8f0

Have I messed something up in translation, or is this a bug?

[mordv]

#1786 might be related

[drcmda]

the mesh already has a matrix, all you'd need is a ref

const ref = useRef()
useFrame(() => {
  ref.current.matrix.set(...)
})
return <mesh ref={ref} matrixAutoUpdate={false} />

the issue how obj={value} is defined in r3f. this is not clearly explained in the docs unfortunately. it will decide between set and copy. see: https://github.com/pmndrs/react-three-fiber/blob/master/packages/fiber/src/core/renderer.ts#L206-L236

it calls set when you give it a raw value, for instance an array. it calls copy when the type of both the target and the value matches. should copy not be available it will overwrite.

you can either set the matrix on the object directly or you wire the external up yourself inside a useLayoutEffect

[drcmda]

some further observations, the object has to have both set and copy for a shortcut to kick in. otherwise it overwrites. that's why we can do geometry={g} or material={m}. matrix has both set and copy and that makes it branch into copy. another workaround, next to re-using mesh.matrix is neutering the check:

<mesh matrix-copy={null} matrix={matrix} matrixAutoUpdate={false} />

though that seems a bit weird and will make it harder to parse the code. not an easy problem, if you have more ideas let me know.

[CodyJasonBennett]

I think we'll have to clarify whether/how to make that reactive in the docs, but that looks good to me.

[mattrossman]

That would better fit my mental model!

[dangrabcad]

It sounded like a risky change, so I've had a look through all the places where we're using this kind of prop in our code, and I don't see anything that would become a problem.

[drcmda]

i just tried an implementation, but .....

const v = new THREE.Vector3()
const m = new THREE.Mesh()
m.position = v

it seems like we aren't even allowed to overwrite props in threejs any longer, trying to figure out what prompted that change: mrdoob/three.js#21646 (comment)

if that's final and intended, i think it makes no sense to remove copy. even if that would work for some props it would make it almost random where some props work and some crash. in this case matrix for instance would work, vectors crash.

[drcmda]

so i think we can put it to rest as per mrdoob's answer in that thread. if it's a discouraged pattern i think it's safe to assume they'll also make the leftover props (matrix, ...) non-exchangeable. maybe it wasn't such a bad idea going for copy in hindsight, we'd have been in a terrible situation now. 😐