I wouldn't use the "native" controls based off raycaststers. Instead I would use any js gesture detection library. In this example i used hammer.js.
hammer.js registers an object which emits events when pan, swipe, pinch gestures are detected. I've created the object with the listeners in an a-frame component.
1) When pan is detected i just rotate the model depending on the direction (2 - left, 4 - right, 8 - up, 16 - down)
2) When pinch is detected i change the scale, depending on the event value, you can multiply by any factor. The component is below:
AFRAME.registerComponent("foo",{
init:function() {
var element = document.querySelector('body');
this.marker = document.querySelector('a-marker')
var model = document.querySelector('a-collada-model');
var hammertime = new Hammer(element);
var pinch = new Hammer.Pinch(); // Pinch is not by default in the recognisers
hammertime.add(pinch); // add it to the Manager instance
hammertime.on('pan', (ev) => {
let rotation = model.getAttribute("rotation")
switch(ev.direction) {
case 2:
rotation.y = rotation.y + 4
break;
case 4:
rotation.y = rotation.y - 4
break;
case 8:
rotation.x = rotation.x + 4
break;
case 16:
rotation.x = rotation.x - 4
break;
default:
break;
}
model.setAttribute("rotation", rotation)
});
hammertime.on("pinch", (ev) => {
let scale = {x:ev.scale, y:ev.scale, z:ev.scale}
model.setAttribute("scale", scale);
});
}
});
Working glitch here. In my example i also check if the marker is visible, thought it could be convinient.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
