Shulou(Shulou.com)06/02 Report--

This article is to share with you about how to use bimface in vue. The editor thinks it is very practical, so I share it with you. I hope you can get something after reading this article.

1. Install vue scaffolding

Vue CLI is still used here.

Install the vue scaffolding tool globally with the following command

Npm install-g @ vue/cli

After installation, you can switch the mirror source by installing nrm, or you can proceed directly to the next step

two。 Create a project

Find an appropriate directory, open cmd or powshell, and type the following command to create a project named bimface-demo

Vue create bimface-demo

Next, there is a series of choices, which are demonstrated by screenshot.

Select Manually select features through the up and down arrows, indicating that the default configuration is not applicable. Instead, you need to configure the vue project yourself, and then click enter.

Next, use the default selection, and then hit enter.

Next, select the vue2 version, and then enter

Next, select the configuration of the code checking tool Eslint, select item 3 through the up and down arrows, and then enter (ESlint code checking is disabled later, if it is not a professional front end, you do not need to configure this)

Select the first item below, which means that when you save the code, the code will be checked (because we will disable ESlint later, so it doesn't matter here), and then enter

Choose to use the default configuration (use a separate configuration file instead of writing all the configurations into one file), and then enter

The following question is whether to save the above selection as a template. The next time you create a vue project, you can directly use the secondary template. We enter n here, then enter, and wait for the creation of the project to be completed.

After waiting for a period of time, you can see the following interface, which proves that the project has been created successfully.

3. Import bimface file

3.1 run the project

First run the project to see if the project was created successfully

Use vs cde (it is recommended to use vs code instead of webstorm, etc.) to open the project bimface-demo you just created

To open it, in the vs cde menu bar, select File-> Open folder, then select bimface-demo folder, and then click Select folder.

After opening, in the explorer on the left side of the editor, right-click in the space and select "Open in inheritance Terminal", or use the shortcut ctrl+ `(the key above the TAB key), or you can open the terminal in the editor. This is a command line tool similar to cmd, where we can type some commands instead of opening cmd or Powshell.

Type the following command in the terminal, then press enter to start the service

Npm run serve

When the following interface appears, it indicates that the startup is successful

At this point, in the browser, enter the address marked red above, and the following interface appears, and everything will be all right.

3.2 introduction of bimface files

The above is all some preparatory work, so let's start to actually write the code.

Because Guanglianda does not provide related packages for bimface, such as BimfaceSDKLoader, it is impossible to install BimfaceSDKLoader in the vue project through npm, so it can only be introduced in the traditional way.

In the project directory, find the index.html in the public directory and open the

Several css and js files introduced in demo are introduced here. Don't forget to save the file.

4. Realize page rendering

First of all, in the root directory of the project, find the .eslintrc.js file, open it, and comment on the red file, in order to cancel the ESLint check of the code and reduce a lot of trouble.

Then find the App.vue file in the src directory of the project root, open it, write code on this page, and render the bimface model

4.1 modify html

Copy the project code from demo to the template template in the vue file

4.2 modify CSS

Delete all the code in the style tag in the file

4.3 modify JS

Copy the js code in demo to the script tag after modification

Add the data function to store the data needed in the component

Add the mounted method and add the following code

Note that the this keyword is added where appropriate to represent the current component

Mounted () {let options = new BimfaceSDKLoaderConfig (); options.viewToken = this.viewToken; BimfaceSDKLoader.load (options, this.successCallback, this.failureCallback);}

Add two custom methods successCallback and failureCallback to methods

Note: at the beginning of the method, declare the that variable to refer to this, because in this function, in some cases, this no longer refers to the current vue component

Methods: {successCallback (viewMetaData) {let that=this / / get DOM element let dom3d = document.getElementById ('viewer3d'); / / configuration parameter let config = new Glodon.Bimface.Application.WebApplication3DConfig (); config.domElement = dom3d; config.enableViewhouse = false; / / cancel toolbar config.Toolbars = [] / / create viewer3D object let app = new Glodon.Bimface.Application.WebApplication3D (config); / / add model app.addView (that.viewToken); let viewer3D = app.getViewer (); / / Model Click listening event app.addEventListener (Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked, function (objectData) {componentId = objectData.objectId) / / obtain the component ID that.viewerDrawing.toDrawingId (that.componentId, getElementId) of the corresponding drawing according to the model component ID; / / define the callback function function getElementId (elementId) {if (elementId) {/ / if the current drawing has a corresponding model component ID, zoom to the corresponding location that.viewerDrawing.zoomToObject (elementId) That.viewerDrawing.update ();} else {/ / if the current drawing does not have a corresponding model component ID, it is necessary to further determine whether there is a drawing viewer3D.getDrawingListbyId (that.fileId, that.componentId, getDrawing) containing the component. Function getDrawing (data) {if (data.length) {/ / take the first drawing for 2D / 3D linkage let drawingId = data [0] .viewInfo.id; that.viewerDrawing.destroy () That.viewerDrawing.load (viewToken, drawingId)}) / / listens to the event app.addEventListener completed by adding view (Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function () {/ / render 3D model app.render ()) / / Adaptive screen size _ window.onresize = function () {viewer3D.resize (document.documentElement.clientWidth, document.documentElement.clientHeight-40)} / / hide the upper right corner viewhouse / / viewer3D.hideViewHouse (); let options2d = new BimfaceSDKLoaderConfig (); options2d.viewToken = that.viewToken; options2d.viewType = BimfaceViewTypeOption.DrawingView; BimfaceSDKLoader.load (options2d, successCallback2d, failureCallback2d) Function successCallback2d (viewMetaData) {let dom2d = document.getElementById ('viewer2d'); let config2d = new Glodon.Bimface.Viewer.ViewerDrawingConfig (); config2d.domElement = dom2d; / / add drawing that.viewerDrawing = new Glodon.Bimface.Viewer.ViewerDrawing (config2d); let drawingUrl = viewMetaData.drawingUrl / / if it is a single model, you only need to send the drawing id let _ id = 582803; that.viewerDrawing.load (that.viewToken, _ id); / / if it is an integrated model, you need to transfer the drawing id and the single model fileid / / let _ id = 1287057; / / let _ fileid = 1628186476905664; / / viewerDrawing.load (viewToken,_id,_fileid) / / listen to the event that.viewerDrawing.addEventListener (Glodon.Bimface.Viewer.ViewerDrawingEvent.Loaded, zoomToElement) after loading the drawing; function zoomToElement () {if (that.componentId) {that.viewerDrawing.toDrawingId (that.componentId, function (elementId) {/ / zoomed to the corresponding location that.viewerDrawing.zoomToObject (elementId) That.viewerDrawing.update (); console.log (elementId);})} else {console.log ("! componentId") }} that.viewerDrawing.addEventListener (Glodon.Bimface.Viewer.ViewerDrawingEvent.SelectionChanged, function (objectData) {if (objectData.length > 0) {/ / get the corresponding model component ID let componentId_2 = that.viewerDrawing.toModelId (objectData [0]) according to the component ID clicked on the drawing; viewer3D.clearIsolation () / / navigate to the component viewer3D.setSelectedComponentsById ([componentId_2]); / / whether there is a component let isExist = viewer3D.getViewer () .getComponentInfoByUserId (componentId_2); if (isExist) {viewer3D.zoomToSelectedComponents ();} else {viewer3D.render () })} function failureCallback2d (error) {console.log (error);}})}, failureCallback (error) {console.log (error);}} above is how to use bimface in vue. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.