Learning Pathway for 3D Coding
-
Introduction
The CreatiCode Playground provides a powerful and intuitive set of blocks designed specifically for 3D projects. These blocks are built on top of Babylon.js, a cutting-edge 3D engine developed by Microsoft, making it easier for students to create and experiment with 3D environments.
While CreatiCode has streamlined the process of 3D coding, it remains more complex than 2D coding due to several factors:
- Vast Scenes: Unlike 2D, where objects are confined to a flat plane, 3D projects operate in a vast, three-dimensional space. This means there are more elements to manage, and understanding how to navigate and position objects in this space is essential.
- Advanced Rendering: The 3D rendering engine used in CreatiCode is incredibly powerful, but mastering it requires a deeper understanding of concepts such as lighting, textures, and camera angles.
- Complex Collision Handling: Managing collisions between objects is far more intricate in 3D, as it involves considering all three axes (x, y, and z) and dealing with more complicated shapes and movements.
- Additional Features: Tools like physics engines and particle emitters can enhance projects with realistic movements and effects. However, using them effectively demands additional skills and learning.
For those new to 3D coding, we recommend exploring a series of tutorials and projects designed to guide you through the basics. These resources will help you build foundational skills, step by step, making it easier to navigate the complexities of 3D environments.
Teachers can also use these tutorials to develop an introductory course, allowing students to gain hands-on experience with 3D coding and build confidence in their abilities.
Topic 1 - Initialize a 3D Scene
-
Tutorial Link: Initializing a 3D scene
-
Overview: Every 3D project starts with a 3D scene, which is a virtual world where all objects reside. There are many pre-made 3D scenes that can be used, such as city or grassland.
Topic 2 - Using Orbit Cameras to View the Scene
- Tutorial Links
- Overview: Every 3D scene is infinitely large, so we can only view a portion of it using a camera, just like how we watch a TV broadcast of a football game. It would help if you learned how to view any part of a scene using a camera manually or with code and how to configure the camera’s parameters. The “orbit camera” is a very simple camera, which is like a satellite that orbits around an object.
Project Idea - Go Around the Globe (Difficulty: 1)
- Tutorial Link: Go Around the Globe (Difficulty: 1)
- Overview: Control the camera to orbit around the globe
Topic 3 - Create Your Own 3D Avatar
- Tutorial Links:
- Overview: Most 3D games or stories would need 3D avatars to represent the players in the 3D world. You can use a free tool to create an avatar of your own and customize its looks (optional). After that, you can load your own avatar or any avatar from the CreatiCode library into the 3D scene.
Topic 4 - Make Avatars Play Animations
-
Tutorial Link: Avatar Animations
-
Overview: After an avatar is added to a 3D scene, you can “teach” it new animations, such as “Run” or “Fly”, then it can play these animations.
Topic 5 - 3D Axis and 3D Boxes
- Tutorial Links:
- Overview: Besides avatars, you can also add all kinds of 3D shapes into the 3D scene, and the simplest shape is a 3D box. You will also learn to use the 3D axis to determine the X/Y/Z dimensions. Note that the Z-axis points up in the 3D scene.
Topic 6 - 3D Positions
- Tutorial Link: 3D Coordinates and Positions
- Overview: To place a 3D object anywhere in the 3D scene, you need to know its 3D position, which is specified as its (X, Y, Z) coordinates.
Project Idea - Rubik’s Cube (Difficulty: 2)
- Tutorial Link: Rubik’s Cube (Difficulty: 2)
- Overview: Create a 5x5x5 Rubik’s cube using boxes
Project Idea - 3D Art with Random Boxes (Difficulty: 2)
- Tutorial Link: 3D Art with Random Boxes (Difficulty: 2)
- Overview: Create a colorful scene of many boxes at random locations, with random sizes and colors.
Topic 7 - 3D Rotations
-
Tutorial Link: 3D Rotations
-
Overview: You can make a 3D object face any direction in the 3D scene by rotating it around the X/Y/Z axis.
Topic 8 - 3D Spheres
-
Tutorial Link: Using Spheres
-
Overview: Similar to boxes, sphere shapes are very useful for composing simple scenes. In addition, a 3D sphere does not have to be complete, which allows you to create interesting shapes using part of a sphere
Project Idea - A Pokeball (Difficulty: 1)
- Tutorial Link: A Pokeball (Difficulty:1)
- Overview: Compose a Pokeball using a few spheres.
Topic 9 - 3D Models
-
Tutorial Link: Adding Models
-
Overview: For more complex objects, it is hard to use simple shapes to represent them. Instead, you can use 3D models that look much more realistic. There are thousands of models in the CreatiCode library for you to choose from, such as airplanes, cars, balls, etc.
Topic 10 - Follow Camera
-
Tutorial Link: Follow Camera
-
Overview: The orbit camera you used earlier is good for viewing static objects/scenes. However, when we have an avatar or an airplane that moves through the 3D scene, we need to use a “follow camera”, which follows a target object as it moves or turns so that we get a first-person view of the scene.
Project Idea - A Flying Drone (Difficulty: 1)
- Tutorial Link: A Flying Drone (Difficulty: 1)
- Overview: Control a drone to fly around the city scene and use a follow camera to get the drone’s view point.
Topic 11 - Moving or Rotating Objects
-
Tutorial Link: Speed of 3D Objects
-
Overview: To move or rotate a 3D object, a simple and recommended method is to set its speed. There are many types of speeds, such as movement, rotation, acceleration, gravity, etc. As discussed later, the object will naturally stop at obstacles when we set its speed as opposed to changing its position directly.
Project Idea - Building a Simple Table (Difficulty: 2)
- Tutorial Link: Building a Simple Table (Difficulty: 2)
- Overview: Compose a simple table using 5 boxes for the table top and 4 legs. We need to size and position each box accurately.
Topic 12 - Scaling Objects
-
Tutorial Link: Scaling Objects
-
Overview: You can resize an object in each of the X/Y/Z dimensions.
Project Idea - A Carpet (Difficulty: 2)
- Tutorial Link: A Carpet (Difficulty: 2)
- Overview: Compose a carpet using 3 cylinders that are scaled along one dimension
Topic 13 - Lighting up the scene
-
Tutorial Link: Using Lights
-
Overview: Every 3D scene must have one or more light sources, or we won’t be able to see anything through our camera. There are 4 types of light sources to choose from: ambient light (such as daylight), directional light (such as sunlight), point light (such as a light bulb), and spotlight (such as a car’s front light).
Topic 14 - Update Object Colors
-
Tutorial Link: Update Object Colors
-
Overview: You can use different color settings to make an object look like made of different types of materials. Also, you can update the color of a shape or model.
Topic 15 - Update Object Texture
-
Tutorial Link: Update Object Texture
-
Overview: To make a simple shape look like a real object, such as a wall made of a box, you need to set the texture of the object.
Project Idea - A UFO (Difficulty: 1)
- Tutorial Link: A UFO (Difficulty: 1)
- Overview: Compose a simple UFO using spheres with different textures
Topic 16 - Object Names and Sprite Objects
-
Tutorial Link: Object Names and Sprite Objects
-
Overview: Very often, you need to create and manage multiple 3D objects from the same sprite, such as creating multiple avatars using blocks from one sprite. In such cases, if you run the “move” block, you need a way to tell the system which box you want to move. This is one of the key differences between 2D and 3D coding, since in 2D Scratch, each sprite corresponds to one single object on the stage.
To solve this issue, CreatiCode invented a new concept of “sprite object”, which refers to one of the 3D objects created from the current sprite that’s currently “selected”. To apply any operation on a 3D object, you need to select that object first, then all subsequent blocks will be applied to that object, until a new object is selected as the “sprite object”.
Topic 17 - Other Simple Shapes
-
Tutorial Links:
-
Overview: Besides spheres and boxes, there are some other simple shapes that you can use to approximate objects, such as cylinders, tubes and rectangle tubes (a tube with 4 side faces). They also support a rich set of parameters.
Project Idea - A Painting in a Frame (Difficulty: 2)
- Tutorial Link: A Painting in a Frame (Difficulty: 2)
- Overview: create a program that displays a famous painting in a frame
Project Idea - Build Towers and Castles with Custom Block (Difficulty: 4)
- Tutorial Link: Build Towers and Castles with Custom Block (Difficulty: 4)
- Overview: Create a custom block that can build towers of different sizes and reuse it
Topic 18 - 3D Text
-
Tutorial Link: 3D Text
-
Overview: You can use 3D text to show information in your scene. They can be very thin or have some thickness, and they can also have different font types and curving styles.
Project Idea - Word Art (Difficulty: 2)
- Tutorial Link: Word Art (Difficulty: 2)
- Overview: Create a great visual effect with some 3D text
Project Idea - A Stop Sign (Difficulty: 2)
- Tutorial Link: A Stop Sign (Difficulty: 2)
- Overview: Create a stop sign using a cylinder and 3D text
Topic 19 - Extrusion
-
Tutorial Link: Extrusion
-
Overview: You can “extrude” any 2D image into a flat 3D object by adding thickness to it. This technique can have many interesting use cases when used cleverly, such as drawing a map then extruding it into a 3D maze.
Topic 20 - Object Collisions
-
Tutorial Links:
-
Overview: Object collision allows you to trigger events when 2 3D objects collide with each other, such as when an avatar runs into a wall or collects a power-up. This is a fundamental technique that allows the player to control their avatar and interact with the objects in the 3D world. There are 2 methods for detecting object collision: using the distance between the 2 objects, or casting rays (arrows) from one object and seeing if it touches the other object.
Project Idea - A Maze Game (Difficulty: 3)
- Tutorial Link: A Maze Game (Difficulty: 3)
- Overview: Control an avatar to run through a 3D maze.
Project Idea - Prevent Avatars from Running Through Walls (Difficulty: 4)
- Tutorial Link: Prevent Avatars from Running Through Walls (Difficulty: 4)
- Overview: When an avatar runs in a predefined scene like the city street, it may run through the buildings, because it is too slow to enable collision detection between the avatar and every object in the scene. Instead, we can use a transparent box to block the avatar out of the buildings.
Project Idea - Avatar Interacting with Objects (Difficulty: 4)
- Tutorial Link: Avatar Interacting with Objects (Difficulty: 4)
- Overview: In many games, the player controls an avatar to interact with other objects in the scene, such as colliding with walls or picking up reward items. In this tutorial, we will walk through 3 methods you can apply in your next game: ray cast, bounding box and distance measurement.
Project Idea - A Jumping Game (Difficulty: 5)
- Tutorial Link: A Jumping Game (Difficulty: 5)
- Overview: Create a game where the player jumps through the platforms to reach the goal area, and a leaderboard of the fastest players will be displayed at the end.
Project Idea - Crazy Highway Game (Difficulty: 6)
- Tutorial Link: Crazy Highway Game (Difficulty: 6)
- Overview: learn to build an exciting car game called “Crazy Highway”. The player will be driving a car to cut through fast-moving cars on a highway, and try to get to the finish line as soon as possible
Topic 21 - Copying Objects
-
Tutorial Link: Copying Objects
-
Overview: When you need to make many objects of the same type, it is often faster and more efficient to make copies of a single object. These copies can share the same data for model and animation, but have their own movements or colors.
Project Idea - An Alien Dance Party (Difficulty: 1)
- Tutorial Link: An Alien Dance Party (Difficulty: 1)
- Overview: create 3 copies of an Alien avatar and make them dance
Topic 21 - Highlights and Glow Effects
-
Tutorial Links:
-
Overview: When you need to draw the player’s attention to a specific object, you can “highlight” that object, or you can make that object glow in color.
Project Idea - A Spinning Earth (Difficulty: 1)
- Tutorial Link: A Spinning Earth (Difficulty: 1)
- Overview: create a spinning Earth using texture and add a highlight effect around it
Topic 22 - Hover Event
-
Tutorial Link: Hover Event
-
Overview: You can allow the player to interact with objects in your scene by hovering the mouse pointer over any object. This is called the “hover” event. You will get information about which object is under the pointer, so you can make that object react to this event.
Topic 23 - Picking Event
-
Tutorial Link: Picking Event
-
Overview: You can also allow the player to pick an object in your scene by clicking on it. This is called the “picking” event. You will get information about which object is clicked by the pointer, so you can make that object react to this event.
Project Idea - Pick A Letter (Difficulty: 2)
- Tutorial Link: Pick A Letter (Difficulty: 2)
- Overview: Allow the user to pick an letter and show some reactions
Project Idea - A Playable Rubik’s Cube (Difficulty: 6)
- Tutorial Link: A Playable Rubik’s Cube (Difficulty: 6)
- Overview: Create a playable Rubrik’s cube where the player can use swipe gestures and button to control the cubes.
Topic 24 - Dragging Event
-
Tutorial Link: Dragging Objects
-
Overview: You can also allow the player to drag an object with the pointer. This is called the “picking” event. You will get information about which object is being dragged as well.
Topic 25 - Lines, Arrows and Curves
-
Tutorial Links:
-
Overview: You can add lines, dotted lines, arrows and curves to the scene, which are very helpful for creating illustrations.
Topic 26 - Parenting
-
Tutorial Link: Parent-Child Relationship
-
Overview: “Parenting” is another unique concept in 3D coding. It means setting one object as the parent of another, so when the parent moves or turns, the child is moved or turned relative to the parent. This is a great way to make multiple objects behave as one compound object, and it has many interesting and smart use cases when you know it well.
Topic 27 - Movement Trails
-
Tutorial Link: Add Trails to Meshes
-
Overview: You can add a beautiful trail for a moving object to clearly show how it has moved.
Topic 28 - Carving Objects
-
Tutorial Link: Carving Objects
-
Overview: When 2 objects are overlapping, you can use one object to carve a hole from the other object. This allows you to create interesting new shapes.
Topic 29 - Community Models
-
Tutorial Links:
-
Overview: Although the CreatiCode library provides thousands of 3D models, you may sometimes need a special model that’s not in the library. In such cases, you can search through the library of models shared by the CreatiCode user community. If you still can’t find any suitable model there, you can try to find a free model with a permissive license from an external website like Tinkercad, Sketchfab or CGTrader, and upload that model as a new community model.
Project Idea - Using Your UFO as a Model (Difficulty: 2)
- Tutorial Link: Using Your UFO as a Model (Difficulty: 2)
- Overview: Use parenting to link 3 spheres of the UFO as one object, and export it as a GLB model.
Topic 30 - Making Copies in Bulk
-
Tutorial Links:
-
Overview: If you need to make a lot of copies of the same object, there are 3 methods to create multiple copies at once, which are more efficient than creating the copies one by one:
- You can make copies that form a “matrix” in the 3D space
- You can make copies that rotate around a given axis
- You can make copies that are at mirror positions of the original object.
Project Idea - A Bridge Runner (Difficulty: 4)
- Tutorial Link: A Bridge Runner (Difficulty: 4)
- Overview: create an animation with an avatar running and jumping on an infinitely long bridge
Project Idea - A Parkour Game (Difficulty: 5)
- Tutorial Link: A Parkour Game (Difficulty: 5)
- Overview: Extend the bridge runner project above to add game items that the avatar can pick up along the way
Topic 31 - Distance Sensors
-
Tutorial Link: Distance Sensors
-
Overview: You can cast rays (arrows) from an object in all 6 directions, which allows you to check its distance from other objects touched by these arrows.
Project Idea - A Self-Driving Car with Distance Sensors (Difficulty: 3)
- Tutorial Link: A Self-Driving Car with Distance Sensors (Difficulty: 3)
- Overview: Make a car avoid obstacles using a distance sensor.
Project Idea - Light Control with Distance Sensors (Difficulty: 2)
- Tutorial Link: Light Control with Distance Sensors (Difficulty: 2)
- Overview: Use a distance sensor to detect if a car is close to the entrance or exit of a tunnel, then turn on or off the light in the tunnel accordingly.
Topic 32 - Attach to Body Part
-
Tutorial Link: Attach to Body Part
-
Overview: You can attach one object (such as a hat) to a body part (such as the head) of another object (an avatar or an animal model), so that when that object plays an animation, the attached object will behave as if it is part of that object.
Topic 33 - First Person View Cameras
-
Tutorial Links:
-
Overview: You can move a “follow camera” right in front of an object or an avatar, so you get a first-person view without showing that object or avatar. You can also shoot out objects from the camera’s position, which is useful for first-person shooting games.
Topic 34 - Enable 3D Physics Engine for Simple Shapes
-
Tutorial Links:
-
Overview: You can use the 3D physics engine to help manage the 3D objects in your scene. For example, instead of writing code to directly move an object, you just need to tell the physics engine to “make this object behave like a ball”, then the engine will take full control of the object, including how it moves and collides with other objects. This is done by using a simple shape like box/sphere/cylinder to serve as the “physics body” of the object, and simulate how that simple shape would behave. The physics engine allows you to create very complex and realistic 3D worlds without writing too much code.
Project Idea - A Bouncing Ball Game (Difficulty 3)
- Tutorial Link: A Bouncing Ball Game (Difficulty 3)
- Overview: A physics-based game where we move and tilt a board so that the ball falls onto a platform
Project Idea - A Physics Puzzle Game (Difficulty: 3)
- Tutorial Link: A Physics Puzzle Game (Difficulty: 3)
- Overview: A physics-based game where we click to remove boxes so that the ball falls into a basket
Project Idea - Bloxorz Game (Difficulty 6)
- Tutorial Link: Bloxorz Game (Difficulty 6)
- Overview: learn to reproduce a classic puzzle game called “Bloxorz”. In this game, the player rotates a box on a platform to reach the target hole:
Topic 35 - Enable Physics Engine for Compound Shapes
-
Tutorial Link: Compound Physics Bodies
-
Overview: Sometimes, simple shapes like a box or sphere will not accurately simulate the behavior of an object, and you may need to create a “compound” shape that is composed of a few simple shapes.
Topic 36 - Setting a Physics Body’s Moving Speed
-
Tutorial Link: Set a Physics Body’s Moving Speed
-
Overview: After an object is “handed over” to the physics engine, you can not move it or set its position directly, since it will be bound to the physics body assigned to it. Instead, you can ask the physics engine to set the movement speed of that object for you.
Project Idea - A Mini Pool Game (Difficulty: 4)
- Tutorial Link: A Mini Pool Game (Difficulty: 4)
- Overview: Create a mini pool game using the physics engine
Topic 37 - Apply Force to Physics Bodies
-
Tutorial Link: Apply Force to Physics Bodies
-
Overview: Another way to make an object move is to apply some “force” to it. For example, gravity is one type of force. The physics engine will simulate how the object should behave when that force is applied.
Topic 38 - Handle Collisions Between Physics Bodies
-
Tutorial Link: Handle Collisions Between Physics Bodies
-
Overview: When 2 objects with physics body collides, the physics engine will broadcast a message, which allows you to add additional code to handle such events. For example, when a ball hits a target, remove the ball from the scene.
Project Idea - A Pinball Game (Difficulty: 5)
- Tutorial Link: A Pinball Game (Difficulty: 5)
- Overview: Create a pinball game using the physics engine
Topic 39 - Car with Physics Simulation
-
Tutorial Links:
-
Overview: The physics engine can accurately simulate the movement of a car and its 4 wheels, which is useful to create realistic car games. You can even build your own car using simple shapes, and then let the physics engine control it.
Project Idea - Smashing Boxes with a Car (Difficulty: 3)
- Tutorial Link: Smashing Boxes with a Car (Difficulty: 3)
- Overview: A physics-based game where we drive a car up a ramp to hit a stack of boxes.
Topic 40 - Constraints between 2 Physics Objects
-
Tutorial Links:
-
Overview: The physics engine can simulate various kinds of “constraints”, which are forces dynamically applied to objects to maintain the relative position between 2 physics-enabled objects.
- Distance Constraint: keeps 2 objects at the same constant distance even if they move
- Fixed Constraint: keeps the relative position between 2 objects the same
- Hinge Constraint: makes 2 objects look like they are connected by a rotating hinge (such as a door and the frame)
Project Idea - Spiderman Basketball (Difficulty: 5)
- Tutorial Link: Spiderman Basketball (Difficulty: 5)
- Overview: Create a game using the physics engine to swing a ball to a target basket
Topic 41 - Prebuilt Particle Emitters
-
Tutorial Link: Using Prebuilt Particle Emitters
-
Overview: “Particle Emitters” can emit (generate) particles, which are simply 2D images with transparent backgrounds. Usually, a particle emitter can emit hundreds or even thousands of particles continuously, which can produce beautiful and realistic visual effects. There are a few pre-built emitters that can be easily added to your scene with customization: fire, smoke, spark, halo and orb.
Topic 42 - Single-Point Particle Emitter
-
Tutorial Link: Single-Point Particle Emitter
-
Overview: To produce more customized visual effects, you can use single-point particle emitters instead of using the pre-built ones. These emitters generate particles from a single point in the scene, and you can customize many parameters for the particles, such as their image pattern, size, moving speed, rotation speed and life span.
Topic 43 - Moving and Rotating Particles
-
Tutorial Link: Moving and Rotating Particles
-
Overview: Just like any 3D object, you can move or rotate a particle emitter, which causes the new particles to be generated at new locations and angles.
-