How about incorporating webpack, three.js demos, and typescript all together in one project?

Question

How about incorporating webpack, three.js demos, and typescript all together in one project?

I'm encountering difficulties when trying to integrate certain elements from threejs's examples, such as EffectComposer or Detector, with webpack and typescript.

Although the necessary *.d.ts files are installed using tsd, I am struggling to make webpack include files from the threejs examples/js/ directory.

When using three installed via npm, I am able to import THREE with:

import THREE = require('three');

This method works well, but does not provide access to the additional features I require. While there are other threejs packages on npm that bundle plugins, they seem incompatible with typescript (for example, require('three-js')(['EffectComposer']) causes issues with the typescript compiler).

Has anyone been successful in making elements from this package (such as postprocessing) work with typescript?

typescript three.js webpack

Answer 1

Answer №1

I have discovered a neat solution for configuring this in the webpack.config.js file.

Following Dan's advice:

$ npm install --save-dev imports-loader

It appears that we do not actually require exports-loader, as the constructors are added to the THREE object in the three.js examples.

Therefore, within the webpack.config.js file, we can implement a rule to include var THREE = require('three'); in an imported module whenever the module's path contains three/examples/js:

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

Now the example modules will recognize the global THREE object as expected.

To simplify the import process for examples:

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

Assuming that the webpack.config.js file is located in the same directory as node_modules, make adjustments if necessary.

Now, we can utilize the example files like this:

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

for importing the module for its side effects.

If you encounter warnings about the example module not being found on THREE when using Typescript and/or Babel, you might find this issue on the imports-loader repository helpful as a reference.

Answer 2

I have discovered a neat solution for configuring this in the webpack.config.js file.

Following Dan's advice:

$ npm install --save-dev imports-loader

It appears that we do not actually require exports-loader, as the constructors are added to the THREE object in the three.js examples.

Therefore, within the webpack.config.js file, we can implement a rule to include var THREE = require('three'); in an imported module whenever the module's path contains three/examples/js:

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

Now the example modules will recognize the global THREE object as expected.

To simplify the import process for examples:

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

Assuming that the webpack.config.js file is located in the same directory as node_modules, make adjustments if necessary.

Now, we can utilize the example files like this:

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

for importing the module for its side effects.

If you encounter warnings about the example module not being found on THREE when using Typescript and/or Babel, you might find this issue on the imports-loader repository helpful as a reference.

Answer 3

Answer №2

Here is the solution that successfully resolved my issue.

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

After installing the necessary loaders, I implemented the following code to utilize functionality from three/examples/js:

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

// Now, I can utilize THREE.OrbitControls ...

It is advisable to utilize the imports and exports loaders according to the configuration guidelines provided by webpack, instead of embedding them within the require statement. I will update this response with a practical example soon.

Answer 4

Here is the solution that successfully resolved my issue.

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

After installing the necessary loaders, I implemented the following code to utilize functionality from three/examples/js:

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

// Now, I can utilize THREE.OrbitControls ...

It is advisable to utilize the imports and exports loaders according to the configuration guidelines provided by webpack, instead of embedding them within the require statement. I will update this response with a practical example soon.

Answer 5

Answer №3

I successfully integrated OrbitControls into my project using webpack v2 and ts-loader without the need for any additional loaders.

Here is a snippet from my package.json file:

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

Within my entrypoint.ts file, I imported THREE from "three" and made it available globally:

import * as THREE from "three";

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

// NOTE: Make sure to require OrbitControls, do not import as it may execute before global THREE is available
require("three/examples/js/controls/OrbitControls");

// ... code that utilizes THREE and THREE.OrbitControls

It's worth noting that webpack may display a warning like

"export 'OrbitControls' (imported as 'THREE') was not found in 'three'

, due to OrbitControls.js not being a proper JS module. This warning can typically be disregarded.

Answer 6

I successfully integrated OrbitControls into my project using webpack v2 and ts-loader without the need for any additional loaders.

Here is a snippet from my package.json file:

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

Within my entrypoint.ts file, I imported THREE from "three" and made it available globally:

import * as THREE from "three";

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

// NOTE: Make sure to require OrbitControls, do not import as it may execute before global THREE is available
require("three/examples/js/controls/OrbitControls");

// ... code that utilizes THREE and THREE.OrbitControls

It's worth noting that webpack may display a warning like

"export 'OrbitControls' (imported as 'THREE') was not found in 'three'

, due to OrbitControls.js not being a proper JS module. This warning can typically be disregarded.

Answer 7

Answer №4

Regarding the integration of TypeScript and ThreeJS within your IDE, I will focus on that part of your question.

Most components can be found on the DefinitelyTyped archives. It is recommended to switch from using tsd to typing.

Below is a sample typings.json file that can be consumed by typing. It includes the latest main ThreeJS and the effect composer library for TypeScript recognition. Keep in mind that the commit hashtags may change as the .tsd version 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"
  }
}

An image is provided showing an IDE recognizing the public methods of the EffectsComposer. You can also explore different module loader capabilities of TypeScript.

https://i.sstatic.net/a7uPL.png

Answer 8

Regarding the integration of TypeScript and ThreeJS within your IDE, I will focus on that part of your question.

Most components can be found on the DefinitelyTyped archives. It is recommended to switch from using tsd to typing.

Below is a sample typings.json file that can be consumed by typing. It includes the latest main ThreeJS and the effect composer library for TypeScript recognition. Keep in mind that the commit hashtags may change as the .tsd version 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"
  }
}

An image is provided showing an IDE recognizing the public methods of the EffectsComposer. You can also explore different module loader capabilities of TypeScript.

https://i.sstatic.net/a7uPL.png

How about incorporating webpack, three.js demos, and typescript all together in one project?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The vertexUv in three.js is currently undefined and needs to be

What is the best way to confirm that a certain element is not present on the page using playwright?

Establishing specific categories for a universal element

Unable to locate a type definition file for module 'vue-xxx'

The GLTF 3D model failed to animate as expected

Guide on utilizing Three.js OrbitControl with several objects

"Firebase function fails to return Typescript class variable, resulting in 'undefined'

Using Tween animations with Three.js

How can Vue be used to dynamically change the input type on focus?

Is there a way to retrieve a compilation of custom directives that have been implemented on the Vue 3 component?

I'm experiencing a strange issue where my React component renders twice in production mode, despite having strict mode turned off. Can anyone advise me on

Is it possible to have an interface, function, and variable all sharing the same name in a declaration?

Incorrect form of SphereGeometry detected in three.js

TypeScript Library encounters issues when importing a specific data type

Combining various outcomes into a single entity for ion-slide in Ionic 2

Can I retrieve the return type of useFetch in Nuxt3?

Fixing the "Module not found" error in an Angular library using npm link

How come the inference mechanism selects the type from the last function in the intersection of functions?

Utilizing Generic Types in React TypeScript Functional Components

The ngFor directive in Angular should be used with the Filter pipe to ensure that