On Click Event I try to manipulate FBX model and trying to fetch position,scale,rotation x,y,z co-ordinates

On Click Event I try to manipulate FBX model and trying to fetch position,scale,rotation x,y,z co-ordinates.

 let rect = renderer.domElement.getBoundingClientRect();
mouse.x = ((event.clientX - rect.left) / (rect.width - rect.left)) * 2 - 1;
mouse.y = -((event.clientY - rect.top) / (rect.bottom - rect.top)) * 2 + 1;
// console.log('transform', transform);

raycaster.setFromCamera(mouse, camera);
// console.log('raycastersetFromCamera', raycaster);

let vector = new THREE.Vector3(mouse.x, mouse.y, 1);
vector.unproject(camera);

let ray = new THREE.Raycaster(
  camera.position,
  vector.sub(camera.position).normalize()
);

let intersects = ray.intersectObjects(scene.children, true);

if (intersects.length > 0) {
  console.log('intersects', intersects);
}

You should update your question with more details about what you’re actually trying to achieve and where you stuck. People invest their free time to help. For me its not really clear, but the transforms can be decomposed from the matrix like so

let obj = intersects[0].object
obj.updateMatrix()

let position = new THREE.Vector3()
let quaternion = new THREE.Quaternion()
let scale = new THREE.Vector3()
obj.matrix.decompose(position, quaternion, scale)
3 Likes

You should update your question with more details

That first.

Second, if the title is the question, then after getting an intersection, you can get the intersected object using object property:

let intersects = ray.intersectObjects(scene.children, true);

if (intersects.length > 0) {
  const sampleVariable = intersects[0].object.position; // <- Object3D intersected by the ray
}
1 Like

Hello @mjurczyk, @Fluqz sorry for not giving descriptive question, I means to ask that I uploaded FBX model and attach transform control to it. and then addeventListen in that I try to intersectObjects. in that code When I move my fbx model in mesh I need his x,y,z co-ordinate, but not getting when fbx move. I am getting on mouse click position’s

The strangest thing for me in your code, that you already have a raycaster (raycaster), setting it with .setFromCamera() method. And then you create a new raycaster (ray), setting it with camera position and calculated direction. Then you use the last one for intersections.

2 Likes

Hello @prisoner849, tried with removing line 258, still nothing change does that ray make any difference in code ?

To understand you correctly, you want to move your model with TransformControls and during the movement, you need to get the updated positions of the model?

1 Like

Yes @Fluqz, I need his co-ordinate so I can display in screen. co-ordinate of position,scale,rotation

You can see the screen shot I need to display x,y,z in right hand side boxes.

You probably dont need a raycaster for that. TransformControls let you drag your object through the scene and has several events that can be listened to.

Events

change

Fires if any type of change (object or property change) is performed. Property changes are separate events you can add event listeners to. The event type is “propertyname-changed”.

mouseDown

Fires if a pointer (mouse/touch) becomes active.

mouseUp

Fires if a pointer (mouse/touch) is no longer active.

objectChange

Fires if the controlled 3D object is changed.

I kinda have problem on my own here. I tried to test it with the threejs example r123, but the events listed above do not work as expected? The example uses dragging-changed event, which isnt even listed in the docs?

This worked

let position = new THREE.Vector3()

transformControls.addEventListener('objectChange', (e)=> {
              
     position.copy(fbx.position)
})
1 Like

I have one doubt how can I access fbx after transform control because model will load once then on addeventListener I am moving modal and getting x,y,z. I tried as you suggested but not getting success, can you help me .

I thought there is a way to get the attached object from TransformControls Events. But the event.target does not update. Im not sure whats happening here… Maybe someone else knows more about this?

transformControls.addEventListener('objectChange', (e)=> {
              
    let obj = e.target // <-- The position of the target stays 0, 0, 0 all the time

})

The other way would be to define a global variable outside your function and set it to the loaded fbx

let obj


let loadFBXModel = () => {

     modelLoader.load(..., (fbx) => {

          obj = fbx // store a reference globally to use it later
     })
}
1 Like

Okay thank you @Fluqz, I tried which Global variable but still not Getting Success.I think later @mjurczyk and @prisoner849 will help me further. thank’s a lot @Fluqz.

1 Like

I am still struggling with same issue, I will glad if anyone help me.

@Anuj_Bagerwal can you please repeat the question - there’s suddenly a lot of screenshots, text, and chaos in this thread. As short and specific as possible, it’s easier to help that way.

Yes sure,
**Task :- ** I can upload fbx and obj modal and I can manipulate by mouse click and I have to display modal current time position,scale and rotation.
**Done :- ** from this I add modal to scene and also attach transform control to modal. I need help when I click on mouse and try to move it I need modal current position,scale,rotation to display on screen, can you help me regarding this.

But is there a specific question / or issue blocking you? Or is it just “pls just help me get this done” ?

1 Like

I am blocked,I am not able to fetch the modal position.I tried using intersectObjects, and vector3 to get where is position of model in mesh, but it is not working.

let intersects = ray.intersectObjects(scene.children, true);

if (intersects.length > 0) {
const pos = intersects[0].object.position;

If you are looking for positions of only the root meshes, intersecting the entire scene (with recursion enabled) will not work - you’ll likely receive an intersection with a submesh.

After loading models, store references in some array, then test only against this array:

raycaster.intersectObjects(rootModels, false);
1 Like

Hi, can you please correct me If I am wrong, you means Like this :-
let meshs = [ ];
fbxLoader.load(url, (fbx) => {
fbx.name = ‘Horse’;
fbx.updateMatrix();
meshs.push(fbx); // Here is am adding model in array, should i also need to add floor/mesh which is like grid in this array ?
scene.add(fbx);
transform.attach(fbx);
});

// on mouse change eventListener
let intersects = raycaster.intersectObjects(meshs, false);
console.log(‘intersects’, intersects); // it is giving me empty array
if (intersects.length > 0) {
const sampleVariable = intersects[0].object.position;
console.log(‘sampleVariable’, sampleVariable);
}