[SOLVED] Transform controls changes to different mesh on a scene even when the arrow is in focus


I have a problem in my scene. I have transform controls attached to scene children using raycasting. Whenever I click on first mesh’s arrow when it is on second mesh’s body the control changes to the second mesh. The same happens when the dragging ends at another mesh.

How to make transform controls stay on same mesh even when the click event ends on another mesh.
Here is the codepen https://codepen.io/abnormalcoder/pen/gOOdjgY

Thanks in advance.

1 Like

For me it looks like its working. If i am understanding you correctly (i might not) you don’t want to switch the control to the other mesh when clicking it. Then you just delete this “control.attach(intersects[i].object);”

Thanks for the reply.

The desired output for me is in the below picture when I click on blue arrow the control gets transferred to another mesh and I want them to stay with same mesh as long as the click is on the same mesh transform controls.


Ok now i understand. If you are looking at this log:
You will notice that the control and the mesh are represented in the array. They are sorted, that means the object which is nearest to you is the first (the control) and the mesh will be last.

So with your code you attach the control at the end to the other mesh :
for (var i = 0; i < intersects.length; i++) {
To solve this you have to say something like:
“If the control is first, then break”

You can detect your control as transformcontrol by getting the .type or
you can give parameters f.e. with this:
Transformcontrol.traverse((obj) => {
obj.thisIsATransformControl = True;

Thanks for taking time and replying.

In console.log(intersects); I only get mesh. Because I’m pushing two mesh into a meshes array.

And if I add scenes.children parameter for intersectObjects, I see many objects getting casted and then I filter object type by Mesh and add transform controls. Updated the code https://codepen.io/abnormalcoder/pen/gOOdjgY

How can this be achieved ?

    for (var i = 0; i < intersects.length; i++) {

            if (intersects[i].object.type == "Mesh")
                break; //when intersect is mesh, then break


Hey, the code already goes into object type “Mesh” doesn’t need break. I agree that the raycasting will stop after Mesh is clicked. But I want don’t want the controls to be added to a different mesh if a transform control helper arrow is clicked. updated the code again https://codepen.io/abnormalcoder/pen/gOOdjgY

I’ll be more clear, in the image below when the blue arrow clicked it should not leave the control to another mesh. I should stay with the current mesh as the arrow belongs to current mesh.

Thanks anyways, I got it solved.

Can you post the solution and mark the topic as solved? I would like to add it to the collection. Collection of examples from discourse.threejs.org :slightly_smiling_face:


Sure thing. I’m posting the solution here.

I have checked your work and the stuff is really interesting. I see that you have code for all the examples. A little bit of description for each example would be more helpful.

And the solution for the problem is to detect a click on transform controls using mouseUp or mouseDown events and set a variable value to true when clicked and get the current clicked object mesh.

when a transform control of an object is clicked save it in a variable and use it later in raycaster to stay with current mesh or transfer it to a different mesh when transform control is not clicked.

Here is the codepen output https://codepen.io/abnormalcoder/pen/gOOdjgY

1 Like

Thanks for sharing.:slightly_smiling_face:

I can’t do more than collect the examples and provide them with the link to the post and the source. :worried: It’s a lot of work to look at all the posts.

See also the conversation there Lights for car headlight

You are already doing a great work. Thumbs up for all your hard work.