Three.js ES6 Module Bundling Strategies

Bundling Three.js with Loaders and Libraries

Based on your questions about transitioning to ES6 modules with Three.js, here are some insights:

1. Best Approach for Bundling Three.js with Loaders

The most effective approach for bundling Three.js with loaders and additional libraries is indeed using a module bundler like Webpack, Rollup, or Vite. The boilerplate you're using (ThreeJS-Webpack-ES6-Boilerplate) is a good starting point. Here's how to approach this:

With Webpack:

JAVASCRIPTCopied
// webpack.config.js
module.exports = {
  // ...other config
  entry: {
    threeBundle: './src/threeBundle.js',
    app: './src/index.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    library: '[name]',
    libraryTarget: 'umd'
  }
};

In your threeBundle.js, you would import and re-export all Three.js components you need:

JAVASCRIPTCopied
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';

// Re-export everything
export { 
  THREE,
  OrbitControls,
  GLTFLoader,
  DRACOLoader
};

2. Testing ES6 Modules Without Webpack

The error you're encountering with three-mesh-ui is due to how that library is importing Three.js. Third-party libraries that depend on Three.js often use bare module specifiers like import { Object3D } from 'three/src/core/Object3D.js' which browsers can't resolve without a bundler.

You have a few options:

Option 1: Use a dev server with import maps (modern browsers only)

HTMLCopied
<script type="importmap">
{
  "imports": {
    "three": "./node_modules/three/build/three.module.js",
    "three/examples/jsm/controls/OrbitControls.js": "./node_modules/three/examples/jsm/controls/OrbitControls.js",
    "three/examples/jsm/loaders/GLTFLoader.js": "./node_modules/three/examples/jsm/loaders/GLTFLoader.js"
  }
}
</script>
<script type="module" src="./main.js"></script>

However, this won't solve the issue with libraries that use deep imports from Three.js.

Option 2: Use a lightweight bundler for development

Tools like Snowpack or Vite provide a dev server that handles ES modules with minimal configuration:

BASHCopied
npm install -D vite
# Add "dev": "vite" to your package.json scripts

Creating a Separate Bundle for Libraries

To create a bundle with just the libraries (excluding your application code):

JAVASCRIPTCopied
// webpack.config.js
const path = require('path');

module.exports = {
  entry: {
    vendor: './src/vendor.js',
    app: './src/index.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
};

Your vendor.js would import all the libraries you want to include:

JAVASCRIPTCopied
// vendor.js
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
// Import any other libraries you need

// Make them available globally if needed
window.THREE = THREE;
window.OrbitControls = OrbitControls;
window.GLTFLoader = GLTFLoader;
window.DRACOLoader = DRACOLoader;

This approach will create a separate bundle for your vendor libraries that you can include before your application code.

For the most maintainable and future-proof approach, I recommend using a modern bundler like Webpack, Rollup, or Vite with proper code splitting to handle Three.js and its ecosystem of loaders and extensions.