ico-magnifying_glass
    ico-arrow-big-left

    Three.js - Fun Challenge - Tower Stack game

    PRIZES

    1st

    $0

    Register
    Submit
    The challenge is finished.
    Show Deadlinesicon-arrow-up

    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.

    https://youtu.be/jZ7ut1ONigg

    Looks interesting? It’s actually simple and easy to be done by Three.js. So let’s make it.

    Game rules

    1. Initially, place a 3D box and a start button.

    2. Click the start button to start the game. A new 3D box appears and moving above the previous 3D box.

    3. 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.

    4. Once the 3D box is placed, cut off the non-overlapped part, only the overlapped part remains.

    5. The size of the next 3D box is exactly the same as the after-cutting-off size of the previous 3D box.

    6. 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.

    7. 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.

    1. How to set up Three.js Scene, Camera. We’ll use OrthographicCamera in this game.

    2. How to create 3D boxes by BoxGeometry.

    3. Basic 3D mathematics, including 3D matrix (Matrix4), 3D translation.

    4. What is light? How to light the scene. We'll use the directional light (DirectionalLight) to lighten the scene.

    5. The basic Three.js app skeleton. How to start coding for a three.js app.

    Learning steps

    1. Learn the basic concepts of Three.js. You can follow the resources below.

      1. Official getting started guide.

      2. Youtube video tutorial - The Three.js basics

      3. The beginner guide to Three.js

    2. 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:

    1. The completeness of the game. (40%)

    2. Make a 1-minute video of the gameplay, show your score. (30%)

    3. 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

    Reliability Rating and Bonus

    For challenges that have a reliability bonus, the bonus depends on the reliability rating at the moment of registration for that project. A participant with no previous projects is considered to have no reliability rating, and therefore gets no bonus. Reliability bonus does not apply to Digital Run winnings. Since reliability rating is based on the past 15 projects, it can only have 15 discrete values.
    Read more.

    REVIEW STYLE:

    Final Review:

    Community Review Board
    ?

    Approval:

    User Sign-Off
    ?

    CHALLENGE LINKS:

    Review Scorecard