In this post I will show you how I was able to use ThreeJS without type module in JS by bundling with Webpack.

Use Threejs Without type="module"

ThreeJS is a library used to creation and build 3d scenes with objects and animations in a web browser using Javascript. It is a powerful visually tool to add to your website to make it more attractive and appealing for users where 3d modeling is essential.

ThreeJS is written in ES6 and utilizes imports and exports under the new syntax in Javascript. In order to use the library and its various scripts, you would import the script into your Javascript code using the "module" type attribute. Example below

		<script type="importmap">
			{
				"imports": {
					"three": "./scripts/threejs/build/three.module.js",
					"three/addons/": "./scripts/threejs/examples/jsm/"
				}
			}
		</script>

		<script type="module">

			import * as THREE from 'three';

			import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
</script>

I have recently come across a situation where I couldn't utilize imports / exports using ThreeJS. I needed to find a way to bundle my own to use. Below are the steps I took to successfully fix my situation where I could use the ThreeJS library without imports and exports.

There are quite a few source files in the ThreeJS library that you can use to build your scene. In the example below, I will be adding a basic scene with a cube that has a textured applied. So I would only need to include a few scripts from the ThreeJS library.

Setup Project

To bundle a custom library so we can use ThreeJS without type module, we will use Webpack.

Webpack is primarily a CLI tool. We will need to edit some source files in your favorite code editor.

Directory structure of Webpack project to create a ThreeJS bundle.

We will start by creating a folder on our system to hold our Webpack project. Open a command prompt and enter in the following.

mkdir webpack

cd C:\webpack

Next we will initialize NPM to create a project in this folder.

npm init -y

Add Project Dependencies

We need to install the necessary dependencies in this project to build the bundle we need.

Add the Webpack bundler.

npm install webpack webpack-cli --save-dev

Add Babel which is a Javascript compiler. This is what helps to access the ES6 modules which is primarily how the ThreeJS library is built upon.

npm install --save-dev @babel/core babel-loader @babel/preset-env

Finally, add the ThreeJS library.

npm install three

Editing Package Files

Packages.json

There are a few of these package files we will need to edit to ensure our project bundles properly.

Inside the package.json file, we will need to remove a single line.

"type": "commonjs",

Then we will add a script to allow us a easier method of building the bundle.

  "scripts": {
    "build": "webpack"
  },

Below is what the package.json should look like when done.

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.27.1",
    "@babel/preset-env": "^7.27.2",
    "babel-loader": "^10.0.0",
    "webpack": "^5.99.9",
    "webpack-cli": "^6.0.1"
  },
  "dependencies": {
    "three": "^0.177.0"
  }
}

Webpack.config.js

The webpack.config.js file is not created during the initial process. We will need to create this file at the root of the project folder.

Create the file and open a code editor to add the following inside.

NOTE: you can edit the filename and the library to whatever you want it to be called.

    const path = require('path');

    module.exports = {
      mode: 'production', // or 'development'
      entry: './src/index.js',
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'custom_threejs.js',
        library: 'CustomThreeJS',
        libraryTarget: 'umd',
        umdNamedDefine: true,
      },
      module: {
        rules:[
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
      }
    };

Adding Selected Threejs Source files to package

We will need to create a src directory off the root of the project folder. This is where we will create a referencing Javascript script to include the necessary library files to bundle.

Open a command command and navigate to the root of the project folder.

mkdir src

Inside this folder we need to create referencing file to load the appropriate Threejs scripts needed in our bundle.

Create the new file named index.js.

Inside the file, add the following.

import * as THREE from 'three';

import { MTLLoader } from '../node_modules/three/examples/jsm/loaders/MTLLoader.js';
import { OBJLoader } from '../node_modules/three/examples/jsm/loaders/OBJLoader.js';
import { OrbitControls } from '../node_modules/three/examples/jsm/controls/OrbitControls.js';

window.THREE = THREE;
window.MTLLoader = MTLLoader;
window.OBJLoader = OBJLoader;
window.OrbitControls = OrbitControls;

I am just adding the basics for importing a textured model into a scene with user interaction. You can add however many and different scripts to this file that you want included in your bundle.

Build the Bundle

Finally, we just need to build the packaged bundle. Open a command prompt, navigate to root of project folder and enter in the following command.

npm run build

There should now be a dist folder created at the root of the project folder with the bundled Javascript file inside.

In my example, the file is named custom_threejs.js. Use this file, like the example below, in your webpage to now utilize ThreeJS without type module.

		<script src="custom_threejs.js"></script>

Hope this was useful.