0

我想创建一个指南针 UI 元素来向用户显示他们在视频球中的位置。

为了实现这一点，我需要获取 a-videosphere 的 Y 旋转。我创建了一个组件来读取我的视频球体的 Y 旋转并（暂时）更新控制台。

这是我的页面：

    <!DOCTYPE html>
    <html>
      <body>
        <script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>            
        <script src="play-on-window-click.js"></script>
        <script src="rotation-reader.js"></script>
        <a-scene vr-mode-ui="enabled: false" loading-screen="enabled: false">

          <a-videosphere rotation="0 180 0" src="#video" 
                 play-on-window-click
                 rotation-reader>
          </a-videosphere> 

          <a-assets>
            <video id="video" style="display:none" 
           autoplay loop crossorigin="anonymous" playsinline webkit-playsinline>
    <source type="video/mp4"             src="https://ucarecdn.com/fadab25d-0b3a-45f7-8ef5-85318e92a261/" /></video>
          </a-assets>
        </a-scene>
        <!-- Show the rotation -->
        <div id="rotationDisplay" style="position:absolute;top:10px;right:10px;color:white;border: 1px solid; padding:5px">-Dummy Text-</div>
      </body>
    </html>

下面是我的组件“rotation-reader.js-”。我已将其附加到 

    AFRAME.registerComponent('rotation-reader', {
        tick: (function () {
            var rotation = this.el.components.rotation.data.y;
            console.log(rotation);
            })
    });

当我在视频中四处走动时，我希望我会打印出 Videosphere 的 Y 旋转，而不是得到“160”的初始 Y 旋转位置。这个值似乎没有更新:(

这是所有内容的演示：https ://glitch.com/~veil-ant

4

1 回答 1

0

我认为这里有一点误解。您正在旋转相机，而不是视频球。

videospheres 旋转是恒定的，并设置为180：

<a-videosphere rotation="0 180 0" src="#video"

您应该检查相机的旋转，例如：

<a-camera rotation-reader>

在这个小提琴中检查一下。

于 2019-06-12T08:34:41.590 回答