javascript - 如何设置spherebuffergeometry的垂直角度？为什么旋转网格时轨道控制无法正常工作？

Question

我在尝试在 spherebuffergeometry 中设置全景图像的默认视图时遇到问题。我有一个使用这种几何形状的网格，材质是一个等距矩形全景图像。在运行时，图像的默认视图位于右侧某处。我希望初始角度位于相机的底部。我尝试更改 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>

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

标签： javascriptthree.jspanoramas