Reogranization of examples into topic folders for more scalability/usability

[bhouston]

I'm having a hard time navigating through the ton of ThreeJS examples. That is amazing there is so many examples, but maybe we can introduced a hierarchical folder structure to make it a bit more manageable?

Sometime like:

examples
  \canvas
  \cpu
  \css3d
  \misc
  \raytracing
  \software
  \svg
  \vr
  \webgl
    \animation
    \buffergeometry
    \camera
    \custom_attributes
    \effects
    \geometry
    \interactive
    \lights
    \lines
    \loader
    \materials
    \morph
    \particles
    \performance
    \postprocessing
    \shader
    \shadow
  \webgldeferred

I'm proposing that in the directory tree we only create subdirectories when there is more than 2 items that can go in that folder. This prevents the creation of a lot of folder clutter.

One could rename the example HTML files to not include the folder names - this would shorten up the filenames as well. Thus if an example is the folder "webgl/postprocessing" it could just be called "glitch.html" as repeating the folder names in the filename is just unnecessary repetition.

I'd have to update the TOC auto-generator as well, but I think it should be easy.

This will result in broken links in Google to the threejs.org previous example urls, although it may be possible for the previous hash-based bookmarks on the TOC to still work.

Let me know if this is of interest.

[GGAlanSmithee]

I think this would be great. There are many examples already, and will probably be more as three.js evolves further.

[mrdoob]

I support this. I think the best approach step would be for us to define and agree on a list of renames.

Something like...

canvas_ascii_effect             canvas / effects / ascii
canvas_camera_orthographic      canvas / camera / orthographic
canvas_camera_orthographic2     canvas / camera / orthographic2
...

This list would also be helpful for converting the old hash-based bookmarks.

[GGAlanSmithee]

I like the RESTful-like style of that pattern, mrdoob. It's very intuitive and something that many web devs are used to.

[WestLangley]

I'm having a hard time navigating through the ton of ThreeJS examples.

What is the problem, exactly?

This will result in broken links in Google to the threejs.org previous example urls

And the many stackoverflow backlinks, too.

define and agree on a list of renames

The three.js examples often demonstrate multiple features or techniques. How do you determine the folder into which a particular example should be placed?

webgl_octree_raycasting.html
webgl_interactive_raycasting_pointcloud.html
webgl_geometry_terrain_raycast.html

[kurtbartholomew]

I'm curious about this issue. It doesn't look like there has been movement on reorganizing examples for 3 years. @mrdoob , do you still support reorganizing the examples? Or has your opinion changed to something similar like WestLangley's?

Just looking to help or clean up old issues. Thanks.

[looeee]

How do you determine the folder into which a particular example should be placed?

We don't need to do too fine grained. Even just WebGL, WebGL2, Audio, etc. would be a considerable improvement.

I support this, it's pretty annoying to have to scroll through so many files every time I open this folder.

[mrdoob]

I think we've already been doing this refactoring over the years.

[Mugen87]

I think this can be closed now. The examples are divided into different topics and it's also possible to filter examples based on a search term. On the web page as well as in editors/IDEs.