[Webstorm 2021.1] NPM module import not working (three.js)

I am trying to try out three.js. I installed it with NPM, added it to package.json, in a basic webstorm project. Using the following html, there are no errors but WebGLRenderer or anything else in three.js module, is "unresolved type". WS offers to import Typescript definitions but it can't find any. Clearly I am missing something important.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script type="module">
import * as THREE from "three";
function main()
{
const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({canvas});
}
</script>
<canvas id="c"></canvas>
</body>
</html>
5 comments
Comment actions Permalink

Works fine for me, types are correctly resolved from node_modules/three/build/three.module.js:

0
Comment actions Permalink

Something you did is different, but I can't figure out what.

0
Comment actions Permalink

I reloaded webstorm and it worked. It's been running for a couple weeks, perhaps there is some kind of issue with that.

0
Comment actions Permalink

This doesn't work at runtime because the browser doesn't understand the module reference, which led down a long path of Webpack and babel and I don't want to do all that to try a simple demo. I tried to load three.js from a CDN but webstorm does not understand the urls. How can I both get Webstorm to code complete three.js and get it to work in a browser over http?

<script type="module">
import * as THREE from "https://cdn.skypack.dev/pin/three@v0.128.0-FqqdQBPsDVJuf7F4I6W0/mode=imports/optimized/three.js"
</script>
0
Comment actions Permalink

Try installing three.js typescript stubs by running npm i @types/three in your project folder.

1

Please sign in to leave a comment.