Remove a component?

[r03ert0]

Hello,
What is the advised way of removing a component? Like the inverse of component.add()?

[felixmariotto]

Thanks for asking this question, I realized that using the Object3D.remove function caused issues because it doesn't trigger a recalculation of the layout. I have updated the lib, added a MeshUIComponent.remove method that override the Object3D.remove method in order to trigger a layout update.

Here is a fiddle

[r03ert0]

Thank you very much @felixmariotto !!

I found that using a combination of component.remove (which removes from three.js) and component.clear (an undocumented function of three-mesh-ui) worked, but it'll be much nicer just to have the remove function!

Here's a screenshot of what I built thanks to three-mesh-ui: I file browser which I can use to navigate the files in my hard disk drive from the VR headset. The scroller is working, and I can go in an out from the directories. I'm planning to use it to open 3d models for my hard disk drive :p

Thank you for the great module!

[felixmariotto]

OMG it looks so good ! Well done !

[SrinivasPrabhu794]

@r03ert0 Do you have a fiddle that you could share for the same ? :)

[r03ert0]

hi @SrinivasPrabhu794
@felixmariotto's approach is better. Check his fiddle here https://jsfiddle.net/felixmariotto/boc0yr2e/

[SrinivasPrabhu794]

Sure @r03ert0 Thanks for the fiddle :)

[SrinivasPrabhu794]

@r03ert0 I meant a fiddle for the scrolling option :)

[r03ert0]

ah! sorry! there's no scrolling option built in three-mesh-ui... it's something I wrote for an app and is not an independent module (at some point I'll put the whole app on github).

[SrinivasPrabhu794]

Ok. that's cool. Not a problem. What was the basic logic behind scrolling the options here?

You just translate up the whole container whenever the scrollbar translates down?

[r03ert0]

I first tried having a long block with all items and then using the hideOverflow option to show only a part of it. But now I'm just updating the content of the block with the selection of items every time the slider cursor moves. The only slightly tricky part is to get the position of the slider cursor relative to the whole slider rail, and make it move. For that, I first store the initial position of the cursor once a trigger is pressed, then I compute a vector having the same orientation as the rail, and I compute the amount of displacement to be the dot product between the rail vector and the vector that goes from the stored initial point and the current point. There's some joggling between local and global coordinate spaces...

[felixmariotto]

@r03ert0 @SrinivasPrabhu794

Actually I've been asked several times for a built-in scrolling solution, but I'm at a loss to find the right API.
The scrolling itself is not a big deal, just child.position.y += whatever. However as you wrote above, the tricky part is to get how much scroll is desired, and in which direction.

Three-mesh-ui does not assume how the UI it creates is interacted with, so as to be open for non-VR projects, wild AR experiments... A hypothetical built-in slider could be interacted with by two rays cast from two VR controllers, from one ray cast from the camera, from spheres representing VR hand joints... Also the scrolling input could be that the slider is dragged or the VR controllers joysticks are pushed... I'm not sure how to help all these use-cases in one API.

I'm open for suggestions here.

[r03ert0]

I'll try to pack a little minimal example with my approach, if that can help get the ball rolling :)

[felixmariotto]

@r03ert0 thanks a lot !

[JoeCoppola-HIA]

Hey @r03ert0, your scroll example above is phenomenal!

I'm in the early stages of attempting such an implementation myself, but am coming across some issues it seems you fought with yourself.

I'm building a complex widget with three mesh ui to display a list of interactive buttons. That list obviously can't show all buttons at the same time, and in tandem I'll be working on a scroll view in order to scroll through the buttons. I'd like to take advantage of @felixmariotto suggestion in simply modifying the y position of my parent container.

One problem I have yet to solve though is preventing the raycasting code shown in the interactive button example from colliding with buttons being hidden because they are overflow. Looks like you solved this issue by only appending items that will be visible in the viewport itself. That solution is a good one, but I'm curious if @felixmariotto has any thoughts here. I'd like to take advantage of Three Mesh UI's hidden overflow, but am open to other ideas.

Thanks!

[felixmariotto]

@JoeCoppola-HIA I think the easiest would be to code some logic that make sure the ray also intersect a Block that is not clipped.
Let's say you have a 2x2 Block in which you put a 2x8 list with buttons inside. When you hit one of the buttons, check if you also hit the 2x2 Block with the same ray.

Edit: I see that your question is 2 months old but I just got the notification, I don't understand... I hope you found a solution in the meantime.

[JoeCoppola-HIA]

We are building an webapp, using three mesh UI heavily for our UI in order to support AR and Web. It has been working out pretty well so far. We solved the issue by having parent UI objects pass interaction events down to any children objects. Works pretty well.

[eviltik]

having parent UI objects pass interaction events down to any children objects

Quite an elegant solution. And everything has been said to be able to code a three-mesh-ui example, which would be an interesting contribution.

I would like to know if you (or any body who want to share something regarding scrolling implementation ) would be ok and if you have time to share some code or not, before starting something. Thank you.

Everything related to scrolling is interesting (approach, easing, controlers behavior choice). Pretext to create a github "discussion" ?

[swingingtom]

Everything related to scrolling is interesting (approach, easing, controlers behavior choice). Pretext to create a github "discussion" ?

Go for it !

[JoeCoppola-HIA]

having parent UI objects pass interaction events down to any children objects

Quite an elegant solution. And everything has been said to be able to code a three-mesh-ui example, which would be an interesting contribution.

I would like to know if you (or any body who want to share something regarding scrolling implementation ) would be ok and if you have time to share some code or not, before starting something. Thank you.

Everything related to scrolling is interesting (approach, easing, controlers behavior choice). Pretext to create a github "discussion" ?

I would like to make an example showing this event propagation, I would have find a way to take our code and rework it in a way to be a proper example. We are a typescript house so that is the biggest hurdle when contributing code back to the repo. But we love the repo and are using it heavily now, so I will try to find some free time to back this logic back into the repo as an example.

Edit: I still plan on getting this example built out, we are wrapping an overhaul to our scrollview system. I figured it would be wise to wait until that is finished to build out an example.

[swingingtom]

That would be great @JoeCoppola-HIA thanks !