这是一个常被提起的题目，第一次是在「增加自定义属性到Viewer的属性面板」这篇博客被提出，但因自V4最先，Viewer的CSS有严重变动，致使该要领在新版的 Viewer已没法运用。另一个相干的是「Viewer属性搜检器」这篇博客，其是经由过程竖立一个工具栏按钮的体式格局来新增面板，它是能够一般运作的，但它的做法并不是庖代现有的属性面板，不在本日要议论的局限。

那我们该怎么做才庖代现有的属性面板呢?

事实上，我们有一个接收内建面板 ViewerPropertyPanel 对象的要领叫 viewer.setPropertyPanel 能够运用。因而，最简朴的操纵体式格局是运用 setPropertyPanel 这个要领，再替代 setProperties 这要领的内容。为了新增更多我们想要的属性数据，让我们也复写setNodeProperties 这个接收dbId作为函数变量的要领，以下是部份程序代码:

// *******************************************
// Custom Property Panel
// *******************************************
function CustomPropertyPanel(viewer, options) {
    this.viewer = viewer; 
    this.options = options; 
    this.nodeId = -1; // dbId of the current element showing properties
    Autodesk.Viewing.Extensions.ViewerPropertyPanel.call(this, this.viewer);
}
CustomPropertyPanel.prototype = Object.create(Autodesk.Viewing.Extensions.ViewerPropertyPanel.prototype);
CustomPropertyPanel.prototype.constructor = CustomPropertyPanel;

CustomPropertyPanel.prototype.setProperties = function (properties, options) {
    Autodesk.Viewing.Extensions.ViewerPropertyPanel.prototype.setProperties.call(this, properties, options);

    // add your custom properties here
    // for example, let's show the dbId and externalId
    var _this = this;
    // dbId is right here as nodeId
    this.addProperty('dbId', this.nodeId, 'Custom Properties');
    // externalId is under all properties, let's get it!
    this.viewer.getProperties(this.nodeId, function(props){
        _this.addProperty('externalId', props.externalId, 'Custom Properties');
    })
}

CustomPropertyPanel.prototype.setNodeProperties = function (nodeId) {
    Autodesk.Viewing.Extensions.ViewerPropertyPanel.prototype.setNodeProperties.call(this, nodeId);
    this.nodeId = nodeId; // store the dbId for later use
};

为了方便运用，我们将之包装在Viewer扩大中。这里有篇博客「扩大观点：工具栏与面板」在议论扩大展架的基础观点，这里我们只运用它建立扩大的部份(不是工具栏或面板的部份)。以下扩大代码运用适才竖立的面板，并经由过程 setPropertyPanel 使之与 Viewer 贯穿连接。(这个扩大将担任注册和作废注册我们的自定义属性面板。)

// *******************************************
// Custom Property Panel Extension
// *******************************************
function CustomPropertyPanelExtension(viewer, options) {
    Autodesk.Viewing.Extension.call(this, viewer, options);

    this.viewer = viewer;
    this.options = options;
    this.panel = null;
}

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

CustomPropertyPanelExtension.prototype.load = function () {
    this.panel = new CustomPropertyPanel(this.viewer, this.options);
    this.viewer.setPropertyPanel(this.panel);
    return true;
};

CustomPropertyPanelExtension.prototype.unload = function () {
    this.viewer.setPropertyPanel(null);
    this.panel = null;
    return true;
};

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

末了一步是载入这个扩大。如果您的应用程序遵照「基础应用程序教授教养」竖立的，在你的程序代码里会有一行像这个模样的，这里我们只需到场扩大设定即可：

// 从如许
viewerApp.registerViewer(viewerApp.k3D, Autodesk.Viewing.Private.GuiViewer3D);

// 改成如许
viewerApp.registerViewer(viewerApp.k3D, Autodesk.Viewing.Private.GuiViewer3D, { extensions: ['CustomPropertyPanelExtension'] });