为特定元素设置透明

编程问答 2022-06-06

问题描述

我想为特定元素设置透明，我遵循以下代码：


        var instanceTree = this.viewer.model.getInstanceTree();
        var fragList = this.viewer.model.getFragmentList();
        this.listElement.forEach(element => {
            instanceTree.enumNodeFragments(element,(fragId) => {
                console.log(element.material)
                var material = fragList.getMaterial(fragId)
                if (material) {
                    material.opacity = value;
                    material.transparent = true;
                    material.needsUpdate = true;
                }
            });
        });
        this.viewer.impl.invalidate(true,true,true);

但是对于所有元素而言，它具有该材料。如何设置所选元素？ 感谢任何评论。

更新1： 我发现绕行方式是克隆主要材料，而不是使用其他名称注册它：

                    var newMaterial = material.clone();
                    const materials = this.viewer.impl.matman();
                    materials.addMaterial('mymaterial',newMaterial,true);
                    fragList.setMaterial(fragId,newMaterial);
                    newMaterial.opacity = value;
                    newMaterial.transparent = true;
                    newMaterial.needsUpdate = true;

但是效果不是我想要的，它具有不同的颜色，当设置为透明时，我只能看到它后面的几个对象

enter image description here

enter image description here

enter image description here

解决方法

您可以创建自己的自定义THREE.js材料，并使用fragList.setMaterial(fragId,material)将其分配给片段。

有关使用自定义材质或着色器的更多信息，请参见https://forge.autodesk.com/blog/custom-shader-materials-forge-viewer。

编辑：

关于视觉异常（例如，当您仅看到半透明物体后面的某些对象时），这是一个已知问题，不幸的是没有明确的解决方案。当Forge Model Derivative服务创建要在Forge Viewer中查看的SVF文件时，各个场景元素将存储在为快速遍历而优化的数据结构中，具体取决于它们是半透明还是完全不透明的。该数据结构是固定的，因此，不幸的是，当您使用一个本来是完全不透明的对象并将其设置为半透明时，很可能会以错误的顺序呈现它。

autodesk-forgeautodesk-viewer