Import package does not work in three js

Questions
1

hi
I am new in three js and node js. i import three js as module and everything works. but when
I import the package does not work.
I use “import” and “require” and “script tag in index.html” for import but each one gives an error!

import Cannon from '/node_modules/cannon/build/cannon.min.js';
error: GET http://127.0.0.1:3000/node_modules/cannon/build/cannon.min.js net::ERR_ABORTED 404 (Not Found)

var cannon = require('cannon');
error: client.js:2 Uncaught ReferenceError: require is not defined

please help me!

app.js:

        const express = require('express')

        const app = express()

        const path = require('path')

        app.use(express.static(__dirname + '/public'))

        app.use('/build/', express.static(path.join(__dirname, 'node_modules/three/build')));

        app.use('/jsm/', express.static(path.join(__dirname, 'node_modules/three/examples/jsm')));

        app.use('/js/', express.static(path.join(__dirname, 'node_modules/three/examples/js')));

        app.listen(3000, () =>

          console.log('Visit http://127.0.0.1:3000')

        );

package.json:

    {

      "name": "physics",

      "version": "1.0.0",

      "description": "",

      "main": "index.js",

      "scripts": {

        "start": "node app.js",

        "test": "echo \"Error: no test specified\" && exit 1"

      },

      "author": "",

      "license": "ISC",

      "dependencies": {

        "cannon": "^0.6.2",

        "express": "^4.17.1",

        "three": "^0.122.0"

      }

    }
2

It looks like you used my basic threejs boilerplate at

To get cannon to work

npm install cannon

Add another app.use pointing to the cannonjs libs.

const express = require('express')
const app = express()
const path = require('path')
app.use(express.static(__dirname + '/public'))
app.use('/build/', express.static(path.join(__dirname, 'node_modules/three/build')));
app.use('/jsm/', express.static(path.join(__dirname, 'node_modules/three/examples/jsm')));
app.use('/cannon/', express.static(path.join(__dirname, 'node_modules/cannon/build/')))
app.listen(3000, () =>
  console.log('Visit http://127.0.0.1:3000')
);

And you can start to use cannonjs in your client.js

import * as THREE from '/build/three.module.js';
import { OrbitControls } from '/jsm/controls/OrbitControls.js';
import Stats from '/jsm/libs/stats.module.js';
import '/cannon/cannon.min.js';

const world = new CANNON.World();
world.gravity.set(0, -9.82, 0);

const scene = new THREE.Scene();
...

I have several cannonjs examples you can use for reference starting at https://sbcode.net/threejs/physics-cannonjs/

Also, in your original question code example at the top, you are also trying to include the /js/ threejs example libs.
You will have great difficulty mixing /js/ and /jsm/ threejs example libs. Use just /jsm/ if you are using ES6 import syntax.

1 Like
3

You may also want to check out the cannon-es fork of cannon.js, which supports ES6 Modules and import/export syntax better.

1 Like