如何解決 A-Frame AR 中的網格視覺問題？

Question

我是 javascript 和 a-frame 的新手。 我開始使用它並在網站上加載我的 model

鏈接到網站

鏈接到 AR 標記

正如您在您的手機網格中看到的材料錯誤，並且網格的某些部分是 go 相互槽？ 或者它是如何正確命名的......當三角形具有相同的 position 並相互夾住時，它會發生在其他軟件（Blender、Unity 等）中。 但是在 Blender Mesh 中沒有這個麻煩......我能用這個問題 #1 做什么？

第二個問題 #2 是錯誤的材料，在導出到 GLTF 之前在 Blender 中看起來不同。

正確的材料圖像

我如何改變材料的顏色，如果可以的話 - 如何理解我現在重新着色的網格子網格的那部分？ 我使用 GLTF 是因為 animation 支持。 相反，我可以將 OBJ 與 MTL 一起使用。 但我讀到它沒有 animation 如果我糾正...

我是新手，嘗試使用簡單的解決方案，因為這不是我的工作領域——我經常使用 Unity，但在這里我害怕代碼:)

很高興看到您的建議或解決方案！ 謝謝！

Answer 1

通過網格視覺問題，我假設您的意思是左側圖像（胸部和手部）上的剪輯：

盡管 model 在屏幕上看起來很近而且很小，但它遠離原點和/或重新縮放。 z 緩沖區中的深度值在原點附近是精確的，但是您將 object 移動得越遠，它變得越差。 您可以通過在渲染器中啟用對數深度緩沖區（查看此示例）來解決它。

您可以通過將 model 移開並放大它（不使用 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()