Threejs 轨道控制在触摸设备上无法正常工作

Question

我有一个 threejs 场景，其中加载了一个对象和一个摄像机，当用户在屏幕上拖动时，它必须围绕它旋转。 这在计算机中效果很好，但在触摸设备上则不然。 如果在不缩放(捏合(的情况下转动它，它工作得很好， 如果它被缩放然后转动，它不能很好地工作。 物体在转动时变大和缩小， 我不明白问题是什么。

Answer 1

init();
animate();
function init() {
w_container = $obj3D.width();
h_container = $obj3D.height();
camera = new THREE.PerspectiveCamera(45, w_container / h_container, 1, 2000);
camera.position.z = zoom_value;
scene = new THREE.Scene();
controls = new THREE.OrbitControls(camera, $obj3D[0]);
controls.enableDamping = true;
controls.dampingFactor = 0.08;
controls.rotateSpeed = 0.03;
controls.enableZoom = true;
controls.zoomSpeed = 0.5;
controls.minDistance = 30;  
controls.maxDistance = 230;
controls.update();
var ambientLight = new THREE.AmbientLight(0xffffff, 1.4);
scene.add(ambientLight);
var pointLight = new THREE.PointLight(0x5a5a5a, .7);
pointLight.power = .6;
pointLight.position.set(50, 50, 50);
camera.add(pointLight);
scene.add(camera);
THREE.Loader.Handlers.add(/.dds$/i, new THREE.DDSLoader());
new THREE.MTLLoader()
.setPath('models/packagin/')
.setMaterialOptions({side: THREE.DoubleSide})
.load('oggetto.mtl', function (materials) {
materials.preload();
new THREE.OBJLoader()
.setMaterials(materials)
.setPath('models/packagin/')
.load('oggetto.obj', function (object) {
object.traverse(function (child) {
if (child instanceof THREE.Mesh) {
}
});
object.position.y = -28;
OBJ = object;
scene.add(object);
}, onProgress, onError);
});
renderer = new THREE.WebGLRenderer();
renderer = new THREE.WebGLRenderer({alpha: true, antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(w_container, h_container);
$obj3D[0].appendChild(renderer.domElement);
window.addEventListener('resize', canvasResize, false);
}
function animate() {
requestAnimationFrame(animate);
controls.update();
render();
}

}