Collision with Three.js objects

[jonybekov]

Hi, I want to store Three.js Vector3 object in observable root. When I call set method, it doesn't trigger update. I guess it colliding with Vector3 own setter. If I create a new object and pass to observable setter, it's working fine. But in my case, I don't want to create a new object because of frequent changes in my app.

const position$ = observable(new Vector3());

// value is [number,number,number] type
position$.fromArray(value) // <-- fromArray doesn't exist
position$.set(position$.peek().fromArray(value)) // <-- doesn't trigger update
position$.set(new Vector3(...value)) // <-- triggers update. But I had to create new object in every call

I've read #118 thread and curious if we can handle such cases?

[jmeistrich]

Sorry for the delay!

I've been trying to figure out the best way to solve this (and other classes like this) and I'm not sure of the best option. It seems like we need to extend the concept from #118 to be user customizable, so you could define custom behavior for instanceof Vector3 for example.

But I'm curious how it works currently. If you use setX does that notify correctly? If it does then it's a somewhat easy problem to customize the observable functions. But if it doesn't then it may be a different issue of fixing diffing of class properties.

Is it possible you could share a repo showing these functions not working that I could use to test and find a good solution?

[jmeistrich]

@jonybekov Any updates from your end? I’m curious if it’s still a problem and how we can fix it.

[jonybekov]

@jmeistrich Hey! Sorry for late response. I've created simple demo to reproduce the issue. As you can see, calling setX or fromArray is not triggering UI update.

https://stackblitz.com/edit/legend-state-collision-with-threejs-objects