问题
I'm using an equirectangular video as a texture for a sphere. You can mouse pan around the environment, but on mobile, I'd like to use this solution: https://github.com/mrdoob/three.js/blob/master/examples/js/controls/DeviceOrientationControls.js
It works great, however, I'm not sure how to "calibrate" or "orient" on start to an ideal center. Because the video starts with a logo in the dead center of the video, the user must move the device around to find where that is. On start, I'd like to orient the sphere or camera so that the "center" of what the user sees is the ideal center to start from. I suppose it's initial calibration around the Y-axis?
I apologize, I'm not super familiar with terms to use. Please let me know if I can help clarify. I most certainly fundamental gaps in my understanding.
I had a little success grabbing the initial alpha and using that as an offset during up, but orientation changes affect this negatively.
Thank you in advance for your help.
EDIT: Here is a crude drawing. Updated 3.14.2015.
http://i.imgur.com/Mds036U.jpg
Based on the comment from @WestLangley, I could rotate the mesh. This would work well, but I need to be able to rotate the mesh based on an initial offset to ensure the orb is initially rotated to the 'same' spot at the start.
回答1:
You are using DeviceOrientationControls, and viewing a texture on the inner surface of a sphere mesh.
If you want to apply an initial rotation to the texture on the sphere, you can use this pattern:
mesh.material.map.wrapS = mesh.material.map.wrapT = THREE.RepeatWrapping;
mesh.material.map.offset.set( 0.25, 0 ); // quarter-turn
Alternatively, in your case, you can rotate the sphere, instead:
mesh.rotation.set( 0, Math.PI / 2, 0 );
three.js r.70
来源：https://stackoverflow.com/questions/29015859/deviceorientationcontrols-js-calibration-to-ideal-starting-center