[three.js] How to Display 3D Models on a Web Page

Here's a quick guide to displaying 3D models on your web page, complete with sample code. We'll use three.js. This guide is for those who want to try it out without needing to master all its features.

What You Will Learn

  • How to use three.js (partially) to display and rotate 3D models (STL files) in HTML
  • How to change the color and default viewing angle of 3D models
  • In other words, how to achieve the following

Method

First, follow these steps to confirm the display:

  1. Download the three.js sample code from GitHub
  2. Run run.bat

run.bat sets up a local server and opens the page in Chrome.
You might see a warning, but it's a safe file, so don't worry!

set port=8080
start cmd /c "python -m http.server %port%"
powershell -command "& {Start-Sleep -Seconds 0.2}"
start chrome.exe http://localhost:%port%/

If it works, check the code and make various edits.
That's all!

Sample Code Overview

Here's a brief explanation.

File Structure

  • includes

    • three.js: Script for displaying 3D models. three.js official page
    • display-3dmodel.js: Script to call three.js
    • style.css: Style file

  • stl: Folder to store 3D shape files (sample data included by default)

  • index.html: Example HTML file

  • README.md: This file

  • run.bat: File to open index.html locally

index.html

The OBJ_INFO in the <script> after <body> contains settings for the 3D shape files.
The settings are commented within the code below.
For color variations, you can use the colors specified in the name2colorValue function in display-3dmodel.js.
To add more colors, modify this function or improve it to your liking!

  • Red
  • Pink
  • Orange
  • Yellow
  • Green
  • Blue
  • White
  • Gray
  • Black

The display target can be specified like <div class="model-container" id="chain-1">.

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../includes/style.css">
    <title>Display 3D model | hitbug</title>
</head>
<body>
    <div id="wrapper">
        <h1>Display 3D Model</h1>
        <div class="model-container" id="chain-1"></div>
        <div class="model-container" id="milk_crown-2"></div>
    </div>
</body>
    <script>
        const OBJ_INFO = [
            [
                '../stl/chain.stl',    /* Path to the shape file */
                ['chain-1'],           /* ID of the target div */
                [[0, -300, 150]],      /* Camera position coordinates [x, y, z] */
                [['orange', 'white']], /* Shape and background color */
                [1, 10000]             /* Zoom in/out limit distance */
            ],
            [
                '../stl/milk_crown.stl',
                ['milk_crown-2'],
                [[100, -300, 150]],
                [['rainbow', 'white']],
                [1, 10000]
            ],
        ];
    </script>
    <script src="../includes/display-3dmodel.js" type="module"></script>
</html>

The Essential Part of style.css

The style.css in the three.js sample code contains some code to adjust the display, but the minimal version is as follows:

.model-container {
    justify-content: center;
    background-color: #f8f8f8;
    border: 1px solid #cccccc;
    border-radius: 5px;
    height: 600px;
    width: 1000px;
    margin-bottom: 20px;
    max-width: 100%;
    overflow: hidden;
    position: relative;
}

Summary

I've introduced how to quickly display 3D models on a web page with actual code.
It's a good start to try it out.
I hope you find it helpful!