cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

How to drag model item with JS in an experience?

Highlighted
Participant

How to drag model item with JS in an experience?

I want to drag model item by touch gesture with JS.

8 REPLIES 8
Highlighted

Re: How to drag model item with JS in an experience?

Hello  Burhanuddin,

 

What is the use case you are trying to achieve? Could you please elaborate on that?

Thank you.

 

Kind regards,

Lorena Gherman

Highlighted

Re: How to drag model item with JS in an experience?

The use case i am trying to achieve is that to Disassemble a model with dragging out the model item in any direction  with touch gesture in an experience .

 

 

 

 

 

Thank you

Burhanuddin

Highlighted

Re: How to drag model item with JS in an experience?

Hi,
i have the same problem, have you found a solution?

Highlighted

Re: How to drag model item with JS in an experience?

Hello Burhanuddin, mvavassori,

 

You can achieve this behavior by using touch events such as touchend (http://www.javascriptkit.com/javatutors/touchevents.shtml)

document.body.addEventListener('touchend', function(e) {
	/* Move the model item */   	
    }, false) 

In order to move the model item you can either:

1) start an (pre-defined) animation of the model in which the model item is being dragged outside the model

or

2) move the model item programmatically by changing the x,y,z coordinates accordingly to the desired result.

Next, just add in the Javascript box of each model item a function call that sets what animation needs to start (or what model item to move).

modelItemMove.PNG

 

 

Kind regards,

Lorena

Highlighted

Re: How to drag model item with JS in an experience?

Hello Lorena

I have tried out the js which you have given, but i can't move the model item. Can you please send me a zip file on any model by applying this js.

 

 

 

Thank you,

Burhanuddin

Highlighted

Re: How to drag model item with JS in an experience?

Hello Burhanuddin,

 

Let's say that the model has 2 model items named 'modelItem-1' and 'modelItem-2'. You can add an application parameter (named 'selectedModelItem', for example) that will monitor which modelItem is currently selected and needs to be moved. Next, on the javascript box of the Click event of each model item, you need to set the selectedModelItem parameter to the appropriate value (1 for modelItem-1 and 2 for modelItem-2). This way, the user first needs to click on the model item he/she wants to drag.

AppParam.PNG

 

ModelItemClick.PNG

Next, while the user is touching the screen (touchmove), you need to move the model item that was selected like in the code shown below. You can do that by increasing/decreasing his x, y and/or z values. When the user stops (touchend), the selectedModelItem parameter needs to be reset.

 

$scope.Init = function() {
  
  document.body.addEventListener('touchend', function(e) {
    	/* Reset the selectedModelItem */
		$scope.app.params.selectedModelItem = 0;
    
  }, false);
  
  document.body.addEventListener('touchmove', function(e) {
    
		switch($scope.app.params.selectedModelItem) {
      		case 1:
            	/* Move the first model item */
            	$scope.view.wdg['modelItem-1'].x -= 0.01;
            	$scope.view.wdg['modelItem-1'].y += 0.01;
        		break;
      		case 2:
            	/* Move the second model item */
        		$scope.view.wdg['modelItem-2'].x -= 0.01;
        		$scope.view.wdg['modelItem-2'].y += 0.01;
        		break;
      		default:
       			break;
    	}
  }, false);
}

angular.element(document).ready(function () {
	$scope.Init();
});

 

 

 

 

Kind regards,

Lorena

Highlighted

Re: How to drag model item with JS in an experience?

Hello Lorena,

In the above solution which of the selected binding target had given to the selectedModelItem .

 

Thank you 

Burhanuddin

Highlighted

Re: How to drag model item with JS in an experience?

Hello Burhanuddin,

 

In the example I gave, there is no need to bind the selectedModelItem parameter with anything. Did this answear your question? If not, could you please rephrase it?

 

Kind regards,

Lorena Gherman

Announcements
Join an
AR Working Group!

Topics available:
AR/VR for Data Optimization AR/VR for Security and Control AR/VR for Inspection