Как установить вертикальный угол сферической буффергеометрии? Почему элементы управления орбитой не работают должным образом, когда сетка вращается? - PullRequest
Новая
       29

Как установить вертикальный угол сферической буффергеометрии? Почему элементы управления орбитой не работают должным образом, когда сетка вращается?

0 голосов
/ 14 июня 2019

У меня возникают проблемы при попытке установить вид по умолчанию для панорамного изображения внутри сферобуферометрии. У меня есть сетка, которая использует эту геометрию, и материал представляет собой панорамное изображение в виде прямоугольника. Во время выполнения изображение по умолчанию находится где-то справа. Я хочу, чтобы начальный угол был внизу камеры. Я попытался изменить параметры угла Phi и тета-угла для сферической буфереометрии. Хотя я могу изменить горизонтальный угол по умолчанию, изменяя угол Phi, панорамное изображение выглядит странно, когда я изменяю угол тета.

Я сделал первые два снимка, когда угол наклона 0 и 100 соответственно и тета-угол был равен 0. Я сделал последний снимок, когда угол наклона равный 100 и тета-угол равен 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 );

Phi angle Phi angle=120

Theta angle=1

Я тоже это пробовал. 

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>

. Как вы можете видеть, я повернул сетку так, чтобы вид по умолчанию смотрел на пол ... если мы щелкаем и перетаскиваем мышь вверх, чтобы окно в представлении было горизонтальным, а затем щелкаем и перетаскиваем влево или вправо по орбите кажется, что элементы управления не работают должным образом в том смысле, что они не дают надлежащего панорамного впечатления .. Я хотел бы знать, как это можно исправить

...