Unofficial Three.js contest to improve navigation on sites!

*** Lets begin unofficial contest to improve navigation on sites ! ***
( and especially on three.js page with examples )

You need to create a page that can render 100-600 thumbnails. Rules:

  1. it’s need to be scalable, flexible grid or mesh for current amount
  2. should work on mobile phones
  3. easy to deploy in current Three.js site with examples and be ready in 118 release (20 june should be ok).

It’s can be interactive for current searching filter, but may not, VR or XR, 3d or 2d, crazy or strict.
With current sidebar or not, but if not better to think about switching between examples. You can post here a weird stuff, but better to avoid general discussion.

The winner will get nothing, as always. Here an examples: 1 2

List of example names: https://github.com/mrdoob/three.js/blob/dev/examples/files.js
Screenshots for each example: https://github.com/mrdoob/three.js/tree/dev/examples/screenshots
Script that helps you to make a texture mapping: https://pastebin.com/rCKsqVnQ

Link event in discord: https://discord.gg/dkHT2wy

3 Likes

Your discord link sends me on an “invite” loop. This one might work better.

1 Like

OMG, thank you for the list of screenshots! I always end up running into a problem like: “What’s that example with the car made out of LEGOs?” and I can’t find it because I can’t remember to search for “loader / ldraw”. This makes browsing the examples much more intuitive.

This would be an ideal landing page when you visit the examples section, instead of always defaulting to #webgl_animation_cloth. Maybe I should open a ticket on Github as a suggestion.

BTW, some of your images don’t show the loaded content, just an empty scene:

1 Like

My screenshots with ball (2 link) and they with good models. But I also have some troubles, because I render all screenshots only for the first frame.

1 Like

Nevermind, it looks like this was fixed in subsequent versions:

@mrdoob they want a searching.

There are multiple open pull requests to update the examples page, but they kind of got bogged down in technicalities. I think the guy that was championing the grid layout got (understandably) frustrated after months of back and forth and gave up.

Here good lib, that can be used for this: https://github.com/felixmariotto/three-mesh-ui

1 Like

PR that solve issue with examples in Three.js directly, please leave your feedback https://github.com/mrdoob/three.js/pull/19375

1 Like

You will probably notice that if there is a prize, the quality of the submissions will most likely be much better. Is the case in most “contests”. Even something small. How about a ThreeJS custom T-shirt with a slogan? I have a few ideas:

1.) I finally learned how to merge geometry and I’m a year older. - ThreeJS
2.) I thought I took math in school but… “No you didn’t.” - ThreeJS
3.) Rotation or Quaternion? That is the question. - ThreeJS
4.) A real man is measured on the number of his draw calls. - ThreeJS
5.) I rendered my first scene and the internet shut down - ThreeJS
6.) You can lookAt( ME ) but you cant touch my buffers! - ThreeJS
7.) Wife wanted to talk about a problem. I told her to put in a Fiddle and I would get to it later. - ThreeJS

Would probably be good inventory for a ThreeJS store front too.

-Three Learning Curve survivor.
( #three too. #never give up.)

4 Likes

This will be in another event probably. We had a good prizes up to 1000$ in one event, but this was in local community and with sponsor who wanted solution for exact problem.

By the way, we solved problem with UI :sushi::ramen: