CODEWITHSUNDEEP
three.js
Javi Fontalva
Javi Fontalva

Reputation: 11

How can I fix three.js loading issues?

enter image description here

enter image description here

I am having issues adding the three.js libraries. Can anyone help me?

Upvotes: 1

Views: 497

Answers (2)

naticarl
naticarl

Reputation: 1

I had the same problem and this worked for me. It uses CDNs, but at least it works (also for firebox):

<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
    <script type="importmap">
        {
          "imports": {
            "three": "https://cdn.skypack.dev/[email protected]/build/three.module",
            "three/": "https://cdn.skypack.dev/[email protected]/"
          }
        }
    </script>
<script src="szene2.js" type="module">  </script>

In your javascript:

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';

Upvotes: 0

Mugen87
Mugen87

Reputation: 31026

According to your error message, you are missing to define an import map in your index.html. Do it like so:

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>

<script type="importmap">
    {
        "imports": {
                "three": "./three/build/three.module.js"
        }
    }
</script>

You can then change the THREE import to:

import * as THREE from 'three';

The error is actually produced in your example files since OrbitControls and GLTFLoader use the bare import specifier three. So without an import map, the browser can't resolve the specifier.

Upvotes: 1

Related Questions