Four three.js projects - Sliding Puzzle, Thumb Raiser (a maze) and two basic 2D programs (a World clock and an advanced version of the old Pong game)

[jpp]

1 - Sliding Puzzle: Sliding Puzzle

Key features:

• Easily configurable (either in default_data.js file or, preferably, in *.html file)
• Difficulty: from 2x2 to 10x10 puzzle
• Two-sided: numbers (front side) and images (back side)
• 22 different images: 21 of them are plain images (mostly landscapes) and are randomly sorted when the program starts; the remaining one is an interactive, animated image (the Earth model); it’s always the first one to show up
• Camera controls: both the puzzle camera (either by direct manipulation or through widgets) plus the Earth model camera (when selected, by three.js OrbitControls + Ctrl key); the puzzle camera projection is selectable (perspective or orthographic)
• Audio: randomly selected cheering whenever the player solves the puzzle
• Sprites (used as tips on the back side - image side - of the puzzle)
• Help and credits

2 - Thumb Raiser: Thumb Raiser (10 x 10)

Key features:

• Easily configurable (either in default_data.js file or, preferably, in *.html file)
• Difficulty: many different-shaped and -sized mazes (defined in JSON files)
• Cameras: up to five simultaneous (x2) different views: fixed-, first-person, third-person, top-view, and mini-map; controllable either by direct manipulation or through widgets); cameras projections are selectable (perspective or orthographic)
• Realistic view mode
• Viewport direct manipulation: draggable and resizable, with cursor changes
• Audio: randomly selected and configurable global and positional audio clips
• Two different collision detection algorithms: OBB (character) with AABBs (maze walls); and BC (bounding cylinder - character) with AABBs (maze walls); the former was implemented with three.js classes; the latter by measuring distances between the character and the maze walls
• Help and credits

Note: I’m thinking of creating a class that easily allows programmers to register and manipulate (drag and resize) viewports, but I haven’t had the time to do it yet

3 - Interactive world watch, a basic 2D project I created to learn three.js: Interactive Watch

Key features:

• Easily configurable

4 - An advanced version of the old Pong game, another basic 2D project I created to learn three.js: Pong

Key features:

• Easily configurable (either in default_data.js file or, preferably, in *.html file)
• Pads can move not only up and down, but forth and back as well
• Players can control the ball direction, speed, and spin
• The ball speed and spin decrease with time (friction)
• Whenever a player scores, his/her pad gets smaller but faster
• Whenever a player concedes, his/her pad gets bigger but slower

Check *.html files in Index of /~jpp/threeJS for more configurations.

A final note: Every project allows you to decide whether you want to set the device pixel ratio or not; setting it may produce sharper graphics (in case you have a HiDPI device), but it’s possible that the frame rate drops down. You can configure this option either in default_data.js files or, preferably, in *.html files.

Hope you enjoy.

[PavelBoytchev]

Thanks for sharing these classic games. I’ve never seen such additional control panels for a Puzzle 15 game. Have you considered rotating the scene by the mouse?

The Thumb rider split view into viewports is interesting and also the realistic view mode was fun. Two observations:

• the when the player hits a wall and falls back, it can fall through a wall.
• how to show back the user interface after hiding it?
  

I loved the comments in the Interactive watch - especially the three options for making a circle. Too many people skip writing comments. My only suggestion for improving the reading of the code is to use color names instead of color values, i.e. 'white', 'black', 'red' instead of 0xffffff, 0x000000, 0xff0000.

And finally, the pong game has some unexpected ball motion – it curves and makes the game more intriguing. The comments are also good, especially the ASCII tables. However, some comments are not necessary, as they just duplicate the code, e.g.:

// Display the score
this.displayScore();

[jpp]

Hi Pavel Boytchev

Thanks for your comments. Answering your questions:

I’ve never seen such additional control panels for a Puzzle 15 game. Have you considered rotating the scene by the mouse?

1 - By “scene” do you mean the whole puzzle or just the Earth model? You can control the whole puzzle camera (orbit, dolly and zoom) either by interacting with the widgets (HTML elements) on the upper side of the screen or with the mouse; and you can control the Earth model camera with the mouse, used in conjunction with Ctrl key. I designed the first camera controls (widgets + mouse interaction) from scratch, because at the time I wasn’t aware of the existence of the OrbitControls addon. Earth model camera controls does already rely on OrbitControls class (orbit and dolly; pan is disabled). Thumb Raiser’s camera interaction also rely on my camera controls.

The Thumb rider split view into viewports is interesting and also the realistic view mode was fun.

2 - Realistic view mode: if you turn on the flashlight, since it is mounted on the robot’s head, you will notice realistic view mode not only in first-person view, but in other views as well.

When the player hits a wall and falls back, it can fall through a wall.

3 - You’re right. The main character (RobotExpressive) comes with a fall-back animation, but it doesn’t include a fall-forward one. It wasn’t designed by me (check the game’s help and credits panel). Maybe the original creators, Tomás Laulhé and Don McCurdy will read us and consider creating such an animation!

How to show back the user interface after hiding it?

Press the “U” (from "User interface) key on the keyboard. Again, please check the games’ help and credits panel (“H” key). It will give you details on both the mouse and keyboard available actions.

I loved the comments in the Interactive watch - especially the three options for making a circle. Too many people skip writing comments.

However, some comments are not necessary, as they just duplicate the code, e.g.:

// Display the score
this.displayScore();

4 - I must confess that I too have the nasty habit of skip writing comments. But since these projects were created with the specific purpose of teaching computer graphics (and three.js) to students, I decided to comment the code. Sometimes I exaggerated, like when I wrote the “// Display the score” comment you mentioned…

My only suggestion for improving the reading of the code is to use color names instead of color values, i.e. 'white' , 'black' , 'red' instead of 0xffffff , 0x000000 , 0xff0000 .

5 - I decided to use color values instead of color names, because it is the recommended way by three.js developers of initializing colors (please check three.js docs). Besides, I don’t know by heart every color name, but I have an idea of their hexadecimal RGB values.

The pong game has some unexpected ball motion – it curves and makes the game more intriguing.

6 - Regarding the Pong game “intriguing” interaction:

• Players can control the ball direction by choosing the point where the ball hits the pad: if it hits the upper part of the pad, it goes up; if it hits the lower part of the pad, it goes down. The direction angle grows with the effective distance between the hit point and the pad’s center.
• Players can control the ball speed by moving the pad forth and back: if they are moving forth when they hit the ball, the speed increases; if they are moving back when they hit the ball, the speed decreases.
• Players can control the ball spin by moving the pad up and down: if they are moving up when they hit the ball, the ball spins in one direction; if they are moving down when they hit the ball, the ball spins in the opposite direction. Please check this effect here: Magnus effect - Wikipedia.

The comments are also good, especially the ASCII tables.

7 - By ASCII tables you mean the comments describing the data structures in the beginning of most JavaScript files? In case you do, I just followed the procedure adopted by some three.js developers. It helps programmers (and students) in recalling objects’ properties, especially when they get too long and complex.

Again, thank you for your feedback. Best regards,
JPP