Can't import .js files when using Atom Live Server

Hi ThreeJs Forum,

I am just starting to get into ThreeJs and trying to setup a local environment for development using Atom editor with the live server.

I created a test project and then tried to import some classes from three.module.js

My folder structure is:

test
|-index.html
|-src
|-main.js
|-vendor
|-three
|-build
|-three.module.js

I am trying to import the classes via:

import {
PerspectiveCamera,
MeshStandardMaterial,
WebGLRenderer,
} from “./vendor/three/build/three.module.js”;

But then I am getting an error message in the console:

main.js:6 GET http://localhost:3000/src/vendor/three/build/three.module.js net::ERR_ABORTED 404 (Not Found)

Any advice on where to put the files so that the atom live server can find it?

Thanks,
Christoph

404 means path/file not found. ./ is a relative url starting from this directory. if /vendor is not inside /src that’s your issue. but …

what you’re doing there is not how modules work. i know you just want to figure out the compile error, but that’s an extremely unusual setup and if you fix your issue, tomorrow you’ll bump into the next (for instance when you try to use controls or anything else from three/jsm). an editor does not “live serve”, probably why atom’s now deprecated. what you’re looking for is a bundler, for instance vite. npm create vite and you’re set up. you can then use whatever editor you want, their only job is to edit, and on safe changes are reflected in the browser without the editor having to use any additional services.

the correct way to import three is import { ... } from 'three'

1 Like

ok, thanks for the answer. Looks like I need to go through the npm setup then to get a better working environment. I’ll check this out

yep, follow the steps, then npm run dev, and open atom in that folder.

Hi drcmda,

I got vite running now. Another question though, where would I now store my actual project files like index.html and all subfolder so that I can get access via the local server?

vite will set up a functioning project for you. all these files are already there. cd into the project dir, open your editor and change these files to your liking. ps, you would typically not have a vendor folder, or a build folder, or copy threejs into your project. if you want to use three just type npm install three and now you can import it (in your js files). when you want to build: npm run build, it creates a folder that you can upload to your hosting service. this isn’t specifically vite, all bundlers work like that.