Help with NPM on simplified scenes?

I only recently started working with three.js and I love to dig into the details of how scripts work.
Allot of information I’ve found on three.js works great and I’m making progress in my endeavors.
However, I was intrigued by some of the warnings of certain functions that mentioned the transition to module imports. I’m a fan of over-complicated processes to simplify processes, but adding npm seems like more steps than just writing the code I need.
As I mentioned, I’m fairly new to three.js so I’m open to whatever I need to do to make a local file run corrctly. (background info: I’m creating a showcase that needs to be independent of internet connection)
Are there any good resources/guides for learning the proper way to get started with npm?

Thank you for your time!

I suggest you read the How to run things locally page because you’ll need to set up a local server to deliver textures, models, and other such assets. A lot of people think they can just point to an .html file in their hard drive, but that’s not the case with WebGL, you need to deliver assets via localhost if you want to run your application offline.

1 Like

I agree with @marquizzo that you will need a local server, at least. This doesn’t necessarily require an internet connection or NPM, though. Have a look at the (draft) documentation in this PR: https://raw.githack.com/donmccurdy/three.js/docs-installation-es-modules/docs/index.html#manual/en/introduction/Installation

The section about “Install from CDN or static hosting” should also work for you even if you don’t want to use a CDN or NPM — you can download the repository, then serve the build/ and examples/jsm/ folders locally and use exactly the same syntax as shown in those docs.

For example:

<script type="module">

  import * as THREE from './three/build/three.module.js';

  const scene = new THREE.Scene();

</script>
1 Like

On my page * discourse.threejs.hofk.de (see Collection of examples from discourse.threejs.org ) you will find below some links to the thing, which are suitable for beginners. Included there are links to posts on discourse. Try out the variants and see which one suits you. :slightly_smiling_face:

1 Like

I’m in no position to teach, but the responses (and Starter Project provided) to one of my questions helped me learn more about npm, modules, running a local server.

2 Likes

@Heiddo, @hofk, @donmccurdy and @marquizzo,
I certainly have much to learn about the possibilities and I really appreciate your help and pointing me in the right direction- Thank you, all!

I would suggest trying out https://codesandbox.io you can start working immediately and if you like it just download the project and you’re good. here’s an example: https://codesandbox.io/s/reurope-threejs-basic-kiow9 just import stuff that you need, it will automatically pull it for you and now you can use it.

npm is not complicated. but developing without it is. people that are going on without build tools often dont realize how complicated and time consuming their routine is. imo learning node, npm and build tools is more important than knowing js, at least in the beginning. perhaps even for the sole reason that without it you’re on your own, while the whole wide world is sharing code in a unified eco system.

1 Like

I had no idea this was available- Thanks for your help!