[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.


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);”

1 Like

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 - #4 by prisoner849

1 Like

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

Hello,I have same problem I want to manage two object in my project.

var loader = new FBXLoader();
loader.load( ‘<?php echo $uruncek['urun_3d'] ?>’ , function ( object ) {

				scene.add( object );
				control.attach( object );

This code allow me taht I arrange just one object by using TransformControls BUT my objects number is 2 and I couldnt use control function .I just use only one object.
For example:
SKIRT and Necklase objects
I just arrage one of them by using upstairs code.but I want to arrange two of them.
How can I do that?

Are you trying to attach transform controls for two objects at once? that is not possible. Transform control can be attached to only one object at a time. If you want to use Transform controls dynamically on click use raycaster with that objects array and add transform controls.

you can use transformControls.dragging

  if (transformControls.dragging) {

    (event.clientX / window.innerWidth) * 2 - 1,
    -(event.clientY / window.innerHeight) * 2 + 1

  raycaster.setFromCamera(pointer, camera);
  const intersects = raycaster.intersectObjects(flatedComponents, false);

  if (intersects.length > 0) {
    const intersect = intersects[0];
    if (intersect.object !== transformControls.object) {