lookAt referencing self

[tmb]

Hey folks,

I'm trying to replicate the call mesh.current.lookAt(mesh.current.position.clone().setLength(3)); within React Three Fiber.

Right now, I'm using a useEffect call with a ref, which works upon first render, but then breaks upon any further renders. I'm new to Three (and just trying to hack something together), so it's possible I'm missing something obvious/fundamental here.

I've tried adding lookAt={vector.clone().setLength(3)} to the mesh, which doesn't work. I can't figure out if there's a way for me to reference the mesh's current position within lookAt

Intended behavior:
Move the slider, number of boxes increase and they all are pointing at the planet

Actual behavior:
Move the slider, number of boxes increase but are pointing in random directions

I've uploaded my code here: https://gist.github.com/tmb/e321fba22eb17ba4ea8b4bfabd71e538. The component in question is SpherePoint

Thanks in advance for the help!

[drcmda]

Lookat is a function, you're overwriting it with a vector. R3f jsx props are the exact same as threes, so you're effectively doing: obj.lookAt = vec

You can do what you want either directly on the jsx element: onUpdate={self => ... Or, you do it in useLayoutEffect(()=>...) Without specifying dependencies if you want to call it every render.