________________________________________________________________________
Milestone 1: Plan Your Class

Class Description

Ready to create a stunning 3D Earth only with a few lines of code?

Learn by doing. In this class, we will be coding together a 3D animation of our planet in the browser. I will start by teaching you how to set up a 3D environment using Three.js, then we will add objects and geographical data. Throughout the process, you'll be able to turn a 3D object into a stunning interactive animation! I will show you where you can find beautiful images of the Earth from NASA, and you will discover how with a few tricks you can transform an image into a 3D representation of the world.

Here's an example of what your project will look like: [link]
__________________

Why take this class?

By the end of the class, you will have your own interactive 3D web application that you can show to your friends and future employers. You will know two different ways to create 3D relief that can be explored interactively in the browser. It can take months to discover those methods, and you will learn them all in one hour-long class. The skill of manipulating images and animating spatial data in the browser will open a whole world of possibilities for you.

Whether you're an advanced developer who wants to discover his/her creative side or a beginner developer who wants to turn geographical data into stunning visualizations, this course is for you. No 3D development skills are required, although is recommended that you have basic JavaScript knowledge.
__________________

What you'll learn:

Where to find documentation and examples for WebGL and Three.js
How to setup a basic 3D scene in the browser
How to display a 3D object in the browser
Where to find images of the Earth taken from satellites
How to combine a 3D object with an image
How to render the altitude of the relief
How to animate the 3D scene and/or the object
How to add a stars background to the scene
Where to find free 3D objects online
Bonus: How to add a 3D object on a 3D Earth

In this course, you will find out some useful tips and techniques to create immersive 3D experiences in the browser.

__________________

What this course is not:

This course is not an introduction to Three.js, although we will briefly discuss the setup and I will provide useful tips as we code.

__________________

What you'll need:

A stable internet connection, and laptop or a computer with Visual Studio Code installed.
__________________

Alright! Let's get started!

I hope you can join me in this creative coding journey. See you in class!
__________________

You can also find me here:

Website

Shop

Instagram

Create a 3D Earth with Three. js - image 1 - student project

Project Description

Assignment:

Develop an interactive 3D web application with a spinning Earth, that you can show to your friends and future employers. Choose your own texture for the Earth, and show us where you're from by putting a sign on the globe.
__________________

Materials:

Laptop or computer with a code editor installed. I'll be using Visual Studio Code, but you can use your favorite one, as long as you follow along while coding.

This project does not focus on setting up Three.js, you will have the possibility to use a Three.js boilerplate as a starter, but you can also set up Three.js by coding along with me if you wish to practice.
__________________

Steps:

To get the most out of this class, I encourage you to follow along and code your page as I am coding mine.

Setup a basic 3D scene using Three.js
Add a 3D object to the scene and position it
Load a texture of the Earth from NASA and apply it to the object
Render the altitude of the relief
Animate the 3D scene and/or the object
Add a background of stars to the scene
Bonus: Add a 3D object on a 3D Earth
Publish the project on the web

__________________

Sharing your work:

Share your final project and progress shots with the class by uploading them to the "Create Project" section.
Make sure that your project includes the following:

spinning globe
Earth texture of your choice
your location

Bonus points if you also share:

Any process screenshots or photos (would love to see a lot of Earths!)
Why you decided to use the specific texture
Any questions you have about how to improve this or take it to the next level

Don't forget to share your bugs and glitches with us, too!

__________________

Examples:

Here's an example of an animated 3D Earth from my class: [link]

__________________

Links, sources, files, extras
Listed by each exercise

https://threejs.org/ - library and documentation

________________________________________________________________________
Milestone 2: Outline Your Class

https://docs.google.com/document/d/1NiuEt6YmVWbzEfnVf5nEQ82lzUSwt85DgUtG2SUQ0h4/edit?usp=sharing

Alexa Cristina

3D maps enthusiast

--

11

Empresa

Comunidad

Enseñanza

Móvil

Empresa

Comunidad

Enseñanza