2015-02-17 6 views
0

Я некоторое время боролся с концепциями кватернионов, и я думаю, что это может иметь какое-то отношение к этой конкретной проблеме.Вращение экструзии Three.js в радианах с камеры

Если вы знаете three.js, вы можете быть знакомы с примером видеоизображения с равноправной панорамой. То, что я пытался сделать, - просто извлечь вращение камеры в любой момент в формате, который я понимаю (радианы, градусы ...) для каждой оси. Теоретически, не следует ли мне просто использовать параметры rotation.x/y/z камеры, чтобы найти их? Тем не менее, я получаю странные ценности.

Заканчивать этот пример: http://www.spotted-triforce.com/other_files/three/test.html

Я вывода значения вращения хуг камеры в верхнем левом углу, и вместо ожидаемых значений, число отказов вокруг между положительными и отрицательными значениями.

Теперь этот пример не использует один из доступных сценариев управления. Скорее, он создает вектор для вычисления цели камеры для просмотра. Вот то, что код камеры выглядит следующим образом:

function init() { 
    camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 1100); 
    camera.target = new THREE.Vector3(0, 0, 0); 
} 

function onDocumentMouseDown(event) { 

    event.preventDefault(); 
    isUserInteracting = true; 

    onPointerDownPointerX = event.clientX; 
    onPointerDownPointerY = event.clientY; 

    onPointerDownLon = lon; 
    onPointerDownLat = lat; 

} 

function onDocumentMouseMove(event) { 

    if (isUserInteracting === true) { 

    lon = (onPointerDownPointerX - event.clientX) * 0.1 + onPointerDownLon; 
    lat = (event.clientY - onPointerDownPointerY) * 0.1 + onPointerDownLat; 

    } 
} 

function onDocumentMouseUp(event) { 
    isUserInteracting = false; 
} 

function update() { 

    lat = Math.max(- 85, Math.min(85, lat)); 
    phi = THREE.Math.degToRad(90 - lat); 
    theta = THREE.Math.degToRad(lon); 

    camera.target.x = 500 * Math.sin(phi) * Math.cos(theta); 
    camera.target.y = 500 * Math.cos(phi); 
    camera.target.z = 500 * Math.sin(phi) * Math.sin(theta); 

    camera.lookAt(camera.target); 

} 

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

ответ

2

Если вы установили

camera.rotation.order = "YXZ" 

(по умолчанию «XYZ») углы Эйлера будет сделать гораздо больше смысла для вас:

rotation.y будет камера движется в радианах

rotation.x будет шагом камеры в радианах

rotation.z будет рулон камеры в радианах

Ротации будут применены в этом порядке.

Three.js R.70

+0

спасибо, я думаю, я понимаю contept за эйлером заказов, но при попытке применить их в реальной жизни, мой мозг перегревается .... – Marcel

+0

Я тебя слышу. Лучший способ понять, как углы Эйлера работают в three.js, - это построить тестовый стенд, как вы это делали, и экспериментировать. – WestLangley

Смежные вопросы