Forge vuer 不渲染 revit model
[英]Forge vuer not rendering the revit model
问题描述
Trying to display a revit model in a vue CLI application.
尝试在 vue CLI 应用程序中显示 revit model。
Using alvpickman's vue component for this purpose.为此目的使用 alvpickman 的vue 组件。 Under the TL;DR section you can find the sample code.在 TL;DR 部分下，您可以找到示例代码。
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:我的索引.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>
- This is my template in Viewer.vue:这是我在 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.'我收到以下警告：在 Firefox 上，我收到以下消息：`WebGL 警告：texImage：Alpha-premult 和 y-flip 对于非 DOM 元素上传已弃用。 'WebGL warning: checkFramebufferStatus: Framebuffer not complete. 'WebGL 警告：checkFramebufferStatus：帧缓冲区未完成。 (status: 0x8cd6) COLOR_ATTACHMENT1: Attachment has no width or height.' （状态：0x8cd6） COLOR_ATTACHMENT1：附件没有宽度或高度。
For Chrome, I have attached the output image for your reference.对于 Chrome，我附上了 output 图像供您参考。
Please let me know if I have missed out on any information.如果我错过了任何信息，请告诉我。 Kind Regards, Aditya Ayachit
亲切的问候， Aditya Ayachit
1 个解决方案
解决方案1
1 2020-12-15 15:37:56
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.此类问题（ COLOR_ATTACHMENT1: Attachment has no width or height. ）通常发生在查看器在 HTML 容器中初始化时，该容器要么隐藏（ display: none或类似），要么宽度或高度为零。
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.尝试在 forge-vuer 代码中放置一个断点，其中GuiViewer3D class 被实例化，并确保作为第一个参数传递给构造函数的 HTML 元素的宽度和高度不为零。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.