如何设置球面缓冲几何的垂直角？旋转网格时，为什么Orbit控件无法正常工作？

Question

我在尝试设置spherebuffergeometry内部全景图像的默认视图时遇到问题。我有一个利用此几何形状的网格，材质为等角全景图像。在运行时，图像的默认视图位于右侧。我希望初始角度在相机的底部。我尝试更改球面缓冲几何的Phi角和theta角参数。虽然我可以通过更改Phi角度来移动默认的水平角度，但是当我更改theta角度时，全景图像看起来很奇怪。

当phi角度分别为0和100且theta角度为0时，我拍摄了前两个快照。当phi角度为100且theta角度为1时，我拍摄了最后一个快照。

任何帮助将不胜感激。

谢谢

 sphereBufferGeometry = new THREE.SphereGeometry(100,100,100,0,Math.PI*2,0,Math.PI);            sphereBufferGeometry.scale( 1, 1, -1 );  
    var material = new THREE.MeshBasicMaterial( {
                                    map: new THREE.TextureLoader().load([image] )
                                });
    mesh = new THREE.Mesh( sphereBufferGeometry, material );

我也尝试过。

init();
var scene,renderer,camera;

function init() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
  var light = new THREE.PointLight(0xffffff, 0.8);
  
				var light2 = new THREE.DirectionalLight( 0xffddcc, 1 );
				light.position.set( 1, 0.75, 0.5 );
				scene.add( light2 );
  var sphereBufferGeometry = new THREE.SphereGeometry(100, 100, 100, 0, Math.PI * 2, 0, Math.PI);
  sphereBufferGeometry.scale(1, 1, -1);

  var material = new THREE.MeshBasicMaterial({
    map: new THREE.TextureLoader().load('https://threejs.org/examples/textures/2294472375_24a3b8ef46_o.jpg')
  });
  var mesh = new THREE.Mesh(sphereBufferGeometry, material);
  mesh.rotation.x=1.6;
  scene.add(camera);
  scene.add(light);
  scene.add(mesh);

  renderer = new THREE.WebGLRenderer({
    antialias: true,
    preserveDrawingBuffer: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);

  var orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
  camera.position.set(0, 0, 0.001);
  orbitControls.update();

  var container = document.getElementById('container');
  var canvas = renderer.domElement;
  canvas.setAttribute("class", "frame");
  container.appendChild(canvas);
  document.body.appendChild(container);
  animate();
}

function animate()
{
	requestAnimationFrame(animate);
  renderer.render( scene, camera );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<div id="container"></div>

。如您所见，我已经旋转了网格，以便默认视图在地面上看。如果我们单击并向上拖动鼠标，以便视图中的窗口为水平，然后单击并向左或向右拖动，控件似乎无法正常工作，因为它无法提供适当的全景体验。.我想知道如何解决此问题