Move a object by user only in direction

Questions
1

hi

i am using dragcontrols , i want the user be able to move the picture along and wall,
how can i limit the user to only move the to the direction in the photo i add?

g

thanks

2

I had a similar problem here Drag object along paths

You can use the Line3 to make a line from corner to corner of each wall and then get the closestPointToPoint and set your obj to it. Make sure to use clamping = true

this.line = new THREE.Line3(startVec3, endVec3)

public move(moveTo: THREE.Vector3) {

    this.line.closestPointToPoint(moveTo, true, moveTo)

    // To limit movement only in x or z axes
    this.obj.position.x = moveTo.x
    this.obj.position.z = moveTo.z
}
1 Like
3

thanks!!!

one last question how do i get startVec3 and endVec3 of object ?

4

That depends on how you build your scene. Did you create each wall or is it one big model? Basicly you need to get the positions and the lengths of your walls and calculate their corner positions.
If you have the wall as obj, you can compute the BoundingBox of the wall to get the dimensions.

Having a Object3D you do as follow

let bbox = new THREE.Box3().setFromObject(wallMesh)
let dimension = new THREE.Vector3()
bbox.getSize(dimension)

Having a Mesh with geometry, you can do

 mesh.geometry.computeBoundingBox()

If your pivot point is in the middle of your wall, you can calculate the corners like so

corner1 = new THREE.Vector3(
             wallMesh.position.x + (dimension.x / 2), 
             wallmesh.position.y - (dimension.y / 2), 
             wallMesh.position.z + (dimension.z / 2)
)

corner2 = new THREE.Vector3(
             wallMesh.position.x - (dimension.x / 2), 
             wallmesh.position.y - (dimension.y / 2), 
             wallMesh.position.z + (dimension.z / 2)
)
5

thanks.

i figure out how to calculate my wall corners .
still trying to figure this.line.closestPointToPoint(moveTo, true, moveTo)
the first moveto is the first corner and second moveto is the second corner
how do i pass the position of the object that i am moving, in my case the image

thanks a lot for you help

6

Btw you can add custom start & end points yourself in 3D software. For example in Blender you could parent empty objects to the wall/building and when using GLTF Exporter (2.8+) they will be exported as children Object3D with positions, ready to be used in your app :slight_smile:

7

Hey, when instancing a line object let line = new THREE.Line3(startVec, endVec); you define a route. The length of the line from point A to B. Now when using the line.closestPointToPoint() function, you are saying: I have a point(V)! Give me the nearest point ON the line, that is closest to the point(V).

The documentation states: .closestPointToPoint ( point : Vector3, clampToLine : Boolean, target : Vector3 ) : Vector3

The first parameter is the pointV (Your obj (painting) position on the wall)
The second parameter is a boolean for clamping it ( Set it to true! )
The third parameter is the target vector3 where the result is stored ( basicly the return value )