FVS Custom Model Wireframe Style

Application scenarios: If you have installed the FVS plugin, you can view this article to learn about functions related to FVS templates.

Note: Mobile devices are not supported.

Version

Application Scenarios

In 3D scenes, wireframe style is the most futuristic visual effect, commonly used in the following two scenarios:

1. See the internal situation of the model, such as the internal operation of the machine.

2. Improve the technological atmosphere of the overall scene.

For example, the effect of enabling the wireframe style for the model of machine production line is shown in the following figure:

Function Introduction

1. When uploading custom models in the GLB file format in FVS 3D-City Scenario and FVS Custom Model Components, you can preprocess the style and enable the wireframe style.

2. You can select only one wireframe style from the default wireframe style and the custom wireframe style.

3. If you select the custom wireframe style, you should upload a wireframe texture that matches the appearance of the model.

4. A new Style setting item was added in the Model property, supporting modification of style settings.

5. A new Animation setting item was added in the Model property. You can add Animation clips of wireframe changes to models enabling wireframe style. After adding, you can use the clip as the animation for 3D components.

This article mainly introduces operations and effects of the wireframe style of custom models. For more information about custom models, refer to FVS Custom Model Components.

Click to download the model and texture resources used in this article: Model and texture.zip

Adding Components and Creating Scenes

Click File > New FVS Report in the top left corner of the designer. After creating the new template, add a custom model component to the canvas, and click Edit Component in the content configuration panel on the right.

When going to the component editing page for the first time, you need to create a scene. Click Generate Scene, and you will go to the model configuration panel by default after generating the scene.

Preprocessing the Style

1. Click Add Model to go to the model library, then click Upload New Model. Select the production_line file from the downloaded sample files.

2. When uploading the model, you need to preprocess the model:

Data Preprocessing: You can adjust display levels of the model. You can set it only during preprocessing, and it cannot be edited later.

Style Pre-processing: You can choose whether to tick Turn on wireframe style. After ticking, you can choose to use the default wireframe style or the custom wireframe style.

The left preview page displays wireframe styles, and you can adjust the perspective by pressing the left or right mouse button and scrolling the mouse wheel.

Default: supports adjustment of the Threshold setting. The larger the threshold, the more details are included in the wireframe style.

Note:

1. The default threshold of ten may cause some models not to show the effect of the wireframe style and the solution is to increase the threshold.

2. If the uploaded model has too many faces, loading may be very slow when enabling the default wireframe. It is recommended to simplify the model faces first and then preprocess the style.

Custom: supports uploading wireframe textures that match the appearance of the model. The texture must be an image in the PNG file format processed and exported with a modeling software.

Note: If you need to customize the model and wireframe texture, you can send an email to international@fanruan.com or click at https://www.finereport.com/en/.

After the model preprocessing is completed, it is added to the model library. When hovering over the model file with the mouse, the buttons of editing and deleting appear in the upper right corner.

Click the Edit button, and the preprocessing setting box pops up. Now you can only modify the Style Pre-processing setting.

Model Styles

When selecting a model in the model list, you can set Style to Default or Wireframe Style in the property panel below.

1. When you do not preprocess the model, the style is Default and presented in the original style of the model.

2. If you enable the wireframe style and selected a type of the style during model style preprocessing, different setting items are displayed in the Style setting in the model configuration panel according to the type:

Wireframe Style (Default): indicates the preprocessed style is the default wireframe which supports setting the thickness and color of the wireframe.

Wireframe Style (Custom): indicates the preprocessed style is the custom wireframe which only supports setting the wireframe color.

3. If you do not enable the wireframe style during the model style preprocessing, selecting Wireframe Style at this time will prompt Operation failed. Please handle wireframe style first.

Click Process Immediately, complete settings in the Style Pre-processing setting box that pops up and click OK to successfully switch styles.

4. Click the  button on the right, and the setting box also pops up, supporting modification of the preprocessed wireframe style.

The Animation of Wireframe Changes

1. Adding an Animation Clip

When selecting a model in the model list, you can set the animation of switching model styles in the property panel below. The animation supports adding multiple animation clips.

To add the wireframe animation, you need to enable the wireframe style. If wireframe style is not enabled, it will prompt Operation failed, please handle wireframe style first. after you click + Animation clips of wireframe changes.

Click Process Immediately to enable the wireframe style, and then re-add the animation clip.

The setting items of animation clips are shown in the table below:

After completing all the settings, you can click OK.

2. Setting an Animation Effect

After adding the animation clip of wireframe changes, you can enable the model animation and add animation schemes in Manage Animation.

For the wireframe animation, you can set it to play animation at once or Delay Animation, and choose whether to Turn on loop playback. After completing the settings, click OK. You can immediately see the animation effect in the left model display page.

Note: If you do not enable loop playback, the model remains the style at the end of the animation.

Triggering the Animation by Clicking Other Components

After adding the wireframe animation, you can trigger the 3D component animation through adding click events to other components.

For example, two animation clips were added in accordance with the section ''Adding an Animation Clip''. They are From original situation to wireframe and From wireframe to original situation.

Click Return to editor in the top left corner of the model editing page and add two FVS Title Component to the canvas. The titles are Original Style and Wireframe Style respectively.

Select Original Style and click Interaction > Add Click Event > 3D Component Animation.

The event name is Style Switch. Select the model of the current page, select From wireframe to original situation for the triggering animation, and select Right After Click for the triggering timing.

Click Original Style, the animation of From wireframe to original situation is triggered, finally remaining the original style.

The procedure is shown below:

Similarly, add a click event to the Wireframe Style title, and select From original situation to wireframe for the animation.

The expected effect is shown in the following figure:

Click to download the template:  FVS Custom Model Wireframe Style.fvs