# Exercises

## Why 3D?

Understanding 3-dimensional coordinates is important for children for several reasons:

- **Foundational Knowledge**: Serves as a basis for more complex mathematical and scientific concepts, such as vectors, that they will encounter in higher-level education.

- **Real-World Applications**: 3D coordinates are used in various fields like engineering, architecture, and video game design (e.g. Minecraft), giving kids a practical understanding that can be applied in their future careers.

- **Enhanced Visualization Skills**: Working with 3D coordinates can improve a child’s ability to visualize and understand objects from different angles.

- **Problem-Solving**: Encourages logical thinking and problem-solving as they learn to plot points and interpret 3D spaces.

- **Technological Relevance**: As we move towards a more digital age, skills like 3D modeling and printing are becoming increasingly important, and understanding 3D coordinates is a basic aspect of this.

- **Interdisciplinary Learning**: Understanding 3D spaces isn’t just limited to mathematics; it's also used in subjects like physics, computer science, and environmental science.

- **Cognitive Development**: Enhances cognitive skills like attention to detail, logic, and sequential reasoning, which are vital for academic and personal growth.

## Why Babylon.js?

* Easy to approach because of browser-based environment.
* Relevant for kids ([Minecraft Classic](https://classic.minecraft.net/), Lego)
* Combine 3D with coding
* It is fun!

## Hello World

* [https://playground.babylonjs.com/#WZIPZD](https://playground.babylonjs.com/#WZIPZD)
* [Starter code](https://playground.babylonjs.com/#5FUGGN#6)
* Scene with camera, light, a box, and a sphere.
* Use it to talk about very basics.

## Coordinate System

* [https://playground.babylonjs.com/#G95Y17#3](https://playground.babylonjs.com/#G95Y17#3)
* [Starter code](https://playground.babylonjs.com/#DJT2YZ#8)
* Draw a coordinate system
* Learn something about grouping, displaying text, translation

## Build a House

* [https://playground.babylonjs.com/#D254MY](https://playground.babylonjs.com/#D254MY)
* [Starter code](https://playground.babylonjs.com/#PF7DEM)
* Ground
* Materials, textures

## Minecraft Houses

* [https://playground.babylonjs.com/#WRSE9T](https://playground.babylonjs.com/#WRSE9T)
* [Starter code](https://playground.babylonjs.com/#ZHUMML)
* Textures, Alpha

## Steve

* [https://playground.babylonjs.com/#WI88JV#1](https://playground.babylonjs.com/#WI88JV)
* [Starter code](https://playground.babylonjs.com/#68GN72#19)
* More complex textures
* Animation

## Camera and UI

* [https://playground.babylonjs.com/#LX0Y6P#6](https://playground.babylonjs.com/#LX0Y6P#6)
* [Starter code](https://playground.babylonjs.com/#Z2ZH4Z#1)
* Universal camera vs. arc rotating camera
* Datasaurus data set
* Add UI (buttons)

## Lego Bricks (Work in Progress)

* [https://playground.babylonjs.com/#4ZT2X4#8](https://playground.babylonjs.com/#4ZT2X4#8)
* [Starter](https://playground.babylonjs.com/#QYCM9G)
* Combining meshes

# Code Snippets

## Set Color

static setColor(mesh: BABYLON.Mesh, color: number) {
    var colors = mesh.getVerticesData(BABYLON.VertexBuffer.ColorKind);
    if (!colors) {
        colors = [];
        var positions = mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind);
        for (var p = 0; p < positions.length / 3; p++) {
            colors.push(color >> 16, color >> 8 & 0xFF, color & 0xFF, 1);
        }
    }

    mesh.setVerticesData(BABYLON.VertexBuffer.ColorKind, colors);
}