无法在 3D 查看器中绘制线条？答案

【问题标题】：Cannot Draw Lines in 3D Viewer?无法在 3D 查看器中绘制线条？
【发布时间】：2017-02-21 00:50:34
【问题描述】：

http://adndevblog.typepad.com/cloud_and_mobile/2015/12/understand-the-coordinate-system-of-view-and-data-api-with-axishelper-extension.html

1，以上内容在当前查看器中似乎不起作用，想法？

2，奥古斯托说：https://stackoverflow.com/a/39123356/5410501

但是，3D 边界框扩展似乎在演示页面中起作用： http://viewer.autodesk.io/node/gallery/embed?id=560c6c57611ca14810e1b2bf&extIds=Autodesk.ADN.Viewing.Extension.BoundingBox

我想（需要）在 3D 查看器和 2D 查看器中画线。我该怎么做？

V2.11 中的以下代码似乎没有画线。试试http://viewer.autodesk.io/node/gallery/#/viewer?id=57ecc0fc21f5a6ec046dd0fd

下面粘贴到控制台中。

var drawLine = function(start, end, material) {

        var geometry = new THREE.Geometry();

        geometry.vertices.push(new THREE.Vector3(
            start.x, start.y, start.z));

        geometry.vertices.push(new THREE.Vector3(
            end.x, end.y, end.z));

        var line = new THREE.Line(geometry, material);

        NOP_VIEWER.impl.scene.add(line);
        //refresh NOP_VIEWER
        NOP_VIEWER.impl.invalidate(true);

        return line;
}

var _axisLines = [];

    //get bounding box of the model
    var boundingBox = NOP_VIEWER.model.getBoundingBox();
    var maxpt = boundingBox.max;
    var minpt = boundingBox.min;

    var xdiff =    maxpt.x - minpt.x;
    var ydiff =    maxpt.y - minpt.y;
    var zdiff =    maxpt.z - minpt.z;

    //make the size is bigger than the max bounding box 
    //so that it is visible 
    var size = Math.max(xdiff,ydiff,zdiff) * 1.2; 
    //console.log('axix size :' + size);


    // x-axis is red
    var material_X_Axis = new THREE.LineBasicMaterial({
        color: 0xff0000,  //red 
        linewidth: 2
    });
    NOP_VIEWER.impl.matman().addMaterial('material_X_Axis',material_X_Axis,true);
    //draw the x-axix line
    var xLine = drawLine(
        {x : 0, y : 0, z : 0} ,
        {x : size, y : 0, z : 0} , 
        material_X_Axis);

    _axisLines.push(xLine);


    // y-axis is green
    var material_Y_Axis = new THREE.LineBasicMaterial({
        color: 0x00ff00,  //green 
        linewidth: 2
    });
    NOP_VIEWER.impl.matman().addMaterial('material_Y_Axis',material_Y_Axis,true);
    //draw the y-axix line
    var yLine = drawLine(
        {x : 0, y : 0, z : 0} ,
        {x : 0, y : size, z : 0} , 
        material_Y_Axis);

    _axisLines.push(yLine);


    // z-axis is blue
    var material_Z_Axis = new THREE.LineBasicMaterial({
        color: 0x0000ff,  //blue 
        linewidth: 2
    });
    NOP_VIEWER.impl.matman().addMaterial('material_Z_Axis',material_Z_Axis,true);
    //draw the z-axix line
    var zLine = drawLine(
        {x : 0, y : 0, z : 0} ,
        {x : 0, y : 0, z : size} , 
        material_Z_Axis);

    _axisLines.push(zLine);

console.log(_axisLines);

【问题讨论】：

在边界框扩展中，查看器正在本地加载，版本为 1.2.23。我可以使用adndevblog.typepad.com/cloud_and_mobile/2015/12/… 上发布的确切代码轻松地在该视图中画线
我可以使用 BondingBox 扩展在 3D 模型的最新版本查看器中按原样绘制线条：v 2.13。如果您遇到问题，请发布可以重现问题的代码示例。
示例代码添加了示例查看器链接，似乎不喜欢此线条图代码。（很高兴知道这应该是可能的）
在您发布的链接中，尝试启用 BoundingBox 扩展，在我这边工作正常。代码可在此处获得：github.com/Autodesk-Forge/library-javascript-viewer-extensions/…

标签： autodesk-viewer

【解决方案1】：

我可以知道您正在测试哪个版本吗？

我创建了一个简单的测试来使用 AxisHelper 的代码。它看起来可以与当前默认版本的 Viewer (2.10) 一起使用。我还明确将版本设置为 2.11，它也可以工作。 https://github.com/xiaodongliang/TempTest

如博客所示，要向查看器添加额外的几何图形，将创建原生 Three.js 对象，然后将其添加到查看器场景中，最后通过 viewer.impl.invalidate 刷新视图。

希望这个测试样本可以帮助到您。如果您使用的是 v2.10 或 v2.11，但仍有问题，能否提供一个小演示代码？

【讨论】：