如何在伪造查看器中将自定义材质添加到片段

Posted 2023-03-16

【中文标题】如何在伪造查看器中将自定义材质添加到片段

【英文标题】：how to add custom material to a fragment in forge viewer

【发布时间】：2022-01-06 04:38:48

【问题描述】：

我有一个这样的方法的扩展，当我调用这个方法改变材质（颜色为红色）时，对象变得透明，控制台中出现以下错误

WebGLRenderer.js:5561 WebGL: INVALID_VALUE: uniform3fv: no array

[.WebGL-0000737C06582900] GL_INVALID_OPERATION: Active draw buffers with missing fragment shader outputs.

setColorToItem = (id) =>  
        const material = this.createMaterial('#ff0000'); 
        const model = this.viewer.model; 
        const frags = model.getFragmentList(); 
        model.unconsolidate(); 
 
        this.tree.enumNodeFragments( 
            id, 
            (fragId) =>  
                frags.setMaterial(fragId, material); 
                this.viewer.impl.getFragmentProxy(model, fragId).updateAnimTransform(); 
            , 
            true, 
        ); 
        this.viewer.impl.invalidate(true); 
    ; 
 
    createMaterial = (color) =>  
        const threeColor = new THREE.Color(color); 
        const material = new THREE.MeshPhongMaterial( 
            side: THREE.DoubleSide, 
            flatShading: true, 
            color: threeColor, 
        ); 
 
        const materials = this.viewer.impl.matman(); 
 
        materials.addMaterial('CustomMaterial' + color.toString(), material, true); 
 
        return material; 
    ;

可能是什么问题？ 我尝试使用不同的材料（MeshBasicMaterial、MeshLambertMaterial） 版本伪造查看器 7 版本threejs 0.71 如此处所示https://forge.autodesk.com/en/docs/viewer/v7/developers_guide/viewer_basics / 也试过最新的

【参考方案1】：

我使用查看器版本 7.* 对您的代码 sn-p（如下所示）进行了稍微修改的版本进行了尝试，并且可以成功地将颜色设置为材料。您的应用程序中是否有任何其他自定义 javascript 逻辑可能会干扰新材料？从错误日志看来，着色器在从 THREE.Color 对象获取 3 个浮点值（红色、绿色、蓝色）时遇到问题。

function createMaterial(viewer, color) 
    const material = new THREE.MeshPhongMaterial(
        side: THREE.DoubleSide,
        flatShading: true,
        color: new THREE.Color(color),
    );
    const materials = viewer.impl.matman();
    materials.addMaterial('CustomMaterialRed', material, true);
    return material;


function applyMaterial(model, dbid, material) 
    const tree = model.getInstanceTree();
    const frags = model.getFragmentList();
    tree.enumNodeFragments(
        dbid,
        (fragid) => frags.setMaterial(fragid, material),
        true
    );
    model.unconsolidate();


// ...

let mat = createMaterial(viewer, '#ff0000');
applyMaterial(viewer.model, 1234, mat);

【讨论】：

感谢您的回答！你是对的，我试图运行你在控制台中发送的代码，对象变成了红色。也许这是我连接扩展的方式，或者在某处丢失了上下文