Background Knowledges

This video explains well how the path of sun looks like along the year

https://www.youtube.com/watch?v=iUCxGWkbS1g

And these pictures from Wikipedia explains well how it looks like in different latitudes:

from: https://en.wikipedia.org/wiki/Sun_path

Set up

Project

I choose to work with R3F instead of vanilla Three.js. I choose the Next.js as the React frame work.

I started by npx create-next-app@latest start a Next.js project, and then install Three.js, R3F, Drei seperately.

npm install three @types/three @react-three/fiber``@react-three/drei

However, there is a tool for this recipe which looks even better:

https://github.com/pmndrs/react-three-next

npm create r3f-app next my-app -ts

MainScene

Usually, you need <CameraControls /> to control the camera, <ambientLight intensity={3} /> or/and <pointLight position={[20, 30, 10]} intensity={3} decay={0.2} /> to light up the scene. I added <axesHelper args={[10]} /> here which is helpful in developing.

<Canvas
  shadows
  camera={{ position: [14, 5, 15], fov: 60 }}
  style={{
    border: '1px solid #ffffff',
    borderRadius: '6px',
  }}
>
  <CameraControls />
  {/* <axesHelper args={[10]} /> */}
  <ambientLight intensity={Math.PI / 4} />
  <SkyFromEarth position={[0, 0, 0]} rotation={[0, 0, 0]} />
  <House />
  <Ground />
</Canvas>

<Ground />

Usually for a 3D scene that simulate the real world, it is useful to setup a ground with Grid. Go inside of my <Ground /> for more infos.

MVP

1. A Moving Sun

The core thing need to be done for this project, is to make a sphere moves around a point alone a circle, to represent the sun rises and falls in the sky.