Import Three and GLTFLoader

Question

I need help, when I just import THREE I don't have a problem but when I add the GLTFloader import I have this error message in my console:

Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".

my code :

import * as THREE from "./node_modules/three/build/three.module.js"

import { GLTF, GLTFLoader } from './node_modules/three/examples/jsm/loaders/GLTFLoader.js';

I tried several writers but I still have the same problem

Answer 1

First of all, you clearly need to use a web bundler. Formerly, I was using Webpack and it was working just fine. However, Vite is my go to now! So, which you chose depends on your past experience (if you had used one of them) and the way you love it. Below are two links that will help you.

---

Using Webpack: https://abi-web-app-documentation.readthedocs.io/en/latest/three/tutorial_2/threejs_with_webpack.html

https://sbcode.net/threejs/webpack-dev-server/

---

Using Vite: https://medium.com/@alejocain/13-creating-a-canvas-with-threejs-and-vite-6792eab50967

https://faun.pub/how-to-make-your-first-three-js-project-with-vite-javascript-d6aa2e99e92c

---

The Docs: https://threejs.org/docs/#manual/en/introduction/Installation