AR.js（Hiro标记）结合look-controls后模型倾斜，如何保持水平并支持触摸旋转？

你遇到的这个情况其实不是Bug，是look-controls组件的默认行为和AR标记的空间坐标系冲突导致的～

为什么会倾斜？ #

look-controls本来是为相机设计的，默认会同时响应设备姿态（比如手机倾斜）和触摸手势。当你把它直接加在绑定Hiro标记的实体上时，这个实体的姿态会同时受两个因素影响：一是AR标记在现实中建立的水平坐标系，二是手机本身的倾斜角度，两者叠加就导致模型跟着倾斜了。

解决方案：保留触摸旋转+模型水平 #

这里给你两种可行的方案，按需选择：

方案一：调整look-controls参数（快速解决）

只需要给look-controls添加deviceOrientation: false属性，禁用它的设备姿态跟踪功能，这样它就只会响应触摸手势来旋转模型，不会受手机倾斜影响：

<a-scene embedded arjs>
  <a-marker preset="hiro">
    <a-entity look-controls="deviceOrientation: false" position="0 -0.5 0" rotation="0 0 0" scale="1 1 1">
      <a-box position="0 0 0" rotation="0 0 0" color="#4CC3D9" shadow></a-box>
    </a-entity>
  </a-marker>
  <a-entity camera></a-entity>
</a-scene>

方案二：使用专门的手势旋转组件（更推荐）

AR.js生态有专门为模型交互设计的手势组件，比look-controls更适合控制模型旋转，不会和AR标记的坐标系冲突。下面是示例代码：

<a-scene embedded arjs>
  <!-- 引入手势处理组件 -->
  <script src="https://cdn.jsdelivr.net/npm/aframe-gesture-detector@1.1.3/dist/aframe-gesture-detector.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/aframe-gesture-handler@1.2.0/dist/aframe-gesture-handler.min.js"></script>
  
  <a-marker preset="hiro">
    <a-entity position="0 -0.5 0" scale="1 1 1">
      <!-- 给立方体添加旋转手势控制 -->
      <a-box position="0 0 0" rotation="0 0 0" color="#4CC3D9" shadow 
             gesture-handler="rotationEnabled: true; rotationFactor: 5"></a-box>
    </a-entity>
  </a-marker>
  <a-entity camera></a-entity>
</a-scene>

这种方式把旋转逻辑直接绑定在模型上，不仅能保持模型水平，手势控制的精度和体验也会更好。

内容的提问来源于stack exchange，提问作者yestema