How to setup drei PivotControls with Glb file Objects for select and move

Questions
, ,
1

Hey Community.

Here is my example of third failure attempt to make it work.
What i am trying to acheive, is simple basic editor with glb files (for user). i managed to have lot of things working but this (concept of context (select + tool) etc).

attemp 3 Preview - nodebox - CodeSandbox

  1. i have a glb loaded with few objects.
  2. right now, clicking on glb(objects) selects that object.
  3. it then shows PivotControls (wrong place) → ideally control should be shown at object pos/rot(local) etc
  4. moving / rotating (pivotControls) moves object as well, but clicking on any other object resets first one.(how to fix).
  5. third or fourth object selection causes crash with msg
Cannot set properties of undefined (setting 'onClick')

Any idea about how to acheive above correctly? or what i am doing wrong will help a lot, thanks,haseeb.

2

i have an example for that using old transform controls TransformControls and makeDefault - CodeSandbox but it shouldn’t be that much effort to move to pivot.

if you want pivot to be where the object is use anchor

<PivotControls anchor={[0,0,0]}>
  <Foo />

anchor is a bb (boundary box)-anchor, 0 is center, + 1 is the right/bottom, -1 the left/top. without anchor pivot will (imo) display in the center of the scene.

1 Like
3

like this https://codesandbox.io/p/sandbox/practical-buck-xtwvxm?workspaceId=7fd07faf-cf1d-470f-bfb7-32ec2f50b644

1 Like
4

Hey drcmda,
1- wow, huge thanks, its so good. in my attemp1, i had this via TransformControls. and was facing 2 issues.
a- how to make TransformControl aligned with child object (local axis) its always aligned with world.
b- i was manually selecting with left click and once TM controls showing, mouse click was detecting gizmo objects as well, rather than scene objects.
your first example , is amazing. only question is, is it possible to make TM orientation(rotation) matched the selected object. so it feels local axis.?
thanks again for help. means a lot. cheers,haseeb

5

i don’t think TC can do that. pivot was made mostly because it can tie to objects and because TC lacked flexibility.

6

Hey, i have updated my example using first one and trying to modify TC to PC. pretty close but not finished.
[Updated Example]( App.js - nodebox - CodeSandbox)
Issues remaining

  • updated transform aren’t being applied. once i select new object, previous one comes back to orig position. i tried, but i wasn’t able to extract transformed values on drag end and apply to object either on drag end or on new object (selection change)
  • i managed to get org rotation and align pivot gizmo to that (local axis) but position still is BB center and not actual pivot. it seems PC has offset parameter but i wasn’t able to give it values successfully exactly as

any ideas, will be of huge help, thanks again for support.