-Viewer automatisch Material ändern

Question

ich mit Änderungen von Material einiger Elemente habe ein Problem auf dem Standard

wenn Geometrie geladen wird:

_this.viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT,() => { 
    changeModelMaterial() 
}); 

... 

const changeModelMaterial =() => { 
    const grey = new THREE.Color(0.5, 0.5, 0.5); 
    let dbIds = getDbIds() 
    changeAllElementsMaterial(grey) 
    setMaterialOfDbIds(dbIds) 
} 

Code, Material ändern I`m mit:

const changeAllElementsMaterial = (color) => { 
    const fragmentList = _this.viewer.model.getFragmentList(); 
    for (let materialId of fragmentList.materialids) { 
     if (fragmentList.materialmap[materialId]) { 
      fragmentList.materialmap[materialId].map = null 
      fragmentList.materialmap[materialId].color = color 
      fragmentList.materialmap[materialId].needsUpdate = true; 
     } 
    } 
    _this.viewer.impl.invalidate(true); 
} 

const setMaterialOfDbIds = (dbIds) => { 
    var color_diffuse = 0xAB00EE; 
    var color_specular = 0xEEABEE; 
    var colorM = new THREE.MeshPhongMaterial({ 
     color: color_diffuse, 
     specular: color_specular 
    }); 
    _this.viewer.impl.matman().addMaterial(
     'ADN-Material-' + 
     "common color material", // or a GUID 
     colorM, 
     true); 

    for (let dbId of dbIds) { 
     _this.viewer.model.getData().instanceTree.enumNodeFragments(dbId, function (fragId) { 
      _this.viewer.model.getFragmentList().setMaterial(fragId, colorM); 

     }); 
    } 
    _this.viewer.impl.invalidate(true); 
} 

Es funktioniert, weil ich sehe, dass Materialien des Modells geändert werden, aber das Problem ist, dass Materialien nach ~ 1-2 Sek. Auf den Standard zurück.

Danach kann ich Material nicht ändern, auch wenn Sie diesen Code manuell ausführen.

Frage ist, warum Viewer Materialwechsel nach diesen 2 Sekunden blockiert, wie es

zu verhindern Und vielleicht können Sie mir sagen, was ich mit wesentlichen Veränderungen besser machen kann, zum Beispiel. vielleicht etwas besser, dass mein Code nach GEOMETRY_LOAD läuft. Am besten wäre Wechselmaterial sein, bevor zunächst

Modell machen ........

Hinweis:

wenn Änderungsereignis von GEOMETRY_LOADED_EVENT OBJECT_TREE_CREATED_EVENT „manchmal“, aber nur manchmal funktioniert es gut (Materialien bleiben bis zum Ende der Arbeit mit Modell), aber vor allem, wenn ich meine Methode nach OBJECT_TREE_CREATED funktioniert nicht funktioniert (auch nicht durch manuelle Ausführung, Materialien sind in irgendeiner Weise gesperrt). Also vermute ich, dass Problem zwischen der Zeit von GEOMETRY_LOAD und OBJECT_TREE_CREATED ist

Ich werde für jede Hilfe

dankbar ======================= ======= vollständige Code ==============================

index.html

<div id="main"> 
    <div id="MyViewerDiv"></div> 
    <button id="open-nav-button" onClick="showDocInfo()">test</button> 
</div> 
<script src="https://developer.api.autodesk.com/derivativeservice/v2/viewers/three.min.js"></script> 
<script src="https://developer.api.autodesk.com/derivativeservice/v2/viewers/viewer3D.min.js"></script> 

<script type="text/javascript" src="lib/jquery.min.js"></script> 

<script src="js/autodesk-viewer.js"></script> 
<script src="js/extension/test-extension.js"></script> 

<script> 
    const autodeskViewer = new AutodeskViewer() 
    const showDocInfo =() => { 
     autodeskViewer.showDocInfo() 
    } 
</script> 

autodesk-viewer.js

var AutodeskViewer = (function() { 
function AutodeskViewer() { 
    var _this = this; 
    this.urn = 'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6Zm9yZ2UtamF2YS1zYW1wbGUtYXBwLTFzcGduazdqcWpxdjhmYXV0YmNzd2R0cGdvN3VtNWY1L1BPQy1Gb3JnZS1JVCUyMDIwMTclMjBSdWNoXzEwMDUxNy5ud2Q'; 

    this.initializeViewer = function (containerId, documentId) { 
     _this.viewerApp = new Autodesk.Viewing.ViewingApplication(containerId); 
     var config = { 
      extensions: ['TestExtension'] 
     }; 
     _this.viewerApp.registerViewer(_this.viewerApp.k3D, Autodesk.Viewing.Private.GuiViewer3D, config); 
     _this.viewerApp.loadDocument(documentId, _this.onDocumentLoadSuccess, _this.onDocumentLoadFailure); 
    } 

    this.onDocumentLoadSuccess = function (doc) { 
     const viewables = _this.viewerApp.bubble.search(av.BubbleNode.MODEL_NODE); 
     if (viewables.length === 0) { 
      return; 
     } 
     _this.viewerApp.selectItem(viewables[0].data, _this.onItemLoadSuccess, _this.onItemLoadFail); 
     _this.viewer3d = _this.viewerApp.getCurrentViewer(); 
    } 

    this.onDocumentLoadFailure = (viewerErrorCode) => {} 

    this.onItemLoadSuccess = (viewer) => { 
     _this.viewer = viewer 
    } 

    this.onItemLoadFail = (errorCode) => {} 

    this.initialize =() => { 
     var options = { 
      env: 'AutodeskProduction', 
      getAccessToken: _this.getToken, 
      refreshToken: _this.getToken 
     }; 
     Autodesk.Viewing.Initializer(options, _this.initCallback); 
    }; 

    this.initCallback = function() { 
     _this.initializeViewer('MyViewerDiv', _this.urn, '3d'); 
    }; 
    this.getToken = function (onGetAccessToken) { 
     $.get("forge/oauth/token") 
      .done(function (data) { 
       token = data 
       onGetAccessToken(token, 60 * 60); 
      }) 
      .fail(function (error) { 
       console.log('ERROR', error); 
      }); 
    }; 

    this.showDocInfo = function() {}; 
    this.initialize(); 
} 

return AutodeskViewer; 
}()); 

Test-extension.js

var _self; 
var _viewer; 
var _tempValue = 0; 

function TestExtension(viewer, options) { 
    Autodesk.Viewing.Extension.call(this, viewer, options); 
    _self = this; 
    _viewer = viewer; 
} 

const changeModelMaterial =() => { 
    // _tempValue++; 
    // if (_tempValue == 2) { 
    const elements = [4340, 4342, 4344, 4346, 4348, 4367, 4371, 4375, 4380, 4452, 4468, 4488, 4503, 4517, 4520, 4522, 4524, 4526, 4528, 4530] 

    changeAllElementsMaterial(new THREE.Color(0.5, 0.5, 0.5)) 
    setMaterialOfDbIds(elements) 
    _tempValue = 0 
    // } 
} 

const changeAllElementsMaterial = (color) => { 
    var fragmentList = _viewer.model.getFragmentList(); 
    for (let materialId of fragmentList.materialids) { 
     if (fragmentList.materialmap[materialId]) { 
      fragmentList.materialmap[materialId].map = null 
      fragmentList.materialmap[materialId].color = color 
      fragmentList.materialmap[materialId].needsUpdate = true; 
     } 
    } 
    _viewer.impl.invalidate(true); 
} 

const setMaterialOfDbIds = (dbIds) => { 
    var colorM = new THREE.MeshPhongMaterial({ 
     color: new THREE.Color(0xAB00EE) 
    }); 

    for (let dbId of dbIds) { 
     _viewer.model.getData().instanceTree.enumNodeFragments(dbId, function (fragId) { 
      _viewer.model.getFragmentList().setMaterial(fragId, colorM); 

     }); 
    } 
    _viewer.impl.invalidate(true); 
} 

TestExtension.prototype = Object.create(Autodesk.Viewing.Extension.prototype); 
TestExtension.prototype.constructor = TestExtension; 

TestExtension.prototype.load = function() { 
    _viewer.addEventListener(Autodesk.Viewing.OBJECT_TREE_CREATED_EVENT, changeModelMaterial) 
    // _viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, changeModelMaterial) 
    return true 
}; 

TestExtension.prototype.unload = function() { 
    return true 
}; 

Autodesk.Viewing.theExtensionManager.registerExtension('TestExtension', TestExtension); 

Answer 1

hilft ich die Lösung gefunden, ganz zufällig ... aus anderen Sache, die ich versucht

vor zu tun:

const setMaterialOfDbIds = (dbIds) => { 
     var color_diffuse = 0xAB00EE; 
     var color_specular = 0xEEABEE; 
     var colorM = new THREE.MeshPhongMaterial({ 
      color: color_diffuse, 
      specular: color_specular 
     }); 
     _this.viewer.impl.matman().addMaterial("common color material", colorM, true); 

     for (let dbId of dbIds) { 
      _this.viewer.model.getData().instanceTree.enumNodeFragments(dbId, function (fragId) { 
       _this.viewer.model.getFragmentList().setMaterial(fragId, colorM); 
      }); 
     } 
     _this.viewer.impl.invalidate(true); 
    } 

nach

const setMaterialOfDbIds = (dbIds) => { 
     var color_diffuse = 0xAB00EE; 
     var color_specular = 0xEEABEE; 
     var colorM = new THREE.MeshPhongMaterial({ 
      color: color_diffuse, 
      specular: color_specular 
     }); 
     _this.viewer.impl.matman().addMaterial("common color material", colorM, true); 

     for (let dbId of dbIds) { 
      _this.viewer.model.getData().instanceTree.enumNodeFragments(dbId, function (fragId) { 
       _this.viewer.model.getFragmentList().setMaterial(fragId, colorM); 
       var fragProxy = _this.viewer.impl.getFragmentProxy(_this.viewer.model, fragId) 
       fragProxy.updateAnimTransform() 
      }); 
     } 
     _this.viewer.impl.invalidate(true); 
    } 

Wirklich Ich weiß nicht, warum

hinzugefügt wird

var fragProxy = _this.viewer.impl.getFragmentProxy(_this.viewer.model, fragId) 
fragProxy.updateAnimTransform() 

machten den Unterschied, ich habe so etwas in keinem Beispiel des Aktualisierens von Material gesehen. Interessant ist, dass dieser Code nur für wenige Elemente im Modell ausgeführt wird, aber auch für die Elemente, für die die Materialien zuvor geändert wurden (in der Methode "changeAllElementsMaterial").

@Philippe Leefsma wenn Sie verstehen sie sagen pls etwas mehr, warum es funktioniert

Answer 2

Bisher habe ich meine Seite das Problem nicht reproduzieren kann, ich bin mit dem folgenden Code (ES7) von dieser Verlängerung extrahiert: Viewing.Extension.Material

createColorMaterial (color) { 

    const material = new THREE.MeshPhongMaterial({ 
    specular: new THREE.Color(color), 
    side: THREE.DoubleSide, 
    reflectivity: 0.0, 
    color 
    }) 

    const materials = this.viewer.impl.getMaterials() 

    materials.addMaterial(
    this.guid(), 
    material, 
    true) 

    return material 
} 

async onModelCompletedLoad() { 

    const material = this.createColorMaterial(0xFF0000) 

    const model = this.viewer.model 

    const fragIds = await Toolkit.getFragIds(model) 

    fragIds.forEach((fragId) => { 

    model.getFragmentList().setMaterial(
     fragId, material) 
    }) 

    this.viewer.impl.sceneUpdated(true) 
} 

Die onModelCompletedLoad ist ein benutzerdefiniertes Ereignis ausgelöst, wenn sowohl GEOMETRY_LOADED_EVENT als auch OBJECT_TREE_CREATED_EVENT ausgelöst wurden.

zu diesem Artikel Schauen Sie für weitere Informationen: Asynchronous viewer events notification

ich Sie zweifeln leicht die Materialien vor wird das Modell zunächst jedoch gerendert ändern können, können Sie eine benutzerdefinierte Overlay verwendet werden könnten, die das Modell, bis Ihre eigene Logik versteckt hat alle notwendigen Schritte durchgeführt, dies ist der Ansatz, den ich bei meiner Demos bin mit: https://forge-rcdb.autodesk.io/configurator

Nach dem Laden eines Modells, beharrte alle benutzerdefinierten Materialien fein werden:

Die Materialverlängerung kann live unter there getestet werden.

Hoffnung, die