three.js странное вращение вокруг X

Question

Так вот полный код в jsFiddle:

http://jsfiddle.net/73v15kb6/1/

Вращающийся о Y и Z, как я бы ожидать, что это будет, то же самое со всеми переходами. Когда я пытаюсь повернуть вокруг оси X, похоже, что THREE.js делает что-то особенное, чтобы сделать его более «крутым», но этого я не хочу достичь.

Чтение подобных тем я уверен, что это что-то делать с моей rotateX функции:

camera.position.y = y * cos - z * sin; 
camera.position.z = y * sin + z * cos; 
camera.lookAt(scene.position); 

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

camera.position.x = -60; 
camera.position.y = 30; 
camera.position.z = 0; 

Кто-нибудь понял, что я делаю неправильно? Большое спасибо!

Answer 1

Я новичок в three.js, (На самом деле, это мой первый раз, работая с ним), так что я не мог объяснить это правильно :(

Частичные three.js сделал, чтобы это выглядело «более прохладный» был метод camera.lookAt.

camera.lookAt(sphere.position); 

Вот пример (модифицированный) http://jsfiddle.net/73v15kb6/3/

попробуйте поиграться с функцией одушевленного для каждой оси и попытаться с опцией LookAt включена. Воспроизведение с ним в течение некоторого времени дадут вам концепцию. :)

function animate() { 
    requestAnimationFrame(animate); 
    rotateX(5); // Try with Y & Z; (also with toggling lookAt()) 
} 

Функция LookAt может сделать функции преобразования, кажется странным, так как даже если камера преобразования, как и ожидалось, область рендеринга все равно будет то же самое.

Answer 2

Спасибо Sen Jacob за то, что он исправил мою скрипку!

Я нашел решение, поэтому, чтобы оно работало так, как я хотел - эта камера всегда смотрит на центральную точку (0,0,0), и все вращения слова происходят вокруг оси, мне приходилось делать Ниже для каждого вращения:

для ROTZ и ROTY

camera.up = new THREE.Vector3(0,1,0); 
camera.lookAt(new THREE.Vector3(0,0,0)); 

для ROTX:

camera.up = new THREE.Vector3(1,0,0); 
camera.lookAt(new THREE.Vector3(0,0,0)); 

Обратите внимание на разницу в векторе вверх между X и Y Z & .