Question

我在Aframe的WebVR场景中工作，其中有各种微型3D场景（大约8个）围绕观众;你必须旋转才能看到不同的场景。

场景数量超过了360度旋转的范围，因此我通过检查相机的当前旋转来加载/卸载内容。例如，仅当a-camera的y值介于720和840度之间（转换为弧度）时，场景编号7才可见。

这只能起作用，因为当你不处于VR模式时，相机的y值会在两个方向从0变为无穷大。

但是，在非vr模式下，相机旋转的工作方式不同。在VR模式下，相机的y旋转在0和180之间，或0和-180之间。 IE IF逆时针旋转，y值将从180到-180。因此，我以前的系统计算出当前可见的子场景不再有效。

试图找出一种方法，将在Vr模式下从相机返回的旋转值转换为更类似于在非vr模式下工作的方式。

希望这是有道理的。老实说，这有点令人头疼......

这是我的代码（非常需要重构，但我只需要它暂时工作）：

if (cameraRotY >= 0 && cameraRotY <= degreesToRadians(120) && !self.is('stonehenge')) {
        removeAllStates(self);
        document.querySelector('#SceneStonehenge').emit('show');
        self.addState('stonehenge');
    } else if (cameraRotY > degreesToRadians(120) && cameraRotY <= degreesToRadians(240) && !self.is('phoneVines')) {
        removeAllStates(self);
        document.querySelector('#ScenePhoneVines').emit('show');
        self.addState('phoneVines');
    } else if (cameraRotY > degreesToRadians(240) && cameraRotY <= degreesToRadians(360) && !self.is('skyFish')) {
        removeAllStates(self);
        document.querySelector('#SceneSkyfish').emit('show');
        self.addState('skyFish');
    } else if (cameraRotY > degreesToRadians(360) && cameraRotY <= degreesToRadians(480) && !self.is('rocksPlanets')) {
        removeAllStates(self);
        document.querySelector('#SceneRocksPlanets').emit('show');
        document.querySelector('#SceneRocksPlanetsContents').emit('show');
        self.addState('rocksPlanets');
    } else if (cameraRotY > degreesToRadians(480) && cameraRotY <= degreesToRadians(600) && !self.is('floatingIslands')) {
        removeAllStates(self);
        document.querySelector('#SceneFloatingIslands').emit('show');
        self.addState('floatingIslands');
    } else if (cameraRotY > degreesToRadians(600) && cameraRotY <= degreesToRadians(720) && !self.is('skywhale')) {
        removeAllStates(self);
        document.querySelector('#SceneSkywhale').emit('show');
        self.addState('skywhale');
    } else if (cameraRotY > degreesToRadians(720) && cameraRotY <= degreesToRadians(840) && !self.is('crack')) {
        removeAllStates(self);
        document.querySelector('#SceneCrack').emit('show');
        self.addState('crack');
    } else if (cameraRotY > degreesToRadians(840) && cameraRotY <= degreesToRadians(960) && !self.is('blackhole')) {
        removeAllStates(self);
        document.querySelector('#SceneBlackhole').emit('show');
        self.addState('blackhole');
    }

Answer 1

您可以调整外观控件，也可以在单独的变量中跟踪相机旋转的度数。这是组件形式的基本代码。没有经过测试，但基本的想法是：

AFRAME.registerComponent('total-rotation', {
  dependencies: ['rotation'],

  schema: {
    degrees: {default: 0, type: 'number'}
  },

  init: function () {
    this.previousRotation = this.el.getAttribute('rotation');
  },

  tick: function () {
    var currentRotation = this.el.getAttribute('rotation');
    var totalRotation = this.data.totalRotation;
    totalRotation += currentRotation.y - this.previousRotation.y;
    this.el.setAttribute('total-rotation', 'degrees', totalRotation);
    this.previousRotation = currentRotation;
  }
});

然后连接相机：

<a-camera total-rotation></a-camera>

然后您可以根据需要检查总旋转：

document.querySelector('[camera]').getAttribute('total-rotation').degrees;

在aframe

1 个答案: