How to add Rapier to ThreeJS project? Can't access it once added... Tutorial not working (Solved)

Questions
1

I am trying to do something very simple - add Rapier to a basic ThreeJS project.

I built my ThreeJS project as per the documents, making an index.html and main.js file like they suggest and then running:

npm install --save three
npm install --save-dev vite

This all worked. I can make ThreeJS scenes easily now. However, I want to add Rapier and can’t.

As per this tutorial: https://www.youtube.com/watch?v=4Ly4_-KRNiQ

I added the “rapier3d-compat” package here via command line in my folder with npm i @dimforge/rapier3d-compat

This added to my packages.json so it says:

{
  "dependencies": {
    "@dimforge/rapier3d-compat": "^0.12.0",
    "three": "^0.163.0"
  },
  "devDependencies": {
    "vite": "^5.2.8"
  }
}

This seems fine up to now.

But then the instructions as per that video are then to in any js file write import RAPIER from '@dimforge/rapier3d-compat';. However, adding this line then gives me the error:

Uncaught TypeError: The specifier “@dimforge/rapier3d-compat” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “…/” or “/”.

So what am I missing? I note that in index.html I am supposed to have for local tests:

<script type="importmap">
		  {
		    "imports": {
		      "three": "https://cdn.jsdelivr.net/npm/three@v0.163.0/build/three.module.js",
		      "three/addons/": "https://cdn.jsdelivr.net/npm/three@v0.163.0/examples/jsm/",
			  "rapier": ""
		    }
		  }
		</script>

And if I take out those things for three and three/addons/ my project stops working. Why is this? Does this mean the project must download ThreeJS every time it runs from those web addresses? Is there any way to take out the web addresses so the project is not Internet-dependent?

And is there something I need to add there for Rapier to work? I am presuming that is the problem and skipped in the tutorial.

Isn’t the point of installing them that they should be accessible locally? How do I specify this?

If I try changing the import map to "three": "./node_modules/three/build/three.module.js", this also doesn’t work so it seems I can’t reference the package locally?

I see according to this the lack of a map for Rapier is probably the problem, but I can’t get it to work with unpkg as they suggest.

Loading in my browser https://unpkg.com/@dimforge/rapier3d-compat redirects to: https://unpkg.com/@dimforge/rapier3d-compat@0.12.0/rapier.cjs.js but using this in my map of index.html as "rapier": https://unpkg.com/@dimforge/rapier3d-compat@0.12.0/rapier.cjs.js and then going import RAPIER from 'rapier'; doesn’t work either.

I am running the tests using Visual Studio code Live Server addon.

Thanks for any help.

2

When does this appear? How are you running your project?

When using vite you should not have import maps and you should not import things from CDN via urls - remove those, otherwise you’ll get nasty conflicts.

1 Like
3

I am running my projects two ways:

  1. In Visual Studio Code there is a Live Server addon which lets you click a button in the bottom right to start a localhost port for the project and it runs nicely that way.

  2. npx vite then o to open does the same thing but by building the project.

I just tested and if I add import RAPIER from '@dimforge/rapier3d-compat'; to the top in my main.js and run with npx vite the project still loads. However, it will then no longer load in Visual Studio Live Server (I get the error in my browser console).

This likely makes sense from what I have further researched.

The documents explain this here. They state that if you are using a build tool you don’t need an import map but if you are running from a server without building you will need an import map with a CDN for the package.

Hence the:

<script type="importmap">
  {
    "imports": {
      "three": "https://cdn.jsdelivr.net/npm/three@<version>/build/three.module.js",
      "three/addons/": "https://cdn.jsdelivr.net/npm/three@<version>/examples/jsm/"
    }
  }
</script>

… they recommend which is what I guess allows me to use the VS Code Live Server.

So if I want to still be able to use both tools, I need a working importmap CDN method. Any ideas for what line might work there? I am trying to use this if it helps:

Thanks for your advice. I am starting to understand.

4

If you use vite you cannot use live server - use npm run dev instead, otherwise you’re not building the files and not including the dependencies.

If you want to use CDN - do not use vite and don’t use package.json / npm / import statements in code at all, CDN injects dependencies into the global scope, not as modules.

5

I’m not sure I understand entirely.

I understand certainly that when I use Live Server I am not building the project. But it DOES work both for Live Server and Vite to open and run my projects successfully when there is just ThreeJS in there.

I can use both and neither causes any problem. I am just not currently able to find any importmap option that works for Rapier.

Why would it work fine in both modes for Three but not Rapier? So I presume I just need to find a proper import reference for Rapier.

Currently I cannot make Rapier work by CDN at all. If I can figure that out that would be helpful. Any ideas how? I presume it should be possible. If Three works both ways why not Rapier?

6

JACKPOT. I found this link that provided a working CDN link:

They suggest there

https://cdn.skypack.dev/@dimforge/rapier3d-compat

Using that in my import map now works. So import map has:

"@dimforge/rapier3d-compat": "https://cdn.skypack.dev/@dimforge/rapier3d-compat"

and main.js has:

import RAPIER from '@dimforge/rapier3d-compat';

And I am now again working in both Vite and Live Server. :grinning:

All good. Thanks.

7

Here are two examples i’ve written recently that use importmaps from a CDN

in importmap

"@dimforge/rapier3d-compat": "https://esm.sh/@dimforge/rapier3d-compat@0.12.0",

in script

 import RAPIER from '@dimforge/rapier3d-compat'
1 Like