Skip to content

Instantly share code, notes, and snippets.

@cecilemuller cecilemuller/readme.md
Last active Jun 26, 2019

Embed
What would you like to do?
Using Three.js "examples" (e.g. OrbitControls) with Webpack 2

Javascript files from the examples folder (such as OrbitControls) are not CommonJS or ES Modules, but they can still be used in Webpack bundles:

In package.json:

"dependencies": {
	"three": "0.84.0",
	"webpack": "2.4.1"
}

In webpack.config.js:

resolve: {
	alias: {
		'three/OrbitControls': path.join(__dirname, 'node_modules/three/examples/js/controls/OrbitControls.js'),
		'three/OBJLoader': path.join(__dirname, 'node_modules/three/examples/js/loaders/OBJLoader.js')
		// ...
	}
},

//...

plugins:[
	new webpack.ProvidePlugin({
		'THREE': 'three'
	}),
	//...
]

In application.js (CommonJS version):

require('three');
require('three/OrbitControls');
/* global THREE */

console.log(THREE.OrbitControls);

In application.js (ES Modules version):

import 'three';
import 'three/OrbitControls';
/* global THREE */

console.log(THREE.OrbitControls);
@cyrillegin

This comment has been minimized.

Copy link

commented Dec 27, 2017

Just a side note in case anyone else was having trouble, I needed to use import 'three/examples/js/loaders/OrbitControls';. The rest was perfect though, thanks!

@doommm

This comment has been minimized.

Copy link

commented Jun 6, 2018

Having the same trouble , and get it done in another way:
In webpack.config.js

resolve: {
    alias: {
      three$: 'three/build/three.min.js',
      'three/.*$': 'three',
       // don't need to register alias for every module
    },
    // ...
},
plugins: [
    new webpack.ProvidePlugin({
      THREE: 'three',
      // ...
    }),
    // ...
],

Then just do import 'three/examples/js/controls/OrbitControls'; directly in JS, everything works fine.

@jbownzino

This comment has been minimized.

Copy link

commented Aug 7, 2018

thank you!

@casamia918

This comment has been minimized.

Copy link

commented Aug 17, 2018

Thank you! I really appreciated with it!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.