如何解决 A-Frame AR 中的网格视觉问题？

Question

我是 javascript 和 a-frame 的新手。我开始使用它并在网站上加载我的模型

如您所见，您的 phone 网格有错误的 materials 并且网格的某些部分相互贯穿？或者它是如何正确命名的……它发生在其他软件（Blender、Unity 和 e.t.c）中，当三角形具有相同的位置并相互夹住时。但是在 Blender Mesh 中没有这个问题...我该怎么办这个问题#1？

第二个问题 #2 是错误的 materials，在导出到 GLTF 之前在 Blender 中看起来不同。

Correct Materials Image

如何更改 material 的颜色，如果可以的话 - 如何理解我现在重新着色的那部分 mesh-submesh？我使用 GLTF 动画支持的原因。相反，我可以将 OBJ 与 MTL 一起使用。但是我读到如果我更正它没有动画...

我是新手，尝试使用简单的解决方案，因为它不是我的工作领域 - 我经常使用 Unity，但在这里我害怕代码:)

很高兴看到您的建议或解决方案！谢谢！

Answer 1

通过网格视觉问题，我假设你的意思是左图（胸部和手）上的剪裁：

尽管模型在屏幕上看起来很近而且很小，但它离重新缩放的原点 and/or 很远。 z 缓冲区中的深度值在原点附近非常精确，但对象移动得越远，情况就越糟。您可以通过在渲染器中启用对数深度缓冲区（查看 this example）来解决它。

您可以通过将模型移开并放大（不使用 ar.js）来实现类似的“裁剪”效果：

<a-entity id="model" position="-1 0.5 -100" scale="40 40 40" gltf-model="#robot"

解决方案：

如上所述 - 您应该启用渲染器使用对数深度缓冲区：

// a-frame
<a-scene renderer="logarithmicDepthBuffer: true" ...

// three.js
var renderer = new WebGLRenderer({logarithmicDepthBuffer: true})
// or rendererReference.logarithmicDepthBuffer = true

但如果出于任何原因（性能？不知道，需要测试一下。）您需要另一种解决方案 - 使用 THREE.PerspectiveCamera() 而不是默认的也可以解决裁剪问题:
```
// ar.js needs to be up and running - wait until scene.systems["arjs"]._arSession is not null
scene.camera = new THREE.PerspectiveCamera()
```

如何解决 A-Frame AR 中的网格视觉问题？

How I Can Solve Mesh Visual Problem in A-Frame AR?

javascript

augmented-reality

aframe

解决方案：