I couldn't contain my excitement. Thank you so much for creating such fantastic elements with high usability and versatility.

Hello, thanks for checking it out!

1)

Can ‘lume’ be used in parallel with r3f?

It is possible, yeah. I haven't tried combining r3f+lume, but I have combined lume with plain Threejs. I can make a small demo.

Basically every Lume element has the property element.three to access the Threejs object (f.e. a Three.Mesh instance, etc).

To do the integration, we would probably want to make the lume-flex layout in Lume, f.e.

<lume-flex>
  <lume-flex-item></lume-flex-item>
  <lume-flex-item></lume-flex-item>
  ...etc...
</lume-flex>

then for each of the child item, you could get the ref to your r3f component's threejs object, and then reach into the Lume element's threejs object to add it: lumeFlexItem.three.add(threeObjectFromR3f). This combination could be abstracted into a React component f.e.:

function FlexItem() {
  const lumeEl = useRef()
  const meshRef = useRef()

  // something like this
  useEffect(() => {
    lumeEl.current.three.add(meshRef.current)
  }, [lumeEl.current, meshRef.current])

  return <>
    <lume-flex-item ref={lumeEl}></lume-flex-item>
    <mesh ref={meshRef}></mesh>
  </>
}

Then in the higher up component <lume-flex>{items.map(item => <FlexItem />)}</lume-flex>. That's the gist, but there may be some quirks to work through (because you know programming, surely something could go wrong :).

2)

Does lume-flex allow setting the order of objects within the flex layout?

Not currently but should be easy to add. Would it be easier to have that feature than, for example, ordering the items of the array itself that you .map in your JSX? f.e.

const items = [{order: 3}, {order: 1}, {order: 2}]

// ...

return <lume-flex>{items.sort(...).map(...)}</lume-flex>

Dear @trusktr ,

I sincerely thank you for your detailed and kind response.

I was truly moved by your thoughtful and considerate reply, and I aspire to learn from and emulate your attitude. Once again, I am deeply grateful.

I've followed your articles and writings for quite some time and knew that you were an exceptional person, but I didn’t expect you to be so kind and generous in responding to someone on the other side of the world. I hope to become someone with the same kindness and attitude that you have demonstrated.

Regarding the question about ordering the items via .map in JSX:

If dynamic ordering is possible with the method you suggested, I think it would be easier to change the order using .map.

I am currently working on a small project, developing a website with 3D elements. However, I lack a lot of professional knowledge and don't have a solid foundation, so it's highly possible that the bug I mentioned earlier was due to my incorrect development or misuse of the tools I'm using. Given this situation, I feel a bit apologetic for requesting a specific feature from you.

Once again, I truly appreciate your kind response and hope to see more of your work in the future. Thank you very much.

Sincerely,
karim-moon

No prob. Happy to be of any help! A goal with Lume is to make it helpful for people who want to achieve new features and effects for their web apps, so I'm happy to help out. :)