add plane version

src/script.ts

@@ -61,10 +61,12 @@ scene.add(ambientLight);
 
 let total = 0;
 let lastDelta = 0;
+
+let rotate = true;
 renderer.setAnimationLoop((delta) => {
   renderer.render(scene, camera);
 
-  planetMesh.rotation.y += 0.001;
+  if (rotate) planetMesh.rotation.y += 0.001;
 
   if (lastDelta > 0) {
     total += delta - lastDelta;
@@ -91,6 +93,10 @@ document.addEventListener("keydown", (event) => {
   } else if (event.key === "3") {
     createPlanet("snowForest");
   }
+
+  if (event.key === " ") {
+    rotate = !rotate;
+  }
 });
 
 // button press

src/worlds/biome.ts

@@ -1,13 +1,12 @@
 import { UberNoise, type NoiseOptions } from "uber-noise";
-import { Color, ColorRepresentation, Vector3 } from "three";
+import { Color, type ColorRepresentation, Vector3 } from "three";
 
 import {
   ColorGradient,
   type ColorGradientOptions,
 } from "./helper/colorgradient";
 import { biomePresets } from "./presets";
 import { Octree } from "./helper/octree";
-import { type VertexInfo } from "./types";
 
 export type VegetationItem = {
   name: string;

src/worlds/materials/OceanCausticsMaterial.ts

@@ -5,7 +5,9 @@ import {
 import { noise } from "./noise";
 
 export class PlanetMaterialWithCaustics extends MeshStandardMaterial {
-  constructor(parameters: MeshStandardMaterialParameters) {
+  constructor(
+    parameters: MeshStandardMaterialParameters & { shape: "sphere" | "plane" },
+  ) {
     super(parameters);
 
     this.onBeforeCompile = (shader) => {
@@ -48,11 +50,11 @@ export class PlanetMaterialWithCaustics extends MeshStandardMaterial {
         "#include <color_fragment>",
         `#include <color_fragment>
         vec3 pos = vPos * 3.0;
-        float len = length(vPos);
+        ${parameters.shape == "plane" ? "float len = vPos.y;" : "float len = length(vPos) - 1.0;"}
         // Fade in
-        float fadeIn = smoothstep(0.96, 0.985, len);
+        float fadeIn = smoothstep(-0.04, -0.015, len);
         // Fade out
-        float fadeOut = 1.0 - smoothstep(0.994, 0.999, len);
+        float fadeOut = 1.0 - smoothstep(-0.006, -0.001, len);
         float causticIntensity = fadeIn * fadeOut * 0.7;
         diffuseColor.rgb = mix(diffuseColor.rgb, vec3(1.0), causticIntensity * smoothstep(0.0, 1.0, caustics(vec4(pos, time * 0.05))));
     `,

src/worlds/planet.ts

@@ -31,6 +31,8 @@ export type PlanetOptions = {
   material?: "normal" | "caustics";
 
   biome?: BiomeOptions;
+
+  shape?: "sphere" | "plane";
 };
 
 export class Planet {
@@ -46,7 +48,14 @@ export class Planet {
 
   vegetationPositions?: Record<string, Vector3[]>;
 
+  shape: "sphere" | "plane" = "sphere";
+
+  tempQuaternion = new Quaternion();
+
   constructor(options: PlanetOptions = {}) {
+    this.shape = options.shape ?? this.shape;
+    options.shape = this.shape;
+
     this.options = options;
 
     this.biome = new Biome(options.biome);
@@ -110,7 +119,10 @@ export class Planet {
 
     const material =
       this.options.material === "caustics"
-        ? new PlanetMaterialWithCaustics(materialOptions)
+        ? new PlanetMaterialWithCaustics({
+            ...materialOptions,
+            shape: this.shape,
+          })
         : new MeshStandardMaterial(materialOptions);
 
     const planetMesh = new Mesh(geometry, material);
@@ -257,14 +269,15 @@ export class Planet {
   updatePosition(item: Object3D, pos: Vector3) {
     item.position.copy(pos);
 
-    const currentRotation = new Quaternion();
-    const a = item.up.clone().normalize();
-    const b = pos.clone().normalize();
+    if (this.shape === "sphere") {
+      const a = item.up.clone().normalize();
+      const b = pos.clone().normalize();
 
-    currentRotation.setFromUnitVectors(a, b);
+      this.tempQuaternion.setFromUnitVectors(a, b);
 
-    item.quaternion.copy(currentRotation);
+      item.quaternion.copy(this.tempQuaternion);
 
-    item.up = b;
+      item.up = b;
+    }
   }
 }

src/worlds/presets.ts

@@ -1,5 +1,5 @@
 import { type BiomeOptions } from "./biome";
-import { PlanetOptions } from "./planet";
+import { type PlanetOptions } from "./planet";
 
 const beachBiome: BiomeOptions = {
   noise: {