add terrain

package.json

@@ -10,6 +10,9 @@
     "deploy": "sh deploy.sh"
   },
   "devDependencies": {
+    "@rollup/plugin-inject": "^5.0.5",
+    "@rollup/plugin-legacy": "^3.0.2",
+    "@rollup/plugin-replace": "^5.0.5",
     "@sveltejs/vite-plugin-svelte": "^2.4.6",
     "@types/three": "^0.155.1",
     "svelte": "^4.0.5",
@@ -35,6 +38,7 @@
     "stats.js": "^0.17.0",
     "three": "^0.159.0",
     "three-good-godrays": "^0.4.4",
-    "three-story-controls": "^1.0.6"
+    "three-story-controls": "^1.0.6",
+    "three.terrain.js": "^2.0.0"
   }
 }

src/entities/Earth.svelte

@@ -1,12 +1,16 @@
 <script>
-import { MeshBasicMaterial, PlaneGeometry, TextureLoader } from 'three'
+import { Group, MeshBasicMaterial, PlaneGeometry, TextureLoader, Vector3 } from 'three'
+import Terrain from '../entities/Terrain.svelte'
 import { T, useLoader } from '@threlte/core'
 import earthTextureUrl from '../assets/earth/Earth.png'
 import earthNormalUrl from '../assets/earth/normal/hires/EarthNormal.png'
 import earthSpecularUrl from '../assets/earth/spec/hires/EarthSpec.png'
 
+export let sunPosition = [0, 0, 0]
+export let sunBrightness = 1
 export let planetRadius = 1
 export let position = [0, 0, 0]
+export let planetColor = 0x886666
 
 const textures = useLoader(TextureLoader).load({
   map: earthTextureUrl,
@@ -17,6 +21,32 @@ const textures = useLoader(TextureLoader).load({
 
 {#if $textures}
 <T.LOD let:ref={lod}>
+  <T.Group
+    on:create={({ ref }) => {
+      lod.addLevel(ref, 100)
+    }}
+    renderOrder={2}
+  >
+    <T.HemisphereLight
+      intensity={sunBrightness}
+      position={[0, 100, 0]}
+    />
+    <T.DirectionalLight
+      castShadow
+      intensity={sunBrightness}
+      position={sunPosition}
+    />
+    <T.Mesh
+      position={[0, -1, 0]}
+      rotation={[-Math.PI / 2, 0, 0]}
+      receiveShadow
+      scale={[1e6, 1e6, 1]}
+    >
+      <T.PlaneGeometry args={[1, 1]} />
+      <T.MeshStandardMaterial color={planetColor}/>
+    </T.Mesh>
+    <Terrain color={planetColor} />
+  </T.Group>
   <T.Mesh
     position={position}
     rotation={[Math.PI / 2, 0, -Math.PI / 2]}
@@ -25,6 +55,7 @@ const textures = useLoader(TextureLoader).load({
     on:create={({ ref }) => {
       lod.addLevel(ref, planetRadius * 0.01)
     }}
+    renderOrder={1}
   >
     <T.IcosahedronGeometry args={[1, 64]} />
     <T.MeshPhongMaterial

src/entities/Terrain.svelte

@@ -0,0 +1,49 @@
+<script>
+  import { T } from '@threlte/core'
+  import * as THREE from 'three'
+  import { Easing } from 'intween'
+  import Terrain from '../lib/three.terrain.js'
+
+  export let color = 0x000000
+
+  const size = 4
+  const xS = 63 * size
+  const yS = 63 * size
+
+  const random = (min, max) => Math.random() * (max - min) + min
+
+  const island = function(coords) {
+    const theta = Math.random() * Math.PI * 2;
+    coords.x = 0.5 + Math.cos(theta) * coords.x * 0.4;
+    coords.y = 0.5 + Math.sin(theta) * coords.y * 0.4;
+  };
+
+  const valley = (coords) => {
+    const theta = Math.random() * Math.PI * 2;
+    const r = 0.5 * Easing.quadOut(Math.sqrt(random(0.001, 1)));
+    coords.x = 0.5 + Math.cos(theta) * r;
+    coords.y = 0.5 + Math.sin(theta) * r;
+  }
+
+  const material = new THREE.MeshStandardMaterial({color: 0x000000})
+
+  const terrainScene = Terrain({
+    easing: Terrain.EaseInOut,
+    frequency: 15,
+    heightmap: (g, o, feature) => {
+      Terrain.Hill(g, o, feature, valley);
+    },
+    material,
+    maxHeight: 2800,
+    minHeight: -0.1,
+    steps: 1,
+    xSegments: xS,
+    xSize: 1024 * 32 * size,
+    ySegments: yS,
+    ySize: 1024 * 32 * size,
+  })
+
+  $: material.color.set(color)
+</script>
+
+<T is={terrainScene} />