Import * as THREE from 'three';

Questions
, ,
1

I have installed three.js through nom but when I use the statement Import * as THREE from ‘three’; I get a TypeError message saying 'failed to resolve module specifier “three”. Relative reference must start with either “/”, “./”, or “…/” '. Please help how can I resolve this issue?

1 Like
2

Please see the installation guide. When installing through NPM you must use a build tool. If you prefer not to use a build tool, see the section on CDNs and import maps.

1 Like
3

A build tool is not necessary with npm either. But then you have to specify the paths in absolute terms. If you work locally with the live server in visual studio code then e.g. so:

<!DOCTYPE html>
<html>
	<head>
		<title>WebGPU App</title>
		<meta charset="UTF-8" />
		<link rel="shortcut icon" href="#">	
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" typ="text/css" href="resources/css/style.css">
		
		<script type="importmap"> { 
			"imports": { 
				"three": "/node_modules/three/build/three.module.js",
				"three/addons/": "/node_modules/three/examples/jsm/",
				"three/nodes": "/node_modules/three/examples/jsm/nodes/Nodes.js" 
    		} 
		}     
		</script> 
	</head>

	<body>

		<script type="module" src="./src/main.js"></script>
    
	</body>
</html>

And then in your main.js:

import * as THREE from 'three';

projectFolder
  |
  |-node_modules
  |      |-three
  |
  |-resources
  |      |-css
  |         |-style.css
  |
  |-src
  |  |-main.js
  |
  |-index.html

So you just have to install three.js with npm in your project folder in visual studio code and then the node_modules folder with three.js will appear.

I did it on this way myself for the first time a few weeks ago, as I familiarized myself with importmaps.

The reason why I do it locally on this way is that I then have a very small project folder with only the most necessary things.

1 Like
4

keep in mind that this only works for esm that is correctly implemented and declared as such. the majority of packages out there are cjs or incorrectly declared esm (mostly because the spec is hard to navigate). in the end i think saying npm requires a build tool is the least stressful, it just works and is easy to do. working without otherwise requires all your dependencies to be esm, including your dependencies’ sub dependencies and that’s something that rarely if ever happens.

another thing that may not be a burden to the dev but to the end user, bundle size. w/o build tool you’d ship megabytes of javascript towards the end user, which practically eliminates mobile usage. the build tool will try to strip un-used code away via tree shaking.

1 Like
5

Of course you are right! What I’m doing there only works with restrictions.
I usually use vite for frontend development and webpack in general.

But since I’m not allowed to install Vite on my Android tablet because of the operating system, I did it this way because I didn’t feel like switching on my desktop to do a setup there and then transfer it to my tablet via cloud.
It’s annoying that I’m not allowed to install Vite in a project folder on my tablet, but I can download a project folder with Vite installed. So I quickly added the paths and was then able to work on my tablet on the sofa.
So that was due to my convenience :sweat_smile: