The answers to some questions contain some very interesting and instructive basic examples. These are difficult to find in the large number of questions on discourse.There are also good examples in resources and showcase.
Therefore I collected them and put them on one page, clearly arranged by time.
The collection may be a help for beginners.
These are links to the original pages. Only examples with code on jsfiddle, codepen, codesandbox, github and my own page are considered to avoid broken links.
@hofk Hello! I was noticing that the individual examples don’t have a date or forum post title listed with them. This would make it easier to find the examples in your index.
Is the code for the index open source somewhere so we can suggest modifications to add such features?
Everything is of course in the license like three.js itself.
I have to keep the workload on this thing to a minimum. See the discussions, links “Discussion about this side” at the bottom of * discourse.threejs.hofk.de.
With the extended examples I cannot guarantee the actuality.
For example, your example for “HTML-Buttons-Shadow” on eXtended eXamples currently works with Chrome, but not with Firefox.
Also I have to make a choice with the extended examples, it becomes more and more. I won’t post big projects, they are better found elsewhere.
If I find an example that is smaller but not so easy to copy, it will automatically become an extended example. It is possible to specify the links.
I collect the examples myself while reading and copy only the discourse link.
The editing (copy, addition of the HTML page) is done in irregular intervals. Sometimes there are then in the contribution already again other examples. There it becomes with the time sequence again an expenditure.
Sometimes there are contributions from previous years.
The wish list ( see Is it possible to add a button into the scene? - #11 by hofk ) can possibly be fulfilled by someone else. It is no problem to copy the existing years (there is also a complete download). The HTML pages are simple filled out lists of the elementary template lines above.
What I meant is, do you have a code repo? for example on GitHub? This would encourage and make it easier for anyone to suggest code changes to improve the site.
I’m imagining we can beautify it, organize the thumbnails into a nice grid (with information still visible), make the examples live code so editing code shows live updates, etc.
So would you like to put everything that is under https://hofk.de/main/discourse.threejs on GitHub to make it easy to propose changes? Or you’re not interested in that? EDIT: Oh, I just saw your private message after this. I can reply there.
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
“…/” 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.
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.