How to drag model item with JS in an experience?

[Burhanuddin]

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

[lgherman]

Hello  Burhanuddin,

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

Thank you.

Kind regards,

Lorena Gherman

[Burhanuddin]

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

[mvavassori]

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

[lgherman]

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).

Kind regards,

Lorena

[Burhanuddin]

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

[lgherman]

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.

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