Dynamically attach image to wall

Questions
1

hello

i am trying to dynamically attach image to walls, while using dragcontrol.
i want the user to move the pictures only left and right and the images will
be attach to the wall automatically
the object i was trying create is moving around images on a walls,but
only on a walls left and right, so i need to give it option to attach to a wall
my code is :

 move_images_around  = new THREE.Raycaster();

 controls.addEventListener( 'drag',function(event){
	 

//get the moveable image 
var get = event.object.getWorldPosition(vertex);


	var originPoint = get.clone();
	
	
	for (var vertexIndex = 0; vertexIndex < event.object.geometry.vertices.length; vertexIndex++)
{       
    var localVertex = event.object.geometry.vertices[4].clone();
    var globalVertex = localVertex.applyMatrix4(event.object.matrix);
    var directionVector = globalVertex.sub( event.object.position );
     
	var ray = new THREE.Raycaster( originPoint, directionVector.clone().normalize() );
	var collisionResults = ray.intersectObjects( wallGroup.children );
   
 
		
		 for ( var i = 0; i < collisionResults.length; i++ ) {
		
		 
         
		 event.object.rotation.y  = collisionResults[ i ].object.rotation.y   ; 
		 event.object.rotation.x  = collisionResults[ i ].object.rotation.x   ; 
		  event.object.rotation.z  = collisionResults[ i ].object.rotation.z   ; 
		 
		
		  
	}
2

Sorry but it’s not clear from your text and code what problem your are facing. Please invest more time in describing the current and expected result. Consider to use a live example so it’s easier for community members to understand your progress of work.

3

i will try :blush:

//this is to know  the wall the images is in front of 
move_images_around  = new THREE.Raycaster();

// this is for the option to drag the wall images
var controls = new THREE.DragControls( wallimages, camera, renderer.domElement );

//this will start when the wall  image is drag
 controls.addEventListener( 'drag',function(event){
	 

//all of this is for to know in in front which wall the picture is located and what i am trying to 
// do is attach the image to  that  wall that is in front of, so the user is limit to drag the image only
// around walls, i want the user to be able to arrange the image in the order and change places between images  that he wants  in the scene and not in the middle of the scene 

var get = event.object.getWorldPosition(vertex);


	var originPoint = get.clone();
	
	
	for (var vertexIndex = 0; vertexIndex < event.object.geometry.vertices.length; vertexIndex++)
{       
    var localVertex = event.object.geometry.vertices[4].clone();
    var globalVertex = localVertex.applyMatrix4(event.object.matrix);
    var directionVector = globalVertex.sub( event.object.position );
     
	var ray = new THREE.Raycaster( originPoint, directionVector.clone().normalize() );
	var collisionResults = ray.intersectObjects( wallGroup.children );
   
 
		
		 for ( var i = 0; i < collisionResults.length; i++ ) {
		
		 
             // here i am detection the wall rotation and rotate the image to it

		 event.object.rotation.y  = collisionResults[ i ].object.rotation.y   ; 
		 event.object.rotation.x  = collisionResults[ i ].object.rotation.x   ; 
		  event.object.rotation.z  = collisionResults[ i ].object.rotation.z   ; 
		 
		
		  
	}