My current project involves showcasing 3D files online using ThreeJS. While it operates smoothly on Chrome and MS Edge, I encountered a hitch on Firefox:
Uncaught TypeError: Error resolving module specifier “three”. Relative module specifiers must start with “./”, “../” or “/”.
This issue pops up in GTFLLoader.js at line 64.
The snippet of my code causing the trouble looks like this:
<script type="module">
import * as THREE from 'https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="07736f756262473729363336">[email protected]</a>/build/three.module.js';
import {
GLTFLoader
} from "https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="71051903141431415f404540">[email protected]</a>/examples/jsm/loaders/GLTFLoader.js";
import {
OrbitControls
} from 'https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3c7dbc1d6d6f3839d828781">[email protected]</a>/examples/jsm/controls/OrbitControls.js';
import {
RoomEnvironment
} from "/wp-content/plugins/lc-plugin/public/js/libs/RoomEnvironment.js";
[...]
In trying to resolve the problem, I came across a discussion on Uncaught TypeError: Failed to resolve module specifier "three/examples/jsm/loaders/GLTFLoader.js"
An advice to incorporate an importmap was suggested. So I included this within my script:
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0b7f63796e6e4b3b253a3f3a">[email protected]</a>/build/three.module.js"
}
}
However, applying this change did not lead to any improvements. What steps should I take to rectify this? Despite looking into the GTFLoader.js code, the source of the problem appears to exist within the file. Could there be compatibility issues between ThreeJS and Firefox?