Why I cannot import "three" module for TypeScript

Questions
1

I try to import ‘three’ in VSCode:

import * as THREE from "three";

But I see the message:

Cannot find module ‘three’

I installed ‘three’ using this command:

npm i three

My tsconfig.json file:

{
    "compilerOptions": {
        "module": "amd",
        "sourceMap": true,
        "target": "es5",
        "outDir": "public/js",
        "types": [
            "requirejs",
            "three"
        ],
        "lib": [
            "dom",
            "es2015"
        ]
    },
    "exclude": [
        "node_modules"
    ]
}
1 Like
2

When I use Babylon.js and Pixi.js I make same steps. Babylon.js and Pixi.js include .d.ts too. Maybe something broken in Three.js? I try to work with Three.js like I work with Babylon.js. I described my steps here: https://forum.babylonjs.com/t/debug-release-playground-using-babylonjs-and-typescript/3767

3

I attached my simple project example: getting-started-with-threejs-and-typescript.zip (5.8 KB)

You need to type:

npm install
npm run debug

My example just must print the Scene object. Please, try to compile it you your machine.

import * as THREE from "three";

class Program
{
    public static Main(): void
    {
        let scene = new THREE.Scene();
        console.log(scene);
    }
}

// Debug Version
Program.Main();
4

I had the same issue just now actually. Using AMD, I has to set

    "moduleResolution": "node"

under “compilerOptions”. It defaults to classic.

Also, I don’t exclude anything nor specify types. I include “src/**/*”… Not sure if that will make a difference, but I thought I better share that too.

2 Likes
5

Kotamigo, thank you very much. Your solution must be in the Three.js documentation, on Github: https://github.com/mrdoob/three.js/ and in the NPM page: https://www.npmjs.com/package/three Like it is with Babylon.js

Playground: https://next.plnkr.co/edit/YXLIamSsUH8k1E3r?preview

Source Code: getting-started-with-threejs-and-typescript.zip (388.4 KB)

You can use this commands to build debug (AMD/RequireJS) and release (CommonJS/Browserify/UglifyJS) versions:

"scripts": {
    "debug": "tsc -p tsconfig.debug.json",
    "compile": "tsc -p tsconfig.release.json",
    "bundle": "browserify public/js/Program.js -o public/js/bundle.js",
    "minify": "uglifyjs public/js/bundle.js -o public/js/bundle.min.js",
    "release": "npm run compile && npm run bundle && npm run minify"
},

tsconfig.json

{
    "compilerOptions": {
        "module": "amd",
        "sourceMap": true,
        "target": "es5",
        "outDir": "public/js",
        "lib": [
            "dom",
            "es2015"
        ],
        "moduleResolution": "node"
    },
    "include": [
        "src/**/*"
    ]
}
1 Like
6

Good idea! I think it would be useful to enhance the manual section of three.js’s documentation with a new page about TypeScript (e.g. Developing with TypeScript). This page could contain the contents of the tsconfig.json and maybe a FAQ section.

https://threejs.org/docs/index.html

Somebody interested in making a PR? :innocent:

2 Likes
7

I might be able to contribute something, but my build process for TS is a little goofy, so I need to review and fix that. https://github.com/DakotaLarson/BattleTanks-Client When I started this thing I thought it would be a good idea to keep code split in many small files vs the more traditional “bundle” method for code to better leverage http/2. I am sure 200+ requests now on each page load is less efficient than 1 large (but minified) request.

If someone else gets started on this, I think it might be good to include this somewhere as a way to load “extras” like OBJLoader2 when importing Three.js modules: https://github.com/DakotaLarson/BattleTanks-Client/blob/master/index.html#L662 Although this type of solution might deserve its own page.

1 Like
8

I use AMD and RequireJS for debugging in VSCode using Chrome Extension and for publishing my simple multi files TypeScript examples on Playground like Plunker Getting started with Three.js and TypeScript It is very important to know how to publish examples for questions. Everyone can Fork my example on Plunker and publish his example for question or for demo. It is like JSFiddle or Codepen but they allow to publish only one-file example in TypeScript.

I uploaded this example on GitHub: https://github.com/8Observer8/getting-started-with-threejs-and-typescript You can download it and type these commands:

npm install
npm run debug
http-server

And you can set breakpoints in VSCode.

For production/release version I bundle with Browserify and compress the bundle with UglifyJS. I have installed these modules globally only once:

npm i browserify uglifyjs -g

Now you can compile/browserify/minify using this command:

npm run release

But to run this example in release/production mode you need to go in the “Program.ts” file, comment the “Debug Version” line and uncomment “Release Version” line, like this:

// Debug and Playground-Plunker Version
// Program.Main();

// Release Version
window.onload = () => Program.Main();

Go to the “public/index.html” and make the same:

<!-- Debug and Playground-Plunker Version -->
<!-- <script data-main="js/RequireConfig"
    src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script> -->

<!-- Release Version -->
<script src="js/bundle.min.js"></script>