Hi , is there anyway to enable both DeviceOrientationControls and OrbitControls to use pan and orientation on mobile ?
Here is my actual code:
// Controls gyroscope
orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
orbitControls.target.set(camera.position.x - 1, camera.position.y, camera.position.z);
clock = new THREE.Clock();
resize();
window.addEventListener("deviceorientation", deviceOrientationListener, false);
window.addEventListener("resize", resize, false);
var deviceOrientationListener = function(e) {
if (!e.alpha) {
return;
}
orbitControls = new THREE.DeviceOrientationControls(camera, true);
orbitControls.connect();
orbitControls.update();
resize();
window.removeEventListener("deviceorientation", deviceOrientationListener);
};
var loop = function() {
requestAnimationFrame($.proxy(loop, this));
orbitControls.update(clock.getDelta());
if (stereoEffect) {
stereoEffect.render(scene, camera);
} else {
renderer.render(scene, camera);
}
TWEEN.update();
Reticulum.update();
videoTexture.update();
};
Thank you for this amazing library by the way !
like if you place the camera into empty object3d, have device orientation apply to the camera, and orbit controls to object3d?
I finally got it 100%% right.
Users can drag left-right as well as up-down, without messing up device orientation.
DeviceOrientationControls.js.txt
I won’t include my full project, but using the attached control file, you just need to track the user’s finger-adjusted lat/lon (in degrees) and pass it along.
function animate(time) { requestAnimationFrame( animate ); controls.update(lon, lat); renderer.render( scene, camera ); }