Автоповорот глобуса WebGL
Я работаю над этим замечательным экспериментом, WebGL Globe, и он действительно потрясающий.
Я изменил некоторые функции для воспроизведения и адаптировал их под свои нужды. Один из них - отрисовка функции.
ОРИГИНАЛ:
function render() {
zoom(curZoomSpeed);
rotation.x += (target.x - rotation.x) * 0.1;
rotation.y += (target.y - rotation.y) * 0.1;
distance += (distanceTarget - distance) * 0.3;
camera.position.x = distance * Math.sin(rotation.x) * Math.cos(rotation.y);
camera.position.y = distance * Math.sin(rotation.y);
camera.position.z = distance * Math.cos(rotation.x) * Math.cos(rotation.y);
camera.lookAt(mesh.position);
renderer.render(scene, camera);
}
ИЗМЕНЕНО:
function render() {
var timer = Date.now() * 0.0001;
zoom(curZoomSpeed);
rotation.x += (target.x - rotation.x) * 0.1;
rotation.y += (target.y - rotation.y) * 0.1;
distance += (distanceTarget - distance) * 0.3;
camera.position.x = (Math.cos( timer ) * 960);
camera.position.y = distance * Math.sin(rotation.y);
camera.position.z = (Math.sin( timer ) * 960) ;
camera.lookAt( scene.position );
renderer.render(scene, camera);
}
Теперь мой глобус идеально автоматически вращается, но я не могу перетащить глобус и повернуть его с помощью мыши по осям X и Z, только по Y. Как я могу использовать эту функцию автоповорота и не терять управление вращением с помощью мыши в ОСИ X и Z?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Как правило, вы можете применять столько преобразований друг за другом, сколько хотите. Это просто матрицы в глубине, которые умножаются в некотором порядке.
Однако конкретно для вашего случая: семантика установки camera.position.x/y/z и последующего наличия camera.lookAt() означает, что этот код не вращает земной шар, он вращается вокруг камеры вокруг места, где находится земной шар. Это хорошо, потому что, вероятно, есть отдельное место, где вы действительно можете вращать земной шар, это можно назвать «преобразованием модели» или чем-то подобным.
Если сам подход подходит для используемой платформы / движка, я предлагаю выполнить синхронизированное вращение на самой модели, а вращение камеры по орбите может выполняться с помощью мыши с использованием исходного фрагмента кода (тем более, что вещь distance явно связана с камера).
Что вы можете сделать, так это ввести код для поворота земного шара вручную, а затем добавить свои дополнения с некоторыми изменениями.
function render() {
var timer = Date.now() * 0.0004;
zoom(curZoomSpeed);
rotation.x += (target.x - rotation.x) * 0.1;
rotation.y += (target.y - rotation.y) * 0.1;
distance += (distanceTarget - distance) * 0.3;
camera.position.x = distance * Math.sin(rotation.x) * Math.cos(rotation.y);
camera.position.y = distance * Math.sin(rotation.y);
camera.position.z = distance * Math.cos(rotation.x) * Math.cos(rotation.y);
camera.position.x = camera.position.x + (Math.cos( timer ) * 500);
camera.position.y = distance * Math.sin(rotation.y);
camera.position.z = camera.position.z + (Math.sin( timer ) * 500) ;
camera.lookAt( scene.position );
renderer.render(scene, camera);
}