Passing Points component ref to Recoil causes errors.

[tomatualus]

Hello!

I am using react-three-fiber and recoil together to play around. What i stumbled upon almost instantly, is that when i set atoms value to a components ref, i get many errors.

import React, { ReactNode } from "react";
import { Canvas } from "react-three-fiber";
import { atom, useRecoilBridgeAcrossReactRoots_UNSTABLE, useRecoilState } from "recoil";
import * as THREE from "three";
export const pointsState = atom<ReactNode>({
    key: 'pointsState',
    default: null,
});

export const TestComponent = () => {
    const [pointRef, setPointRef] = useRecoilState(pointsState);
    const RecoilBridge = useRecoilBridgeAcrossReactRoots_UNSTABLE();

    let raycaster = new THREE.Raycaster();
    raycaster.params.Points!.threshold = 0.25;

    let vertices = [
        new THREE.Vector3(-1, -1, 1),
        new THREE.Vector3(1, -1, 1),
        new THREE.Vector3(-1, 1, 1),
        new THREE.Vector3(1, 1, 1),
        new THREE.Vector3(-1, -1, -1),
        new THREE.Vector3(1, -1, -1),
        new THREE.Vector3(-1, 1, -1),
        new THREE.Vector3(1, 1, -1),
    ];

    return (
        <Canvas>
            <RecoilBridge>
                <points ref={(ref) => {
                    console.log("Settings points ref", ref);
                    setPointRef(ref); // Crashes here!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
                    }}>
                    <pointsMaterial size={0.25} color={"yellow"} />
                    <geometry vertices={vertices} />
                </points>
            </RecoilBridge>
        </Canvas>
    )
}

And ofcourse the root component

import React from 'react';
import { RecoilRoot } from 'recoil';
import { TestComponent } from './TestComponent';

export const Root = () => {
    return (
        <RecoilRoot>
            <TestComponent />
        </RecoilRoot>
    );
}

The errors are TypeError: "x" is read-only or TypeError: "vertices" is read-only or many more. Any help on this?

Ofcourse - why am i doing this? I need the components reference so i can raycast it, simple as that. I COULD use React.forwardRef, but if that would be the case, i would have prop hell soon.

[drcmda]

i think you need to post this on recoils github. the ref just contains an instance to THREE.Points. if recoil doesn't handle that then it's probably messing with it in some way.

im also not sure about how you feed it vertices. it should be:

const [vertices] = useState(() => [
  [-1, -1, 1], [1, -1, 1], [-1, 1, 1], [1, 1, 1],
  [-1, -1, -1], [1, -1, -1],  [-1, 1, -1], [1, 1, -1],
].map(a => new THREE.Vector3(...a))

updating buffers in threejs is a bit odd, im am not sure what happens if you simply overwrite vertices on a new render pass, this could perhaps be your problem. there's a document explaining it: https://threejs.org/docs/index.html#manual/en/introduction/How-to-update-things