13

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?

4 Answers 4

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.

5
  • 1
    Could you please provide the whole webpack config here, where to add the resolve part? Jul 20, 2017 at 13:25
  • I have a bunch of extraneous details in mine, but following webpack.js.org/configuration it's in the top level of module.exports, alongside module Aug 14, 2017 at 0:46
  • For me it only works with 'const THREE = require('three');' Jan 22, 2018 at 16:18
  • It works, but that warning really bothers me - have you found a way around it?
    – rpadovani
    Apr 19, 2019 at 8:53
  • @rpadovani I'm not sure which warning you're referring to. Do you mean the one referenced in Jokester's answer? Apr 20, 2019 at 18:39
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.

2
  • 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. Jan 1, 2017 at 5:00
  • Found a way to do it in the config file, see answer below. Jul 7, 2017 at 0:43
4

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.

1

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.

TypeScript within the IDE recognizes the ThreeJS libraries

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.