我的光标隐藏在 WebXR 项目中的 3d 模型后面

Posted 2023-03-23

【中文标题】我的光标隐藏在 WebXR 项目中的 3d 模型后面

【英文标题】：My cursor is hidden behind my 3d-model in WebXR project

【发布时间】：2021-12-30 17:12:05

【问题描述】：

我已将项目缩减为仅受我的问题影响的项目。可以在这里找到：

https://glitch.com/edit/#!/lean-luxuriant-vegetable

如果您环顾四周，您会发现光标隐藏在 3d 模型后面。如果我使用游标原语，也会发生这种情况。当我把整个东西放在一起时，光标并没有隐藏在场景中的其他模型后面，它只是一个很薄的。为什么会发生这种情况？

【问题讨论】：

我没有看到您的故障有问题，但不知道如何回答。您将光标放在 0、0、-1，因此距离相机 1m。如果您的模型在相机 1m 范围内，它会遮挡光标。一种选择是使光标更小，更靠近相机（因此它仍然会显示相同的大小）。另一种选择是使模型更大，但距离更远（例如 scale="10 10 10"）。

【参考方案1】：

docs 中的“环”光标：

<a-entity camera look-controls>
  <a-entity cursor="fuse: true; fuseTimeout: 500"
        position="0 0 -1"
        geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
        material="color: black; shader: flat"></a-entity>
</a-entity>

是以下的组合：

视觉元素（环geometry 和material 组件） 光标功能（cursor 组件）

环只是场景中的另一个 3D 实体，它会被靠近相机的任何物体所覆盖：

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
  <a-box position="0 1.5 -1" rotation="0 45 0" color="blue"></a-box>

  <a-entity camera look-controls position="0 1.6 0">
    <a-entity cursor="fuse: true; fuseTimeout: 500" position="0 0 -1" 
              geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
              material="color: black; shader: flat;">
    </a-entity>
  </a-entity>
</a-scene>

您可以使用材质的depthTest 属性告诉材质，您不希望它受到深度缓冲区的影响（简单地说，我们不想检查是否有东西覆盖了我们的材质） .

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
  <a-box position="0 1.5 -1" rotation="0 45 0" 
         animation__mouseenter="property: components.material.material.color; type: color; to: blue; startEvents: mouseenter; dur: 500" 
         animation__mouseleave="property: components.material.material.color; type: color; to: red; startEvents: mouseleave; dur: 500" color="blue"></a-box>

  <a-entity camera look-controls position="0 1.6 0">
    <a-entity cursor="fuse: true; fuseTimeout: 500" position="0 0 -1"
              geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03" 
              material="color: black; shader: flat; depthTest: false">
    </a-entity>
  </a-entity>
 </a-scene>

但是cursor 组件对于注册框来说太远了（因为它实际上在框内），因此您可以将功能与视觉分开，并使光标更靠近：

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
  <a-box position="0 1.5 -1" rotation="0 45 0" 
  animation__mouseenter="property: components.material.material.color; type: color; to: blue; startEvents: mouseenter; dur: 500"
  animation__mouseleave="property: components.material.material.color; type: color; to: red; startEvents: mouseleave; dur: 500"
  color="blue"></a-box>


  <a-entity camera look-controls position="0 1.6 0">
    <a-entity cursor="fuse: true; fuseTimeout: 500" position="0 0 -.001"></a-entity>
    <a-entity position="0 0 -1" geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
              material="color: black; shader: flat; depthTest: false">
    </a-entity>
  </a-entity>
</a-scene>

所以我们既有可见的环，又有功能。

---

那为什么不让一切更接近呢？当东西距离camera 1 毫米时，我在缩放时遇到了一些视觉问题。并不意味着它会打扰你，但如果是这样 - 上面的方法可以解决它。