Mesh position does not follow the position of the mouse

Hello guys,

I have the following problem:

On my scene I have 2 types of meshes: one I call ‘wall’ and the other I call ‘symbol’.
When I copy the symbol I use the button ‘d’ and the duplicate of this mesh is created.
This duplicate follows the mouse until I click somewhere on the map (where I want to place this mesh).

In case of ‘symbol’ it works fine.
But in case of ‘wall’ duplicated mesh never follows the mouse, but it has some ‘x’ and ‘z’ distance from it.
I use the same code that work with both types of meshes.

This is the code that I use when clicking on the ‘d’ key:

    mouse.x = ((event.clientX - 70) / renderer.domElement.clientWidth) * 2 - 1;
    mouse.y = - ((event.clientY - 100) / renderer.domElement.clientHeight) * 2 + 1;
    raycaster.setFromCamera(mouse, camera);
    intersects = raycaster.intersectObjects(objects);

    clipboard.position.x = intersects[0].point.x;
    clipboard.position.z = intersects[0].point.z;

I attached video in order to better explain the problem.
And I attached json of both meshes.

Many thanks for your help.

Symbol.json (61.9 KB)
Wall (3.3 KB)

I guess the center of the wall is not on the object.

Thanks, any idea how to resolve this?

scene.json (6.4 KB)
I adjusted the center a bit using blender.


But I need a hint about how to ‘re-center’ this object in Three.js.


const box = new THREE.Box3()
const center = box.getCenter(new THREE.Vector3()).negate()
mesh.geometry.translate(center.x, center.y, center.z)

Try this.