Welcome to this short exercise. This short article will focus on how to display a 3D file within a mesh model. We will use the LC JS library to load this object. Although the explanation is brief, there are very important key points that we must configure to access our data set. The project will be developed in Node JS, so it will be useful for measurement work with 3D images. 
Let’s get started!

To follow this 3D mesh model data visualization project, download the ZIP file with all the necessary resources. 

1. Download the template provided to follow the tutorial.

2. After downloading the template, you’ll see a file tree like this:

3. Open a new terminal and run the npm install command

4. It is important to keep the configuration in the tsconfig.json file. This configuration will help you to import JSON files as data objects.

We recommend you use and update to the most recent versions of LightningChart JS and XYData. This is because some LightningChart JS tools do not exist in previous versions. In the project’s package.json file you can find the LightningChart JS dependencies:

1. Importing libraries

We will start by importing the necessary libraries to create our chart.

2. Add license key (free)

Once the LightningChart JS libraries are installed, we will import them into our chart.ts file. Note you will need a trial license, which is free.

In the Webpack configuration file we have, access to static files (such as images, .obj files, fonts, etc.) is handled through the devServer option under the static property.

devServer Configuration

The Webpack Dev Server (webpack-dev-server) allows you to serve static files directly from a specific folder, which is useful during development.  The devServer configuration in our Webpack file is set as follows: 

• static.directory
  Defines the folder where Webpack will look for static files to serve. Value: path.join(__dirname, 'assets') – This indicates that the static files are located in the assets folder at the root of the project.
   
• static.publicPath
  Defines the base URL from which static files will be served. This affects how files are accessible in the browser. Value: ‘/assets’ – This means that all static files within the assets folder will be accessible through the /assets path in the browser.
   
• compress
  Enables compression of served files to reduce the size of resources transmitted. Value: true – This ensures that Webpack will compress files before sending them to the browser, improving performance during development.
   
• port
  Defines the port on which Webpack will serve the app in the development server. Value: 8080 – The development server will run at http://localhost:8080 . 

Accessing Static Files

Thanks to this configuration, files inside the assets folder are served as static files in your app. For example, if you have a 3D model file water_ship.obj in the assets folder, it can be accessed from “http://localhost:8080/assets/water_ship.obj”
This means that if you need to load an .obj file in your JavaScript code, you can make use of fetch.

 This code will make a fetch request to “http://localhost:8080/assets/water_ship.obj ”, which is handled by Webpack, thanks to the devServer configuration. 

• Static files in the assets folder are served via the /assets path in the browser. 
• The Webpack Dev Server (webpack-dev-server) handles this static file delivery during development without needing to set up an additional static server. 

This setup is ideal for development, as it allows you to easily access static files while working with Webpack, without having to manually configure a static server. 

This code is used to create a 3D chart using the LightningChart library and load a 3D model (.obj file) from a server to display on the chart. 

Create a 3D Chart with LightningChart

Chart3D() 

This method creates a 3D chart object. It accepts an object containing configuration settings. 

Inside the object 

• theme: Themes.darkGold sets the theme of the chart to a predefined theme called darkGold. The chart will be styled using this theme. 
• setTitle(‘Spaceship Model') This method sets the title of the chart to “Spaceship Model”. The title will be displayed at the top of the chart.

Fetch the 3D Model (OBJ file)

Fetch(‘http://localhost:8080/assets/water_ship.obj’)

This makes an HTTP GET request to fetch the water_ship.obj file located on the server at “http://localhost:8080/assets/water_ship.obj ”. The .obj file is a 3D model file format that contains the model’s geometry.
Moreover, .then((response) => response.text()) handles the response from the fetch request. It converts the raw response into text (since .obj files are text-based).

• then((data) => {...})
  Once the .obj file data has been fetched and converted to text, it is passed to the callback function. The data variable contains the text representation of the 3D model. 

• chart3D.addMeshModel()
  This method adds a new mesh model to the 3D chart. A “mesh model” refers to the 3D object that will be rendered on the chart. 

• .setScale(0.06)
  This sets the scale of the 3D model to 0.06. It makes the model 6% of its original size to fit better within the 3D chart.

• .setModelRotationEuler({ x: 0, y: 0, z: 0 })
  This sets the rotation of the model in 3D space using Euler angles. In this case, the model is set to have no rotation (x: 0, y: 0, z: 0). 

• .setModelFromObj(data)
  This method takes the 3D model data (data) in .obj format and sets it as the model for the mesh. The data variable contains the contents of the .obj file, which will be used to generate the 3D model on the chart. 

Initializing the chart 

Run the npm start command in the terminal to visualize the chart in a local server. 

Creating a mesh model with an .obj file using LightningChart JS is surprisingly simple, especially when integrated with a Webpack for managing resources in your project. Here are 3 important points I would like to highlight: 

1. Setting Up the Environment: With a Webpack, all the complexity of managing and serving your project’s assets, like .obj files, is handled efficiently. By configuring Webpack to serve static assets from a specific folder (like assets), you ensure that the 3D model can easily be fetched and used within your application. 

 2. Creating the 3D Chart: LightningChart makes it easy to create a 3D chart, and adding a 3D mesh model is straightforward. With just a few lines of code, you can initialize the chart, choose a theme, and set a title for your visualization. 

3. Loading the Model: Once you have your 3D chart set up, you simply fetch the .obj file (which contains your 3D model’s data)  and load it into the chart. Thanks to LightningChart’s API, applying the model’s scale, rotation, and other settings is as simple as calling a few methods.  

This allows you to easily manipulate the appearance of your 3D model on the fly. I hope this article will help you to learn more about webpack configuration. I had a lot of trouble trying to access the obj file, until I finally remembered how to configure my webpack file. 

Thanks, and goodbye!