Forge vuer 不渲染 revit 模型答案

【问题标题】：Forge vuer not rendering the revit modelForge vuer 不渲染 revit 模型
【发布时间】：2021-03-25 11:16:34
【问题描述】：

尝试在 vue CLI 应用程序中显示 revit 模型。

为此目的使用 alvpickman 的 vue component。在 TL;DR 部分下，您可以找到示例代码。

实施的解决方案与示例中显示的几乎相似。

很抱歉，如果您发现它在此处重复，但在此处提及对基本文件所做的更改：

我的索引.html：

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
  <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"></script>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
</head>

<body>
  <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
  <div id="viewer"></div>
  <!-- built files will be auto injected -->
</body>

</html>

这是我在 Viewer.vue 中的模板：

< template >
  <
  div id = "viewer"
style = "background-color:green,height:500px,width:500px" >
  IANET <
  forge - vuer
forge vuer
  : getAccessToken = "directToken": urn = "myObjectUrn" / >
  <
  /div> <
  /template>

  <
  script >
  import ForgeVuer from "forge-vuer";
import axios from "axios";
import qs from "qs";



export default {
  name: "viewer",
  components: {
    ForgeVuer
  },
  data: function() {
    let lclSelf = this;
    return {
      myToken: lclSelf.directToken(),
    };
  },


  props: {
    msg: String,
    fnResult: {
      type: Number,
      default: 0,
    },
    clientSecret: {
      type: String,
      default: "Sx88OqBORKLaa1HV",
    },
    myObjectUrn: {
      type: String,
      default: "dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6c2FudGhvc2hhdHMxZG90Y29tLXByb3Blcl9wcm9qZWN0LXByb3Blcl9zY2hlZHVsZS9XaW5kb3dfTW9kZWxfTmV3XzEucnZ0",
    },

    client_id: {
      type: String,
      default: "IcrcxG1YzarBxfIBtHPMPtYbLGkmag6J",
    },
    access_token: {
      type: String,
      default: "Aditya",
    },
  },
  methods: {
    directToken: function() {
      return "eyJhbGciOiJIUzI1NiIsImtpZCI6Imp3dF9zeW1tZXRyaWNfa2V5In0.eyJzY29wZSI6WyJjb2RlOmFsbCIsImRhdGE6d3JpdGUiLCJkYXRhOnJlYWQiLCJidWNrZXQ6Y3JlYXRlIiwiYnVja2V0OmRlbGV0ZSIsImJ1Y2tldDpyZWFkIl0sImNsaWVudF9pZCI6IlYxOHNSZHY0Y2xCc1JhNHpieHNHaGVNSTVEd0NVMlpiIiwiYXVkIjoiaHR0cHM6Ly9hdXRvZGVzay5jb20vYXVkL2p3dGV4cDYwIiwianRpIjoiTmJQT1hhTzhYYkw2V3VSQ1p3UHNzR055RTJSc3RGNEdkTjBtSGwzWGdlNDJqWG5neEp3YkZzVThDbTdaWkJJMCIsImV4cCI6MTYwNzk3Nzk2OX0.IHkUGUCWWKlI3D51qqpQRhVdrWbaCzhEpqBooLHzShc";
    },


    apiGetAccessToken: function() {
      var tokenData = qs.stringify({
        client_id: this.client_id,
        client_secret: this.clientSecret,
        grant_type: "client_credentials",
        scope: "code:all data:write data:read bucket:create bucket:delete bucket:read",
      });

      var config = {
        method: "post",
        url: "https://developer.api.autodesk.com/authentication/v1/authenticate?",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
          //Cookie: "PF=Zh4uVKYObqdy153pQo4H2d",
        },
        data: tokenData,
      };

      axios(config)
        .then(function(response) {
          let responseData = JSON.stringify(response.data);
          console.log("Response Data:" + responseData);
          //this.access_token = 'a';
          //console.log('This is the access token:\n' + this.access_token);
          console.log("This is the access token:\n" + response.data.access_token);
          return response.data.access_token;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
  },
}; <
/script>

我收到以下警告：在 Firefox 上，我收到以下消息： `WebGL 警告：texImage：Alpha-premult 和 y-flip 对于非 DOM 元素上传已弃用。 'WebGL 警告：checkFramebufferStatus：帧缓冲区未完成。（状态：0x8cd6）COLOR_ATTACHMENT1：附件没有宽度或高度。'

对于 Chrome，我附上了输出图像供您参考。

如果我错过了任何信息，请告诉我。亲切的问候，阿迪亚·阿亚奇特

【问题讨论】：

标签： autodesk-forge autodesk-viewer autodesk autodesk-model-derivative

【解决方案1】：

这种问题 (COLOR_ATTACHMENT1: Attachment has no width or height.) 通常发生在查看器在隐藏的（使用display: none 或类似的）或宽度或高度为零的 HTML 容器中初始化时。

尝试在 GuiViewer3D 类被实例化的 forge-vuer 代码中放置一个断点，并确保作为第一个参数传递给构造函数的 HTML 元素的宽度和高度不为零。

【讨论】：