Challenge Overview
Challenge Overview
Three.js, a popular lightweight Javascript 3D library, is a new technology to our community. With Three.js, you create 3D objects and load 3D models on browsers, even interactive these objects by mouse and event, that means you can create a game based on Three.js on browsers!
Three.js is based on WebGL, the latest modern browsers support it well, especially for Chrome, Firefox, Safari.
Three.js is an interesting and useful technology. It becomes popular on Topcoder. We are running a Three.js challenge on Topcoder and will launch a good number of Three.js challenges in the future.
We are launching this fun challenge to introduce you to Three.js, so that you can make yourself comfortable for the upcoming challenges on Three.js.
Important Note:
This is a fun challenge. No prize money will be awarded for completing this challenge successfully.
10 T-shirts will be offered to submitters in top 10 placements.
Requirements for this challenge
As mentioned above, you can create a game by Three.js. So in this challenge, let’s make a simple game for fun.
See a screenshot of the full game first.
Here is a screencast of the game.
Looks interesting? It’s actually simple and easy to be done by Three.js. So let’s make it.
Game rules
-
Initially, place a 3D box and a start button.
-
Click the start button to start the game. A new 3D box appears and moving above the previous 3D box.
-
Click the screen or press the spacebar to place the moving 3D box on the top of the previous one. You should try to make the 3D box overlapped with the previous 3D box as much as possible.
-
Once the 3D box is placed, cut off the non-overlapped part, only the overlapped part remains.
-
The size of the next 3D box is exactly the same as the after-cutting-off size of the previous 3D box.
-
Keep placing new 3D boxes, the size of 3D boxes might be smaller and smaller, 3D boxes will move faster and faster. Once you missed, the game is over.
-
Once the game is over, you can restart the game by clicking on the screen.
What will you learn?
You will learn the following basic knowledge of Three.js from this challenge.
-
How to set up Three.js Scene, Camera. We’ll use OrthographicCamera in this game.
-
How to create 3D boxes by BoxGeometry.
-
Basic 3D mathematics, including 3D matrix (Matrix4), 3D translation.
-
What is light? How to light the scene. We'll use the directional light (DirectionalLight) to lighten the scene.
-
The basic Three.js app skeleton. How to start coding for a three.js app.
Learning steps
-
Learn the basic concepts of Three.js. You can follow the resources below.
-
Download the start-packer from the forum and start coding. Here are some notes
-
The start-packer code has set up the HTML, Scene, Camera and a basic 3D box.
-
The start-packer includes all dependencies, you can use it directly.
-
You can learn how to set up the scene and camera in src/stage.js.
-
You can learn how to create a 3D box in src/block.js.
-
You can refer to the configuration src/config.js file to get the numeric setting of this game.
-
It's not mandatory to start with the start-packer, you can create your own project from scratch.
-
Download the start-packer from the forum and start coding. Here are some notes
Scoring guideline
Let’s make a game, and play for fun!
The final score composes of 3 parts:
-
The completeness of the game. (40%)
-
Make a 1-minute video of the gameplay, show your score. (30%)
-
Luck! Luck! Luck! We will randomly rank all submitters and grant the score descendingly. (30%)
If you can’t finish the code, don’t worry, I’ll share a Heroku link 24 hours before the submission deadline, you still have an opportunity to get the score from part 2 and part 3.
I’ll provide the source code of the full game after the submission phase. So you will definitely learn how to make it eventually!
Enjoy Learning!
Final Submission Guidelines
Important Note:
This is a fun challenge. No prize money will be awarded for completing this challenge successfully.
10 T-shirts will be offered to submitters in top 10 placements.
Submit a zip archive, including
-
Your Three.js project of the game.
-
Your 1-minute gameplay video.
-
A README about how to deploy your code