Implemented RevolutionCounter.tsx and added sun object

package.json

@@ -12,6 +12,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "@theme-ui/color": "^0.4.0-rc.5",
     "@theme-ui/components": "^0.3.1",
     "@types/hammerjs": "^2.0.36",
     "@types/peerjs": "^1.1.0",
@@ -53,7 +54,7 @@
     "peer": "^0.5.3",
     "peerjs": "^1.3.1",
     "pnp-webpack-plugin": "1.6.4",
-    "polished": "^3.6.5",
+    "polished": "^3.6.7",
     "postcss-flexbugs-fixes": "4.1.0",
     "postcss-loader": "3.0.0",
     "postcss-normalize": "8.0.1",
@@ -67,6 +68,7 @@
     "react-dom": "^16.13.1",
     "react-hammerjs": "^1.0.1",
     "react-modal": "^3.11.2",
+    "react-move": "^6.4.0",
     "react-popper": "^2.2.3",
     "resolve": "1.15.0",
     "resolve-url-loader": "3.1.1",
@@ -108,6 +110,7 @@
   },
   "devDependencies": {
     "@testing-library/dom": "^7.23.0",
+    "@theme-ui/css": "^0.4.0-rc.5",
     "@types/dat.gui": "^0.7.5",
     "@types/jest": "^26.0.10",
     "@types/node": "^12.0.0",
@@ -116,7 +119,7 @@
     "@types/react-dom": "^16.9.0",
     "@types/react-hammerjs": "^1.0.1",
     "@types/react-modal": "^3.10.6",
-    "@types/theme-ui": "^0.3.6",
+    "@types/theme-ui": "^0.3.7",
     "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "^3.10.1",
     "@typescript-eslint/parser": "^3.10.1",

src/3d/constants.ts

@@ -3,6 +3,7 @@ import { Vector3 } from 'three'
 export const TAU = Math.PI * 2
 
 export const MODELS_LOCATION = process.env.PUBLIC_URL + '/models'
+export const IMAGES_LOCATION = process.env.PUBLIC_URL + '/images'
 
 export const MODELS = {
   BLUE_TOP: 'blueTop',
@@ -63,16 +64,14 @@ export const COLOR_VALUES: { [k in Color]: number } = {
 }
 
 export const SHADE_Y: { [k in GrowthStage]: number } = [-18, -10.7, -5.63, 0]
-
 export const SUN_ANGLE = 52.725
-
 export const TREE_TOP_Y = 10
-
 export const TILE_SIZE = 5
-
 export const INITIAL_SUN_ORIENTATION = 1.50 * Math.PI
-
 export const GROUND_SHADE_HIDDEN_ROTATION = -0.8
+export const SUN_SEGMENT_SIZE = 56
+export const SUN_SEGMENT_POSITION_Y = 2.2
+export const SUN_SEGMENT_POSITION_Z = SUN_SEGMENT_SIZE / 2
 
 export interface TreeGrowthProp {
   tree: { scale: Vector3 }

src/3d/extraObjects.ts

@@ -1,4 +1,5 @@
-import { CylinderBufferGeometry, Mesh, MeshBasicMaterial, Object3D } from 'three'
+import { CylinderBufferGeometry, Mesh, MeshBasicMaterial, Object3D, PlaneBufferGeometry, TextureLoader } from 'three'
+import { IMAGES_LOCATION, SUN_SEGMENT_SIZE } from './constants'
 
 const cylinderGeometry = new CylinderBufferGeometry(4, 4, 1, 12)
 const cylinderMaterial = new MeshBasicMaterial()
@@ -12,3 +13,11 @@ CYLINDER_OBJ.add(cylinderMesh)
 export const basicGray = new MeshBasicMaterial({
   color: 0xcccccc
 })
+
+const sunSegmentTexture = new TextureLoader().load(
+  IMAGES_LOCATION + '/sun_segment.png', undefined, undefined, console.error
+)
+const sunSegmentMaterial = new MeshBasicMaterial({ transparent: true, map: sunSegmentTexture })
+const sunSegmentGeometry = new PlaneBufferGeometry(SUN_SEGMENT_SIZE, SUN_SEGMENT_SIZE)
+export const sunSegmentMesh = new Mesh(sunSegmentGeometry, sunSegmentMaterial)
+sunSegmentMesh.rotation.x = -Math.PI / 2