如何在A帧AR中解决网格视觉问题？ [英] How I Can Solve Mesh Visual Problem in A-Frame AR?

问题描述

我对javascript和a-Frame还是个新手。我正在开始使用它并将我的模型加载到网站

Link to Web-site

Link to Marker for AR

正如您在手机中看到的，网孔的材质错误，并且网孔的某些部分互相凹陷？或者它是如何正确命名的..。它发生在其他软件(Blender，Unity和e.t.c)中，当三角形具有相同的位置和彼此的剪裁槽时。但在搅拌机网格中没有这个麻烦。我可以如何处理此问题#1？

第二个问题2是错误的材料，在导出到GLTF之前，这些材料在搅拌机中看起来不同。

Correct Materials Image

如何更改材质的颜色？如果可以，如何理解我现在重新着色的那部分网格子网格？我使用GLTF原因动画支持。相反，我可以将OBJ与MTL结合使用。但我读到如果我改正它就没有动画...

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

将非常高兴看到您的建议或解决方案！谢谢！

推荐答案

关于网格-视觉问题，我假设您指的是左侧图像(胸部和手)上的这个剪辑：

尽管模型在屏幕上看起来很近很小，但它远离原点和/或重新缩放。Z缓冲区中的深度值在原点附近非常精确，但您将对象移动得越远，情况就越糟糕。您可以通过在呈现器中启用对数深度缓冲区(签出this example)来解决此问题。

您可以通过将模型移开并放大(不使用ar.js)来获得类似的"；裁剪"；效果：

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

---

解决方案：

1. 如上所述-您应该启用呈现器使用对数深度缓冲区：

   // a-frame
   <a-scene renderer="logarithmicDepthBuffer: true" ...
   
   // three.js
   var renderer = new WebGLRenderer({logarithmicDepthBuffer: true})
   // or rendererReference.logarithmicDepthBuffer = true
   

2. 但如果出于任何原因(性能？不知道，需要测试一下。)您需要另一种解决方案-使用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帧AR中解决网格视觉问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！