前端 - 请问微信小程序的XR-FRAME组件如何实现VR看房？

Question

想用XR-FRAME来实现一个简单的VR看房功能，然后参照官方文档写了以下代码：

<xr-scene id="xr-scene">
  <xr-asset-load type="texture" asset-id="waifu" src="https://min.net.cn/fang/images/a1.jpg" />
  <xr-env sky-map="waifu" />
  <xr-node>
    <xr-node node-id="camera-target" position="0 0 0"></xr-node>
    <xr-camera id="camera" node-id="camera" position="2 0 0" target="camera-target" background="skybox" camera-orbit-control=""></xr-camera>
  </xr-node>
</xr-scene>

虽然顺利加载出全景图，

但是现在遇到两个问题：

1、手指滑动的时候，全景图的旋转的方向是反的

2、无法用双指缩放滑动来实现对全景图的缩放

因为官方文档写得太烧脑，请大神们指导一下，非常感谢！！

Answer 1

针对你提到的两个问题，我分别给出如下解答：

1. 手指滑动反向旋转的问题：

xr-frame 组件默认的旋转方向是逆时针，如果你的手指滑动时出现了反向旋转的情况，可能是因为你的手指滑动方向与组件默认的旋转方向相反。

你可以尝试在 xr-frame 组件的标签上添加 reverse="true" 属性来反转旋转方向，例如：

<xr-frame src="https://your-vr-url.com" reverse="true"></xr-frame>

在上面的示例中，我们将 reverse 属性设置为 true，表示反转旋转方向。

2. 双指缩放滑动无效的问题：

xr-frame 组件默认不支持双指缩放滑动，如果你想要实现对全景图的缩放，可以使用 pinch 事件来实现。具体来说，你可以在 xr-frame 组件的标签上绑定 bind:pinch 事件，并在事件回调函数中修改组件的缩放比例，例如：

<xr-frame src="https://your-vr-url.com" bind:pinch="onPinch"></xr-frame>

在上面的示例中，我们绑定了一个名为 onPinch 的事件回调函数。

在事件回调函数中，你可以通过 event.detail.scale 属性获取当前的缩放比例，并将其应用到 xr-frame 组件上，例如：

Page({
  onPinch(event) {
    const trtcComponent = this.selectComponent('#trtc-component')
    if (trtcComponent) {
      const scale = event.detail.scale
      trtcComponent.setScale(scale)
    }
  }
})

在上面的示例中，我们在 onPinch 回调函数中获取了当前的缩放比例 scale，并调用了 xr-frame 组件的 setScale 方法来设置缩放比例。