Angular中使用Aframe如何设置相机旋转实现初始180度视角

直接给<a-camera>标签加初始rotation属性即可实现默认朝向180度方向，A-Frame的旋转参数规则是x(上下俯仰) y(水平旋转) z(左右翻滚)，水平转180度只需要把Y轴值设为180就行。
另外你原有代码里有个笔误：几何体类型写的shpere是错的，正确拼写是sphere，不改正的话自定义光标渲染不出来。

修改完成的代码 #

<a-camera reverse-mouse-drag="true" rotation-reader wasd-controls-enabled="false" rotation="0 180 0">
  <a-entity 
    cursor 
    position="0 0 -1" 
    geometry="primitive: sphere; radius: 0.005" 
    material="color:#000000; shader: flat; opacity: 0.6"
  >
  </a-entity>
</a-camera>

特殊情况处理 #

如果你用了第三方全景视频组件，部分组件会在视频开始播放时强制把相机旋转重置为0 0 0，覆盖你写的初始属性，这种情况直接在Angular里监听视频的play事件，触发时手动给相机赋值旋转参数就行：

// 视频播放回调函数中执行
const camera = document.querySelector('a-camera') as any;
camera.setAttribute('rotation', { x: 0, y: 180, z: 0 });

• 不要搞混三个旋转参数的顺序，写错顺序会出现视角歪、俯仰角度不对的问题
• 如果需要视角平滑转到180度而不是硬切，可以用A-Frame的动画组件给相机加旋转过渡

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