Using webpack, threejs examples, and typescript?

Question

I'm having a lot of trouble getting stuff in threejs's examples (like EffectComposer or Detector) to work with webpack and typescript.

First off the relevant *.d.ts files are all present and installed via tsd. My problem is getting webpack to actually include files outside of the default threejs build (namely things in examples/js/).

With three installed from npm I can do something like

import THREE = require('three');

Which works fine but lacks any of the aforementioned goodies. There are a few other threejs packages on npm that bundle plugins but I don't think they work with typescript (since require('three-js')(['EffectComposer']) is rejected by the typescript compiler.

Has anyone gotten something in this package (like postprocessing) to work with typescript?

Chris Williamson · Answer 1 · 2019-04-20T18:54:08.640

11

I managed to find a pretty clean way to set this up in webpack.config.js.

As per Dan's answer:

$ npm install --save-dev imports-loader

It turns out we don't actually need exports-loader, since the three.js examples add their constructors to the THREE object.

Then, in webpack.config.js, we can add a rule to add var THREE = require('three'); to an imported module if the module's path resolves to anything containing three/examples/js:

module: {
  rules: [
    ...
    {
      test: /three\/examples\/js/,
      use: 'imports-loader?THREE=three'
    }
  ]
}

Now the example modules will find the THREE global when they expect it.

Then, to make importing examples a little less verbose:

resolve: {
  alias: {
    'three-examples': path.join(__dirname, './node_modules/three/examples/js')
  },
  ...
},

This assumes that webpack.config.js is in the same directory as node_modules, adjust accordingly.

Now, we can use the example files like so:

import * as THREE from 'three';
import 'three-examples/controls/OrbitControls';

to import the module for its side-effects.

If you're using this with Typescript and/or Babel and are getting warnings about the example module not being found on THREE, you may find this issue on the imports-loader repository useful to reference.

edited Apr 20 '19 at 18:54

answered Jul 07 '17 at 00:40

Chris Williamson

174
1
6

1

Could you please provide the whole webpack config here, where to add the resolve part? – tomriddle_1234 Jul 20 '17 at 13:25
I have a bunch of extraneous details in mine, but following https://webpack.js.org/configuration/ it's in the top level of module.exports, alongside `module` – Chris Williamson Aug 14 '17 at 00:46
For me it only works with 'const THREE = require('three');' – DevMultiTech Jan 22 '18 at 16:18
It works, but that warning really bothers me - have you found a way around it? – rpadovani Apr 19 '19 at 08:53
@rpadovani I'm not sure which warning you're referring to. Do you mean the one referenced in Jokester's answer? – Chris Williamson Apr 20 '19 at 18:39

score 8 · Accepted Answer · answered Mar 31 '16 at 05:09

8

Here's what worked for me.

$ npm install --save-dev exports-loader imports-loader

Then, to use something from three/examples/js, I do this:

const THREE = require('three');
// imports provides THREE to the OrbitControls example
// exports gets THREE.OrbitControls
THREE.OrbitControls = require('imports?THREE=three!exports?THREE.OrbitControls!../../node_modules\/three\/examples\/js\/controls\/OrbitControls');

// use THREE.OrbitControls ...

I think the right thing to do is use the imports and exports loaders by config rather than embedding them in the require. I'll update this answer when I have an example.

answered Mar 31 '16 at 05:09

Dan Weaver

1,081
11
17

This still works, though I omitted the `THREE.OrbitControls = ` bit. It would be nice to have this in `webpack.config` rather than in the code file, but I struggled to get that working. – Josh Santangelo Jan 01 '17 at 05:00
Found a way to do it in the config file, see answer below. – Chris Williamson Jul 07 '17 at 00:43

score 4 · Answer 3 · answered Jun 21 '17 at 15:23

I was able to bundle OrbitControls with (webpack v2 + ts-loader) and no other loaders.

package.json:

"dependencies": {
    "three": "^0.85.2",
    "@types/three": "^0.84.12",
    "ts-loader": "^2.1.0",
    "typescript": "^2.3.4",
    "webpack": "^2.6.1"
},

entrypoint.ts:

import * as THREE from "three";

// OrbitControls.js expects a global THREE object
(window as any).THREE = THREE;

// NOTE: OrbitControls must be included with require:
// using "import" cause it to be executed before global THREE becomes available
require("three/examples/js/controls/OrbitControls");

// ... code that uses THREE and THREE.OrbitControls

NOTE: webpack may warn like "export 'OrbitControls' (imported as 'THREE') was not found in 'three', because OrbitControls.js is not a proper JS module. I suppose we can just ignore this warning.

score 1 · Answer 4 · answered Mar 13 '16 at 18:57

I will try to answer just the part of your question regarding TypeScript and ThreeJS integration within your IDE.

As you've seen, most of the components are hosted on the DefinitelyTyped archives. I do recommend stop using tsd and migrate to typing.

A basic typings.json that typing will consume is listed below. It gets the latest main ThreeJS and the effect composer library to be recognized by TypeScript. Note the commit hashtags will change as the .tsd evolves.

{
  "ambientDependencies": {
    "three": "github:DefinitelyTyped/DefinitelyTyped/threejs/three.d.ts#c6c3d3e65dd2d7035428f9c7b371ec911ff28542",
    "three-projector": "github:DefinitelyTyped/DefinitelyTyped/threejs/three-projector.d.ts#48f20e97bfaf70fc1a9537b38aed98e9749be0ae",
    "three-detector": "github:DefinitelyTyped/DefinitelyTyped/threejs/three-effectcomposer.d.ts#48f20e97bfaf70fc1a9537b38aed98e9749be0ae",
    "three-effectscomposer": "github:DefinitelyTyped/DefinitelyTyped/threejs/detector.d.ts#48f20e97bfaf70fc1a9537b38aed98e9749be0ae",
    "three-shaderpass": "github:DefinitelyTyped/DefinitelyTyped/threejs/three-shaderpass.d.ts#ee05b1163d8da7f16719f08d52f70ab524f1003a"
  }
}

Attached is a snapshot of an IDE recognizing the public methods of the EffectsComposer. You may want to also experiment with different module loader capabilities of TypeScript.

Using webpack, threejs examples, and typescript?

4 Answers4

Linked