首页 文章

调整aframe中非vr和vr模式之间相机旋转值的差异

提问于
浏览 次
0

我正在研究Aframe中的WebVR场景，其中有各种微型3D场景（大约8个）围绕 Spectator ;你必须旋转才能看到不同的场景 .

场景的数量超过了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');
    }
javascript three.js aframe webvr

1 回答

  • 0

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

    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;
    回复于

相关问题