yaserdemet/react-threeJs

React-ThreeJs Weather App

⛅click here to see detail of page

Problem Statement

• This project aims to create Weather App with Material UI and ThreeJs.

At the end of the project, following topics are to be covered;

📌 ThreeJs

📌 React Globe

📌 Props and State Logic

📌 React Router Dom

📌 State Management with Context Api

📌 Conditional Rendering

📌 Async Await Function

📌 React Hooks (useState, useEffect, useRef, useNavigate, useParams ReactMemo)

📌 React AutoAnimate

📌 3rd Part Libraries ( Toastify, Axios, AutoAnimation )

📌 Styling with Material Ui and SASS

📌 Deployment with Vercel and Netlify

⛅ You can use OpenWeather Api for your app to get apiKey

How to add React Globe in your project;

Strongly adviced to use these versions

"react-globe": "^5.0.2",
"react-globe.gl": "^2.22.3",
"three": "0.118.3"

In your component;

import ReactGlobe from "react-globe";

 <ReactGlobe
        height="100vh"
        animations={animations}
        width="100vw"
        markers={markers}
        options={{
          cameraAutoRotateSpeed: 1,
          cameraRotateSpeed: 0.5,
          enableCameraAutoRotate: true,
          enableCameraRotate: true,
          enableCameraZoom: true,
          cameraDistanceRadiusScale: 5,
          cameraMaxDistanceRadiusScale: 10,
          ambientLightColor: "grey",
          ambientLightIntensity: 1,
        }}
      />