时间戳

首页 > 解决方案 > Autodesk Forge：覆盖场景中的透明对象变得不透明

autodesk-forge - Autodesk Forge：覆盖场景中的透明对象变得不透明

问题描述

我有一个带有一些半透明自定义几何图形的 Forge 场景。升级到 Forge 查看器的 7.21.0 版后，我们必须将自定义几何体移动到覆盖场景中，如Forge 指南中所述。导航时生成的几何图形是半透明的，但在停止大约半秒后变成不透明的。

此代码可用于在http://lmv.ninja.autodesk.com上进行测试。在这个例子中，你可以透过绿色球体看到蓝色球体，但是一旦你将鼠标悬停在飞机上（我测试了玩具飞机模型），你就看不到了。

const geometry = new THREE.SphereGeometry(20,32,32)
const material = new THREE.MeshBasicMaterial({
        color: '#00ff00',
        transparent: true,
        opacity: 0.5,
    })
const sphere1 = new THREE.Mesh(geometry, material)
sphere1.position.y = 90
NOP_VIEWER.overlays.addScene('custom-scene')
NOP_VIEWER.overlays.addMesh(sphere1, 'custom-scene')

const material2 = new THREE.MeshBasicMaterial({color: '#0000ff'})
const sphere2 = new THREE.Mesh(geometry.clone(), material2)
sphere2.position.y = 60

NOP_VIEWER.overlays.addMesh(sphere2, 'custom-scene')

如何使几何体保持透明？

我已经尝试过设置useIdBufferSelection: true，如此处所建议的。

在材质中设置depthTest: false或depthWrite: false修复了透明度问题，但（不出所料）破坏了渲染顺序，因此靠近的物体可能会出现在远处的物体后面。

标签： autodesk-forgeautodesk-viewer

解决方案

背景资料：
问题是 THREE.js 不能很好地处理重叠透明度。ForgeViewer 有一个特殊的多通道渲染器，它首先渲染漫反射对象，然后混合重叠的透明对象。它不如 OIT 准确，但已经足够好了。

不幸的是，viewer.impl。场景和暗示。sceneAfter和overlay都使用标准的 THREE.js 遍历器，它不处理重叠的透明对象......但是！……

您可以尝试以下解决方法：

  1. 使用 LMV.SceneBuilder 绘制您的网格（将 three.js 网格对象提升为 LMV 几何缓冲区对象）（https://forge.autodesk.com/blog/custom-models-forge-viewer）
  2. 强制对您的three.js 透明材质进行“双面”渲染。仍然不完美，但值得一试

推荐阅读