CODEWITHSUNDEEP
autodesk-forgeautodesk-viewerautodeskautodesk-model-derivative
indiaaditya
indiaaditya

Reputation: 73

Forge vuer not rendering the revit model

Trying to display a revit model in a vue CLI application.

Using alvpickman's vue component for this purpose. Under the TL;DR section you can find the sample code.

The implemented solution is almost similar to what has been shown in the example.

Sorry if you find it repeated here, but mentioning the changes made to the base file as here:

My Index.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>

  1. This is my template in 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>

I get the following warnings: On Firefox, I get these messages amongst others: `WebGL warning: texImage: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads.' 'WebGL warning: checkFramebufferStatus: Framebuffer not complete. (status: 0x8cd6) COLOR_ATTACHMENT1: Attachment has no width or height.'

For Chrome, I have attached the output image for your reference.

Please let me know if I have missed out on any information. enter image description here Kind Regards, Aditya Ayachit

Upvotes: 0

Views: 176

Answers (1)

Petr Broz
Petr Broz

Reputation: 9942

This kind of problem (COLOR_ATTACHMENT1: Attachment has no width or height.) typically happens when the viewer is initialized within an HTML container that is either hidden (with display: none or similar), or has zero width or height.

Try putting a breakpoint inside the forge-vuer code where the GuiViewer3D class is instantiated, and make sure that the width and height of the HTML element that's passed to the constructor as the first argument is non-zero.

Upvotes: 1

Related Questions