Don't know how to import three.js in project : THREE is not defined

Questions
1

Hello,

I’m following the tutorial by Matthias Müller on Youtube, specifically https://www.youtube.com/watch?v=j84zJ06wnVA

In his videos, he imports three.js with

but the HTML file loads forever in Firefox, so I guess this way of doing is wrong.

I installed three.js in my project directory with ’npm install --save three’ and put in my HTML file this code:

// scene ----- var threeScene; var renderer; var camera; var cameraControls; //simulation ----- function simulate() { } // ----- function initThreeScene() { threeScene = new THREE.Scene(); but either the page loads forever or I get a “THREE is not defined” error. I’m very new to npm and three.js, can anybody help me there? Thanks! F. Delente
2

The video shows the old way.

  • Go to https://generator.jspm.io.
  • Input “three” in the input box and hit enter.
  • In the toolbar with the toggle switches, click on “jspm.io” and change it to “jsdelivr” (or not, you can test and choose the CDN that you prefer. JSDelivr supports GitHub URLs with commit hashes for versions, for example)
  • finally, you should see this piece of code:
  <!--
    Import map generated with JSPM Generator
    Edit here: https://generator.jspm.io/#U21hZGBkDM0rySzJSU1hKMkoSk11MNAztDDSMwAAwygQfBwA
  -->
  <script type="importmap">
  {
    "imports": {
      "three": "https://cdn.jsdelivr.net/npm/three@0.182.0/build/three.module.js"
    }
  }
  </script>

Put that into your HTML file. In fact, you can see there that it shows you a sample HTML file that you can start with.

Next add your (module) script with your code to use THREE, like follows (type=“module” enables import syntax):

<script type="module">
  import * as THREE from 'three'

  console.log( THREE.Scene )
</script>

You don’t have to put everything in THREE, you can import individually if you prefer:

<script type="module">
  import { Scene } from 'three'

  console.log( Scene )
</script>

In total, the full HTML file may look like this:

<html>
  <head>
    <!-- ... stuff like the title ... -->
  </head>

  <body>
    <!--
      Import map generated with JSPM Generator
      Edit here: https://generator.jspm.io/#U21hZGBkDM0rySzJSU1hKMkoSk11MNAztDDSMwAAwygQfBwA
    -->
    <script type="importmap">
    {
      "imports": {
        "three": "https://cdn.jsdelivr.net/npm/three@0.182.0/build/three.module.js"
      }
    }
    </script>

    <script type="module">
      import * as THREE from 'three'

      console.log( THREE.Scene )
    </script>
  </body>
</html>

The order of those two scripts matter. The importmap has to go before the module, or the import statement won’t find three.

If you see docs and example and you want to add more things like three/webgpu, three/addons/..., etc, you can

1 Like