Collection of examples from discourse.threejs.org

[Victor_M_Barba]

Hello: I am very new at threejs, but I really like it a lot!
I just got the Collection of examples from discourse.threejs.org…
I download and open the folders. I just double click on the .html file and some of them work, and some don’t… the DraggingObjects.html on folder 2019
works fine when double click on my computer…
but if I upload it to my server to see it on my web-page… it doesn’t work

I don’t change anything, why is not working on my site: http://songnes.com/g/DraggingObjects.html
and why some of them work, and some don’t

it has to do with this?:

[hofk]

@Victor_M_Barba

I don’t change anything, why is not working on my site: http://songnes.com/g/DraggingObjects.html

The console shows
ReferenceError: THREE is not defined

You must respect the structure of the folders.

See
script src="…/js/three.min.106.js"
in source code.

Or it is something with the configuration of your server?
See note @amitlzkpa How to add a .png texture to a cube

---

By the way, have you read this book? https://discoverthreejs.com/ by three.js co-author and moderator looeee

[Victor_M_Barba]

Thank you for that, but I guess that was my question…
script src="…/js/three.min.106.js"

when it says “…/” it means from somewhere …
where do I get that file, so I can upload it into my server

http://songnes.com/js/threeJS/three.min.106.js <------ here

when I go to github, I don’t know how to get the actual file…
is there any place I can go and just download it easy…

thank you!

[hofk]

Actually this does not fit into this topic, but since other beginners may have similar problems, here are some explanations.

---

If you download the zip-file from * discourse.threejs.hofk.de you will get all necessary things in the folder structure I use.

If you look in the source code of
DraggingObjects
you see

“…/” does not mean somewhere, but means “go to the next higher level folder”.

Then it says “js/”, so together “…/js/”

So you will find the file three.min.106.js in the folder js in the next higher level folder.

If you unzip the zip file, you will have many folders with the examples in the folder of the year.

If you look carefully, you will also find the folder js. The short name is often used for JavaScript scripts.

Open the folder and you will see the files I needed for the examples in this particular year.

If you put examples on your server, you either need to create the folder structure like mine, or you change the path to access the files.

In one of your examples I have seen:

So you have your own structure /js/threeJS/ , which you probably always choose. You should be a bit constant there, otherwise you get mixed up easily.

---

Sometimes I see examples where the version of three.js is not clear to me, or the author has changed three.js. This is allowed. Then I just copy the file.

Just click on the .js link in the source code and the file will be displayed in the browser. Copy with Ctrl + C and paste it into your own code editor with Ctrl + V .

Now you can name the file correctly and copy it into your appropriate directory.

A statement (GetSources) was added below.

---

---

With the module version it gets a bit more complicated for beginners.

See

Importing Three.js as module

Im learning three.js and are setting up my first project. Im basically running the example code from three.js website. It works fine when running three.js from a folder like: js/ directory but I cannot get it to run when importing it as a module. Im installing the module with: npm i three And running it as a local server by installing: npm install http-server -g and then running my file test.html on port: 8000 http-server . -p 8000 http://localhost:8000/test.html Here is the full co…

Module Import / Usage

Hello I start work with three.je some years ago. Many things has changed since then. Now three is imported as module. and I am confused about including three.js into a project. How does it work? I’ve downloaded three.js from github. I now have a bunch of directories. I can see examples and open them. But, when I try to import three.modules.js and e.g. OrbitControls.js I get an error message, because of missing dependencies. How a directory should look, who’s three completely in it, but withou…

Further information can be found at the bottom left corner of
* discourse.threejs.hofk.de – Module usage

[Victor_M_Barba]

Thank you. I got the first part…

I will read the module explanations!!!

[hofk]

Changes for 2018

---

Since 2018 the restrictions in the browsers have been tightened. Therefore the example VideoProjection and the underlying fiddle did not work anymore.

A play button was added.

---

In the example ChangeTextureByTime I had forgotten to copy the textures. Meanwhile the texture UV_Grid_Sm.jpg no longer exists on threejs. org examples textures.

Replaced by uv_grid_opengl.jpg

---

Please also download and replace the corrected file 2018.zip if necessary.

[hofk]

UPDATE 2020 See original post.

The note on local use of the examples has been adapted with regard to the use of ES 6 modules since 2020.

---

I have presented a very simple variant suitable for beginners. But I can only test it for Windows 10. If someone should test and briefly describe a correspondingly simple variant for other operating systems (with Apache?), I would like to add this.

[hofk]

Happy and healthy New Year.

And the collection of last year’s examples is now available as a zip file. See original post.

---

This year @prisoner849 contributed more than 40 basic examples to the Collection of examples from discourse.

More than any other author.

By doing so, he has helped many users. For this he deserves a lot of thanks.

There are also excellent things from him in the extended examples.

Thank you, keep up the excellent work!

[prisoner849]

Thanks, Klaus
As I said before, it wouldn’t be possible without our great three.js community

[mjurczyk]

I just noticed it and would like to just ask for the Hypnotising Ever-Rotating Squirrel of The Beginner Example to not be removed or tampered with during the further constructions - as it is absolutely perfect in every way. :’)

[hofk]

Have you ever worked on the task and put // in front of the line?

gltf.scene.position.set( -c.x, size.y / 2 - c.y, -c.z );  // put // in front of this line, try it out

[mjurczyk]

@hofk

Have you ever worked on the task and put // in front of the line?

Nope - I bet putting // in front of that line would make the squirrel disappear and I’m not falling for that.

Btw, is the Almighty Omniorbitational Squirrel and the code part of an upcoming tutorial / guide ?

[hofk]

Wrong guess.

@mjurczyk

Btw, is the Almighty Omniorbitational Squirrel and the code part of an upcoming tutorial / guide ?

The code is the tutorial itself. From practice I know that beginners want to experience visible successes quickly. And do not want to read pages and pages of theoretical introductions. Also too many hints, what else you can do, distract too much at the beginning and confuse.

Therefore only the links, so that one can read up with interest.

[mjurczyk]

One thing I’m curious about (or maybe a suggestion?) - browsing the page, both examples and the Home of The Squirrel, it’s very easy to see the result you mention - is there some obvious way to see the source ? (I 100% blind, so I might be missing something super obvious )

Is there a way to see sources of the examples / squirrel without opening the devtools (like in three’s official examples, the bottom-right button) ?

[hofk]

and also to the original codes (jsfiddle, codepen …)

More effort I can’t do, see

---

@mjurczyk

without opening the devtools

I just take Ctrl + U and see the copied code and the links above. In the script again the author.

[hofk]

Supplemented

[hofk]

Changed on a hint, it was for Windows only.

[sagir]

thank you hofk, your collection is super

[ibty]

hi , i saw your example and is a good work , just i try to remove select part and i didn’t find how , any suggestion

[hofk]

@ibty

i try to remove select part and i didn’t find how

I don’t know exactly what your problem is.
The collection has many examples, only some are from myself.

Do you perhaps mean the beginner example on the main page?
BeginnerExample

“select part” ? - What are you trying to remove?