I am still learning about threejs and have mostly worked on projects using a dev server (vite) locally. This setup limited me to accessing my projects only from the browser on my computer. Here is how I typically include my files in these projects:
<body>
<script type="module" src="node_modules/three/build/three.min.js"></script>
<script type="module" src="node_modules/three/examples/jsm/controls/OrbitControls.js"></script>
<script type="module" src="GLTFLoader.js"></script>
<script type="module" src="myapp.js"></script>
</body>
While this method works well with the vite server locally after running npm run dev, I wanted to serve my project on the network using a python server so it can be accessed from a different device's browser:
python -m http.server --bind 172.16.0.0 9999
Unfortunately, I encountered some issues with this approach and couldn't quite pinpoint the reason for the failure. The errors displayed in Firefox are as follows:
Loading failed for the module with source “http://172.16.0.0:9999/node_modules/three/examples/jsm/controls/OrbitControls”. 172.16.0.0:9999:12:1
Loading module from “http://172.16.0.0:9999/node_modules/three/examples/jsm/controls/OrbitControls” was blocked because of a disallowed MIME type (“text/html”).
172.16.0.0:9999
Uncaught TypeError: Error resolving module specifier “three”. Relative module specifiers must start with “./”, “../” or “/”.
In myapp.js file, this is how I import OrbitControls:
import {OrbitControls} from "./node_modules/three/examples/jsm/controls/OrbitControls"
This is the sole import statement present in myapp.js. Any assistance would be greatly appreciated. Thank you!