Плавное вращение камеры (look-control) в A-Frame

1

Работа над бета-версией моего веб-сайта

Я использую A-Frame для 360 частей приложения. Это фрагмент моего кода для камеры

<a-camera mouse-cursor reverse-mouse-drag="true" id="cam" zoom="1.3"></a-camera>

Я могу перетащить мышь и осмотреться. Нет проблем; работает отлично! Но я хочу добиться плавного движения, когда камера вращается (например, в Google Street View).

Я искал совсем немного и не нашел многого. Я использовал Unity3D перед переходом на WebVR. Итак, у меня есть концепция отсечения движения камеры, но я не знаю, с чего начать в A-Frame.

пожалуйста помоги?

Заранее спасибо!

Теги:
aframe
webvr

1 ответ

3

Если вы хотите, чтобы камера вращалась некоторое время после того, как вы повернули ее, выполните:
1. Имейте в виду, что Aframe должен быть для VR, перемещая камеру больше, чем пользователь хочет, чтобы она могла вызвать серьезные головные боли.

2. Я не видел никаких готовых компонентов, только обсуждение, поэтому, если вы все еще хотите это сделать, у меня есть пара идей:
a) дешевая версия, где вы переносите свою камеру в <e-entity> и создаете в ней <a-animation>. Дайте ему продолжительность 2000, событие начала и некоторое приятное ослабление. Проверьте документацию. Затем создайте компонент, который будет проверять вращение вашей камеры следующим образом:

AFRAME.registerComponent('camera-check', {
  init: function () {
     var rotation, newRotation;
     camera = document.querySelector('a-camera');
     camera.addEventListener('componentchanged', function(evt) {
         if (evt.detail.name === 'rotation') {
         // here You have your new rotation reference in evt.detail.newData
         // and Your old rotation reference in evt.detail.oldData
         rotation = newData-oldData;
         if(rotation>0){
          newRotation = newData;
          newRotation.y +=15;
         }else{
          newRotation = newData;
          newRotation.y -=15;
         }
     });
  }
});

Затем слушайте событие mouseup. Когда его выпустили, установите to атрибута компонента анимации к newRotation и испускает событие запуска анимации.

Надеюсь, у вас есть идея. Получите скорость вращения. На подсказке найдите, как вы вращаетесь и двигаетесь немного больше. Ослабление должно сделать его гладким.

Дополнительный объект создан, потому что при анимации камеры вы можете запустить событие изменения компонента. Вы также можете выполнить проверку флажка, которая отключит событие с заменой компонента при анимации. Это потребует от вас тайм-аута в течение 2 секунд или проверки слушателя, если анимация закончится. (второй вариант лучше, поскольку вы получаете точный момент окончания анимации).

Кроме того, если вы хотите, чтобы это было лучше, вам также нужно было получить фактическую скорость вращения:
1. Проверяя у слушателя, сколько компонент повернулся, а затем установите newRotation.y дальше или ближе.
2. Получите фактическую скорость вращения, проверив вращение на галочке(), затем получив дельта-скорость вращения и фактически подсчитав, насколько далеко вы должны двигаться. Но не нужно быть настолько конкретным, если вы не делаете научный проект.

  • 0
    Спасибо чувак! Да, имеет смысл. Начал работать над этим. Позвольте держать вас в курсе прогресса.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню