Build/three.js depreciation?

Questions
1

I’m using three.js in a small website.
To include it I use

<script src="https://threejs.org/build/three.js"></script>

I get this warning now
three.js:1 Scripts “build/three.js” and “build/three.min.js” are deprecated with r150+, and will be removed with r160.

I have read the docs which give a couple of alternatives going forward, but they are more complicated! These new options involve npm etc, and I don’t want to over-think it, but when I’ve tried VS code and offline development before I got stuck!
Currently I can just edit my code on my server. No complicated package managers required!

So my question is after this is depreciated, will it be more complex to include three.js?
Will the older three.js sources still be around which I can still link directly?

2

You can fetch any previous source from quite a few CDNs, ex.: cdn.jsdelivr.net/gh/mrdoob/three.js@r154/build/three.js (CDNs usually also allow you to specify which version you’d like to use, so your website doesn’t accidentally break with a new release of three.)

1 Like
3

You can still use the “esm” (module) builds, even without a package manager or build tools. You’ll just have to configure importMaps and maybe refactor some of your code.

Without going into too much detail, it is most likely still working fine. Although I’m not 100% sure if modules can be loaded over the file protocol :thinking:

1 Like
4

If you want to have everything simply on your server, the variant I use for my collection might be interesting for you.

See * discourse.threejs.hofk.de and there Module usage
( https://hofk.de/main/discourse.threejs/Module%20usage.pdf )

1 Like
5

I still write my three.js programs on an old HTML editor.

Here is a typical sequence of instructions that I use:

<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three@0.153/build/three.module.js", 
			"three/addons/": "https://unpkg.com/three@0.153/examples/jsm/"
		}
	}
</script>

<script type="module">

import * as THREE from "three";
import {OrbitControls} from "three/addons/controls/OrbitControls.js";

This will switch you to using modules.

And, as noted, if you want to use a specific version of three.js, you can designate that in the import section (the example above references r153). You can check the unpkg.com website to get the proper reference to the versions available.

The other advantage is that, as long as you are not loading something, you can run this kind of program locally. (Or if you want to load objects or textures, you can load examples from the three.js website - or from unpkg.com if they are available.)

3 Likes
6

Will these import statements work in an index.html file? or is a Nodejs command?

Im a bit confused what this importmap thing is too?

7

Yes, they work with an index.html file. The section between <script type = "module"> and </script> is where you are inserting the three.js code. Node.js is not required. Just an html editor.

The importmap thing is now the standard three.js protocol, used in all their demo program. If you want a more detailed explanation, you can find this topic discussed in several places on this website.

1 Like
8

Why is there there.js in r160

9

I’m not sure I understand your question/comment.

You can update the imports to refer to newer versions of three.js, such as r160.

You can also refer to the latest files on the three.js website. That way your program will be automatically updated to the latest version. But that is not recommended because some changes may break your program.